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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Themes /

Discuss SilverStripe Themes.

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

Menu issue when creating a theme


Go to End


3 Posts   1709 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, 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!

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