Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Multiple Styles in Top Level Menu


Go to End


2 Posts   1842 Views

Avatar
ShadeFrozen

Community Member, 10 Posts

29 September 2010 at 3:58pm

Hi there,

Coming from a ColdFusion background I am new to Silverstripe but so far I love it, and perhaps because I have a programming background, I found ALL of the tutorials easy to understand and an absolute must for "newbies". But there is one thing that currently has me stumped, and it is to do with the styling of the top level menu items. An example to demonstrate what I wish to achieve...

Currently my included navigation.ss file looks like so:
<ul>
<% control Menu(1) %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a></li>
<% end_control %>
</ul>

That's all fine and dandy and everything works fine. But I want more than just the page name in the menu text. The above would generate based on the four pages I have allowed to display:

<ul>
<li><a href="/home/" class="current"><span>Home</span></a></li>
<li><a href="/about-us/" class="link"><span>About Us</span></a></li>
<li><a href="/contact-us/" class="link"><span>Contact Us</span></a></li>
<li><a href="/news/" class="link"><span>News</span></a></li>
</ul>

But what I need is something more than just the actual Menu title in the link. i.e. in the above example I want to display:
<li><a href="/home/" class="current"><span>Home</span> GORE NZ</a></li>

Then I can use CSS to make the two look different and place the additional text on a new line. Is there any way of achieving this short of *hacking* with something like:

<ul>
<% control Menu(1) %>
<li>
<a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a>
<% if MenuTitle(home) %>
GORE NZ
<% else %>
<% if MenuTitle(about us) %>
AN OVERVIEW
<% end_if %>
</li>
<% end_control %>
</ul>

... although I just tried that and it adds GORE NZ to all of the navigation items. Any ideas or help appreciated.

TIA
Mark

Avatar
ShadeFrozen

Community Member, 10 Posts

1 October 2010 at 4:29pm

So to answer my own rather silly question, after stopping and actually thinking about it (yes I was having a "der" moment up there in my first post so I apologise for that) the simple solution is:

Extending page.php I added

function getCMSFields() {
$fields = parent::getCMSFields();
$fields->addFieldToTab('Root.Content.Main', new TextField('SubNavText'), 'Content');
return $fields;
}

static $db = array(
'SubNavText' => 'Text'
);

Rebuilt the database, then in the nav include (navigation.ss) I added the subnavtext field.

<ul>
<% control Menu(1) %>
<li><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span> $SubNavText
</a></li>
<% end_control %>
</ul>

did a flush, and it works fine. Again, sorry about the dumb question and this is obviously why no one replied, but that isn't always a bad thing, since finding the solution ones self and having a 'light bulb' moment is often more beneficial.