Simple CSS and JS menu

**moisea** · 12-19-2006, 02:18 AM

hello, i am having a problem with adapting this menu http://tutorials.alsacreations.com/m...menus/vd1.htm# to my needs.
first of, i would like to have each menu section to be able to have a hover color (lets say white ) as on the "menu" section and secondly have a different hover color on the sub-menus.
i've tried on css without success or maybe it is something related to JS which, i must admit, am not great at it. Hence, i am asking on any type of help in order to achieve what i am looking for.
many thanks.

**thetestingsite** · 12-19-2006, 02:35 AM

Take a look at this page and tell me if thats sort of what you are looking for. Below is the code for the menus on the above link. Hopefully you can tell where I added/edited the CSS. If not, let me know and I'll explain it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Vertical expanding menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
/* CSS from toturials of www.alsacreations.com/articles */
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

#menu dt a:hover {
background: #fff;
}

#menu li a:hover {
background: #ff0000;
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
-->
</style>
</head>

<body>

<dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
			
		<dt onclick="javascript:montre('smenu2');"><a href="#">Menu 2</a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sub Menu 2.1</a></li>
					<li><a href="#">Sub Menu 2.2</a></li>

					<li><a href="#">Sub Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');"><a href="#">Menu 3</a></dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sub Menu 3.1</a></li>
					<li><a href="#">Sub Menu 3.1</a></li>

					<li><a href="#">Sub Menu 3.1</a></li>
					<li><a href="#">Sub Menu 3.1</a></li>
					<li><a href="#">Sub Menu 3.1</a></li>
					<li><a href="#">Sub Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu4');"><a href="#">Menu 4</a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sub Menu 4.1</a></li>
					<li><a href="#">Sub Menu 4.1</a></li>
				</ul>
			</dd>

	
</dl>

<div class="mentions">Rapha&#235;l GOETTER<br />
  <a href="http://www.alsacreations.com">Alsacr&#233;ations</a><br />
  <a href="http://tutorials.alsacreations.com/deroulant/">Explanations</a></div>

</body>
</html>

Hope this helps.

**moisea** · 12-19-2006, 02:54 AM

thanks thetestingsite for your reply, this is exactely what i am looking for.
i believe the change you made are the following:

Code:

#menu dt a:hover {
background: #fff;
}

#menu li a:hover {
background: #ff0000;
}

if i am right, but, i do get the sunmenus hover color but i do get the white hover on the home menu only and not on rest. i probably must be doing something wrong, still looking though...
Many thanks for your reply. still open to suggestion...

**thetestingsite** · 12-19-2006, 03:06 AM

One other thing I added was in the menus themselves. I added an anchor in the menus like this:

Code:

<dt onclick="javascript:montre('smenu3');"><a href="#">Menu 3</a></dt>

**moisea** · 12-19-2006, 03:13 AM

got it, many thanks again! i didn't notice earlier on the Home menu section.
great job, very helpful.

**moisea** · 12-19-2006, 03:39 PM

hi thetestingsite, i have it working on IE and FF but on Opera, i do get flickers. the menu expands and contracts rapidely to its original place. it also shakes the site.
any idea how to fix this?
many thanks.

**linzi007** · 12-19-2006, 04:14 PM

hi, have you tried adding font color to the following

#menu li a:hover, #menu dt a:hover {
background: #eee;
color: #ffffff;
}

**moisea** · 12-19-2006, 09:05 PM

thanks Linzi i tried without success.

**moisea** · 12-28-2006, 06:15 PM

Hello, me again....
i tested the menu on opera but i do not get my submenus expanded. The menu just rapidely expands and then re-contracts immediately after, hence no chance to see the submenus.
many thanks.

Thread: Simple CSS and JS menu

Thread Tools

Search Thread

Simple CSS and JS menu

Bookmarks

Bookmarks

Posting Permissions