Jump to:

1384 Posts in 493 Topics by 522 members

Themes

SilverStripe Forums » Themes » Menu issue when creating a theme

Discuss SilverStripe Themes.

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

Page: 1
Go to End
Author Topic: 1047 Views
  • asosaa
    Avatar
    Community Member
    1 Post

    Menu issue when creating a theme Link to this post

    Hi everyone! Nice to meet you...
    I've been having a hard time trying to figure out this one; I don't know how to add the following menu to my theme:

    <ul id="menu">
                   <li><a href="#" class="about">About Us</a></li>
                   <li><a href="#" class="service">Services</a></li>
                   <li><a href="#" class="blog">Blog</a></li>
                   <li><a href="#" class="contact">Contact</a></li>
                </ul>


    The issue is that her's the way I wrote the CSS, it's made with sprites technique:

    ul#menu{
             width: 551px;
             margin-left: 170px;
             margin-top: 114px;
             list-style: none;
          }
             ul#menu li a{
                display: block;
                float: left;
                height: 35px;
                background-image: url(img/menu.png);
                text-indent: -9999px;
             }
                ul#menu li a.about{
                   width: 146px;
                   background-position: 0 0;
                }
                   ul#menu li a.about:hover{
                      background-position: 0 -44px;
                   }
                ul#menu li a.service{
                   width: 140px;
                   background-position: -146px 0;
                }
                   ul#menu li a.service:hover{
                      background-position: -146px -44px;
                   }
                ul#menu li a.blog{
                   width: 120px;
                   background-position: -286px 0;
                }
                   ul#menu li a.blog:hover{
                      background-position: -286px -44px;
                   }
                ul#menu li a.contact{
                   width: 144px;
                   background-position: -406px 0;
                }
                   ul#menu li a.contact:hover{
                      background-position: -406px -44px;
                   }


    So the Method of

    <% if Menu(1) %> <ul><% control Menu(1) %>...

    possibly won't work, so which could the best method to accomplish a menu that's as functional as the one the HTML has??

    Thanks for reading this,
    Alan S.

  • Willr
    Avatar
    Forum Moderator
    5508 Posts

    Re: Menu issue when creating a theme Link to this post

    For using sprites in menus like this I normally use the $URLSegment variable as the class name

    <% control Menu(1) %>
    <li><a href="$Link" class="$URLSegment">$Title</a></li>
    <% end_control %>

    Then that gives you classes like 'home', 'about', 'blog'. However its not particular robust if you want to rename a page but it works otherwise!

  • me.yay
    Avatar
    Community Member
    14 Posts

    Re: Menu issue when creating a theme Link to this post

    Thanks for the hint Willr.

    This can be easylie enhanced with css mouseover effect using the states (current/section/link) from $LinkingMode.

    templates/Page.ss

    <ul id="Menu1">
    <% control Menu(1) %>
    <li class="$LinkingMode" id="$URLSegment"><a href="$Link">$Title</a></li>
    <% end_control %>
    </ul>

    css/layout.css

    ...
    #about-us a{
       width: 50px;
       margin-left: 20px;
       background: url(../images/nav_about.gif) no-repeat;
    }
    #about-us a:hover, #about-us.current a, #about-us.section a{
       background: url(../images/nav_about_mo.gif) no-repeat;
    }
    ...

    Is there any smarter solution? Using mouseOver wouldn't highlight the current list item.

    kind regards
    Metin

    1047 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.