PDA

View Full Version : 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/modelesmenus/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 (http://thetestingsite.net/test/menus.html) 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.



<!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:

#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:



<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.