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


Go to End
Reply


3 Posts   1129 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, 5514 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