1268 Posts in 351 Topics by 486 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 920 Views |
-
Menu issue when creating a theme
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 ofpossibly won't work, so which could the best method to accomplish a menu that's as functional as the one the HTML has??<% if Menu(1) %> <ul><% control Menu(1) %>...
Thanks for reading this,
Alan S. -
Re: Menu issue when creating a theme
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!
-
Re: Menu issue when creating a theme
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
| 920 Views | ||
|
Page:
1
|
Go to Top |
