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.

Themes

Discuss SilverStripe Themes.

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

How to create navigation?


Reply

7 Posts   1394 Views

Avatar
mommek

1 July 2010 at 10:20pm Community Member, 9 Posts

Hi!

I'm new here, but I can't find answer to my problem.

In tutorial to do my theme in SS, they've this code for navi:

<ul id="Menu1">
<% control Menu(1) %>
<li><a href="#">$MenuTitle</a></li>
<% end_control %>
</ul>

(It's like a while, which generate same code...)

and I have in my html code somethink like this:

<div id="button01"><a href="#" title="xyz"></a></div>
<div class="separator"></div>
<div id="button02"><a href="#" title="xyz"></a></div>
<div class="separator"></div>
<div id="button03"><a href="#" title="xyz"></a></div>
<div class="separator"></div>
<div id="button04"><a href="#" title="xyz"></a></div>

It's image navigator without text labels and each of them are unique (button01, ...02, ..03)

Can someone help me with this?

Avatar
Willr

1 July 2010 at 10:34pm Forum Moderator, 5511 Posts

You can use any of the properties of the Page object to help you with this. I like to use the $URLSegment and as long as people don't change the URL then it works fine

<div class="nav-$URLSegment">...

Will generate nav-home, nav-contact-us etc which you can style.

Avatar
mommek

1 July 2010 at 10:49pm Community Member, 9 Posts

Thanks a lot!! :-)

btw.:
in my code, I have <div> for separator | ... this is not possible to do somethink like that:

<button>
<separator>
<button>
<separator>
<button>

(I don't want have separator in the end of nav.)

(and I'm sorry for my english.. :-/ )

Avatar
Willr

1 July 2010 at 10:59pm Forum Moderator, 5511 Posts

Sure its possible. You can use <% if Last %> to skip the last one

<% if Last %><% else %><separator><% end_if %>

Avatar
mommek

1 July 2010 at 11:03pm Community Member, 9 Posts

Oh... You're really good!

Thanks again :-)

Avatar
sonet

2 July 2010 at 10:05am (Last edited: 2 July 2010 10:06am), Community Member, 33 Posts

Another more elegant option would be to handle the separator within CSS (without any unnecessary HTML markup).
SilveStripe comes with helpful template controls/variables allowing you tag items depending on the object’s position like for instance the $FirstLast control.

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

You can assign in CSS a transparent image with a separator on one side for all menu items and remove it from the last one.

You might want to check the [url=http://doc.silverstripe.org/built-in-page-controls#dataobjectset_options] Build-In Page Controls[/url].

Avatar
Shauna G

21 July 2010 at 11:48am Community Member, 52 Posts

For ease of navigation, accessibility, and expandability, I recommend against using image buttons the way you are if at all possible. You can create a single image background that you can use for all your buttons and set them as the background for the list items. Doing so will allow you to use the auto-generated menu that you replaced.

You can find a tutorial of what I'm talking about here:
http://www.alistapart.com/articles/slidingdoors/
(and to make it one image, simply use this tactic: http://www.alistapart.com/articles/sprites/)