I'm a little stuck here and guess this is probably easily solved.
I have a menu, which can be seen in progress at http://www.crashnotsolutions.com/index.php?page=blog.
Now I have fixed first level, and it will stay that way, but i'm totally unsure of how to use "alias" with "node" in a menu template to achieve the active state. In fact I have no idea what i'm doing in the menu.tpl area whatsoever...
The client understands that he can't add first level items, but i'd like him to be able to add second level at will, thus the need for a template otherwise i'd just leave it hard coded. Can anyone help me with building the template for my menu. I'd be happy to document it in the wiki in return, as i feel this menu technique is much sort after.
my menu graphic looks like this:-
my css looks like this:-
Code: Select all
/* Start of CMSMS style sheet 'BAMenu' */
/* MAIN NAVIGATION
--------------------------------------------------- */
.mainNav {
width:658px;
float:left;
height:62px;
}
/* main nav buttons */
.mainNav li.main_nav {
list-style-type:none;
float: left;
}
.mainNav a.nav_button {
background-image:url(uploads/crashnot/MenuSystem.gif);
background-repeat:no-repeat;
background-position: 0px 0px;
height:62px;
display:block;
text-indent:-3000px;
}
/* home */
#home_button {
background-position: 0px 0px;
width:94px;
}
.selected #home_button {
background-position: 0px -124px;
}
#home_button:hover {
background-position: 0px -62px;
}
/* about */
#about_button {
background-position: -94px 0px;
width:94px;
}
.selected #about_button {
background-position: -94px -124px;
}
#about_button:hover {
background-position: -94px -62px;
}
/* services */
#services_button {
background-position: -188px 0px;
width:94px;
}
.selected #services_button {
background-position: -188px -124px;
}
#services_button:hover, #services_button.open {
background-position: -188px -62px;
}
/* news */
#news_button {
background-position: -282px 0px;
width:94px;
}
.selected #news_button {
background-position: -282px -124px;
}
#news_button:hover {
background-position: -282px -62px;
}
/* links */
#links_button {
background-position: -376px 0px;
width:94px;
}
.selected #links_button {
background-position: -376px -124px;
}
#links_button:hover {
background-position: -376px -62px;
}
/* clients */
#clients_button {
background-position: -470px 0px;
width:94px;
}
.selected #clients_button {
background-position: -470px -124px;
}
#clients_button:hover {
background-position: -470px -62px;
}
/* contact */
#contact_button {
background-position: -564px 0px;
width:94px;
}
.selected #contact_button {
background-position: -564px -124px;
}
#contact_button:hover {
background-position: -564px -62px;
}
/* menus */
.mainNav .menuholder {
position:relative;
}
.mainNav .menu {
position:absolute;
color:#666666;
height:auto;
background-color:#FFFFFF;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
border-bottom:solid 1px #ccc;
}
.mainNav .menu ul li {
display:block;
color:#666666;
font-size:11px;
list-style-image:none;
list-style-type:none;
background-image: url(/images/shared/bkrnd_hor_dots_pink.gif);
background-repeat: repeat-x;
background-position: left top;
padding-top:1px;
}
.mainNav .menu ul li a {
height:21px;
padding:9px 11px 0px 11px;
display:block;
font-weight:bold;
}
.mainNav .menu ul li a:hover {
background-color:#f8e7ec;
text-decoration:none;
}
/* oServices */
#services_menuholder {
z-index:1002;
}
#services_menu {
z-index:1002;
display:none;
margin-top:62px;
width:160px;
}
.spacer {
height: 0.01px;
clear: both;
font-size: 0.01px;
line-height: 0.01px;
}
:focus { -moz-outline-style: none; }
/* End of 'BAMenu' */
