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, Ed, biapar, Willr, Ingo, swaiba

Menu issue when creating a theme

Go to End

3 Posts   1362 Views


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>

The issue is that her's the way I wrote the CSS, it's made with sprites technique:
			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{
					width: 120px;
					background-position: -286px 0;
					ul#menu li{
						background-position: -286px -44px;
				ul#menu li{
					width: 144px;
					background-position: -406px 0;
					ul#menu li{
						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.


Forum Moderator, 5523 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!


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.


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


#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