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   1441 Views

Avatar
mommek

Community Member, 9 Posts

1 July 2010 at 10:20pm

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

Forum Moderator, 5513 Posts

1 July 2010 at 10:34pm

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

Community Member, 9 Posts

1 July 2010 at 10:49pm

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

Forum Moderator, 5513 Posts

1 July 2010 at 10:59pm

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

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

Avatar
mommek

Community Member, 9 Posts

1 July 2010 at 11:03pm

Oh... You're really good!

Thanks again :-)

Avatar
sonet

Community Member, 33 Posts

2 July 2010 at 10:05am

Edited: 02/07/2010 10:06am

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

Community Member, 52 Posts

21 July 2010 at 11:48am

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/)