1267 Posts in 351 Topics by 486 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 1155 Views |
-
How to create navigation?
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?
-
Re: How to create navigation?
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.
-
Re: How to create navigation?
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.. :-/ )
-
Re: How to create navigation?
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 %>
-
Re: How to create navigation?
2 July 2010 at 10:05am Last edited: 2 July 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 Build-In Page Controls.
-
Re: How to create navigation?
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/)
| 1155 Views | ||
|
Page:
1
|
Go to Top |
