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

Menu issue when creating a theme


Reply


3 Posts   1110 Views

Avatar
asosaa

Community Member, 1 Post

8 December 2009 at 2:42pm

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.

Avatar
Willr

Forum Moderator, 5513 Posts

8 December 2009 at 8:25pm

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!

Avatar
me.yay

Community Member, 14 Posts

22 December 2009 at 9:13pm

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