Jump to:

1383 Posts in 492 Topics by 521 members

Themes

SilverStripe Forums » Themes » How to create navigation?

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 1379 Views
  • mommek
    Avatar
    Community Member
    9 Posts

    How to create navigation? Link to this post

    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?

  • Willr
    Avatar
    Forum Moderator
    5497 Posts

    Re: How to create navigation? Link to this post

    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.

  • mommek
    Avatar
    Community Member
    9 Posts

    Re: How to create navigation? Link to this post

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

  • Willr
    Avatar
    Forum Moderator
    5497 Posts

    Re: How to create navigation? Link to this post

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

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

  • mommek
    Avatar
    Community Member
    9 Posts

    Re: How to create navigation? Link to this post

    Oh... You're really good!

    Thanks again

  • sonet
    Avatar
    Community Member
    33 Posts

    Re: How to create navigation? Link to this post

    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.

  • Shauna G
    Avatar
    Community Member
    52 Posts

    Re: How to create navigation? Link to this post

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

    1379 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.