[Solved - Sort of] Custom Menu Images

[Muzzy]

Hi All.

As I mentioned in an earlier post, I am revamping my current CMSMS site and I have written my xhtml and css code.
I am about to start to modify it to contain all the relevant CMSMS tags etc, but I am stuck with my menu.

I have created a very nice graphic menu, but I'm not sure how to include it into the CMSMS. Do I just upload my xhtml and css files in the normal way? Or do I have to add something special to get my menu images to show up?

I have added the code I have written below:

xhtml menu code:

Code: Select all

<div id="menu">
	<ul>
		<li><a href="#" id="menu1" accesskey="1" title="" class="link1 bg2">Home</a></li>
		<li><a href="#" id="menu2" accesskey="2" title="" class="link1 bg3">About</a></li>
		<li><a href="#" id="menu3" accesskey="3" title="" class="link1 bg4">Equipment</a></li>
		<li><a href="#" id="menu4" accesskey="4" title="" class="link1 bg5">Portfolio</a></li>
		<li><a href="#" id="menu5" accesskey="5" title="" class="link1 bg6">Contact</a></li>
	</ul>
</div>

css menu code:

Code: Select all

/** MENU */

#menu {
	width: 778px;
	height: 45px;
	margin: 0px auto;
}

#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	height: 45px;
	padding: 15px 0px 0px 25px;
}

#menu1 { width: 122px; }
#menu2 { width: 135px; }
#menu3 { width: 123px; }
#menu4 { width: 134px; }
#menu5 { width: 139px; }

/** LISTS */

.list1 {
	margin-left: 0px;
	padding-left: 0px;
	list-style: none;
	line-height: 22px;
}

/** BACKGROUND IMAGES FOR MENU & HEADER */

.bg1 { background: url(images/homepage02.jpg) no-repeat left top; }
.bg2 { background: url(images/homepage04.jpg) no-repeat left top; }
.bg3 { background: url(images/homepage05.jpg) no-repeat left top; }
.bg4 { background: url(images/homepage06.jpg) no-repeat left top; }
.bg5 { background: url(images/homepage07.jpg) no-repeat left top; }
.bg6 { background: url(images/homepage08.jpg) no-repeat left top; }
.bg7 { background: url(images/homepage09.gif) no-repeat left top; }
.bg8 { background: url(images/homepage14.gif) repeat-x left top; }
.bg9 { background: url(images/homepage16.gif) repeat-y left top; }

Thanks.
Mike.

[javathunderbird]

Hi,
  Here's my trick to do a image menu, let me just briefly describe it.
  Each page in CMS Made Simple has an alias name, for example, "home","contact","about"...
  I then create the corresponding 3-state menu images for them, for example, home_on.gif, home_normal.gif,home_hover.gif .
  on is the looks of the menu item when this menu item is the current page
  normal is the normal looks of the menu item
  hover is the looks of the menu item when mouse hover on it
  Hope this give you a little hints...

With my best,
Jim

[KO]

You might want to modify the menu template you are using to do that trick Jim explained. So that you menu template gives those tags id="pagealias".

br, Keijo

[cyberman]

I have created a very nice graphic menu, but I'm not sure how to include it into the CMSMS.

Have you read this?

http://themes.cmsmadesimple.org/Image_menu.html

[Muzzy]

Hi Everyone.

Great suggestions, but I think Cyberman has hit it more spot on with what I'm trying to do.

I had briefly read the info a while ago, but it seemed so complicated then. Looking at it again, I think I might be able to work it out - I hope. As you can see from my initial post of my code, there are 5 background images involved with no roll-over effects at all.

Once again, thanks guys. I'll give it a go as soon as possible.
Mike.