Porting my menu across to CMSMS

[laits]

Hi All,

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' */

Rich

[Dr.CSS]

Your over doing it, I would slice one of those stacks of 3 out cut it down to 2 as the bottom one is just a repeat, take the text out of it and use real text for menu items and just use static, hover and active for the 3 looks...

The text isn't exactly in the vertical middle but...

http://dezertdesign.com/new3/index.php

[laits]

I think I probably am, menu's are a real thorn in the side for me.
Are you using a standard menu manager template for this?

Is there anything that can be done about the vertical positioning?


Many Thanks

Rich

[Dr.CSS]

that is a default menu manager template, if you customize it to include the page alias as a class on the a or li you can tweak the padding to make them line up how you want...