PDA

View Full Version : Drop Down Menu and a.selected



mikacruz
Jul 21st, 2010, 11:58 AM
Hello,
I thought I would be done with this menu but there is one thing left that I cant figure out. I dont even know if it has to be with the javascript or the css.

I want to use a class for the selected parent menu to apply a particular bg img to it. It works, but when I go down the drop menu for that particular class, the a.selected background image disappears. Thanks for having a look ;)

Here is the link. (http://www.eulconsult.eu/test.html)

Here is the html code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" href="styleb.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!-- Menu déroulant -->
<script type="text/javascript">
menuHover = function(nav) {
var sfEls = document.getElementById(nav).getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("\\s?sfhover\\b"), "");
}
}

var listItem = document.getElementById(nav).getElementsByTagName('ul');
for(var i=0;i<listItem.length;i++) {
listItem[i].onmouseover=function() {
var changeStyle = this.parentNode.getElementsByTagName('a');
changeStyle[0].className+=" active";
}

listItem[i].onmouseout=function() {
var changeStyle = this.parentNode.getElementsByTagName('a');
changeStyle[0].className=this.className.replace(new RegExp("\\s?active\\b"), "");
}
}
}

function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}

addEvent(window, 'load', function () { menuHover('menu'); });

</script>

</head>

<body>
<div id="banner">
<div id="menu_bar">
<ul id="menu">
<li class="men_first"><a class="selected" href="#">Menu 1</a>

<ul>
<li><a class="drop_home" href="#">home page</a></li>
<li><a href="#">about site</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">contact</a></li>
</ul>

</li>
<li class="men_orange"><a href="#">Menu 2</a>

<ul>
<li><a href="#">log in</a></li>
<li><a href="#">post</a></li>
<li><a href="#">register</a></li>
<li><a href="#">offers</a></li>
</ul>

</li>
<li class="men_green"><a href="#">Menu 3</a>

<ul>
<li><a href="#">log in </a></li>
<li><a href="#">register </a></li>
<li><a href="#">post</a></li>
<li><a href="#">upload </a></li>
</ul>

</li>
<li class="men_last"><a href="#">Menu 4</a>

<ul>
<li><a href="#">search</a></li>
<li><a href="#">leave</a></li>
<li><a href="#">all year</a></li>
</ul>

</li>
</ul>
</div>
</div>

</body>
</html>

Here is the css:

@charset "utf-8";
/* CSS Document */

* {margin:0;padding:0;}
li { list-style: none; }
a { text-decoration: none; }


body
{
margin-top: 0px;
font-family: arial, helvetica, clean, sans-serif;
font-size: 13px;
}

#banner{
background: transparent url("images/bg_banner.png") repeat-x;
height:75px;}

#menu_bar
{
float:right;
}



/* MENU */
#menu {margin-right:10px;}


#menu li {
float: left;
display: block;
font-size: 10pt;
padding: 0px 0px 0px 0px;
width:120px;

}


#menu li a {
padding: 4px 0px;
display: block;
font-weight: bold;
text-align:center;
}


#menu a.selected{
background:transparent url("images/bgmen_selected.gif") no-repeat scroll 0 bottom;
}

#menu li.men_green a{height:39px;color: #464545;border-top:1px solid #ededed;border-left:1px solid #ededed;padding-top:27px;}
#menu li.men_orange a{height:39px;color:#464545;border-top:1px solid #ededed;border-left:1px solid #ededed;padding-top:27px;}
#menu li.men_first a{height:42px;color:#919191;border-top:1px solid #ededed;border-left:1px solid #ededed;padding-top:24px;}
#menu li.men_last a{height:42px;color:#919191;border-top:1px solid #ededed;border-left:1px solid #ededed;padding-top:24px;}

#menu li.men_last a:hover, #menu li.men_last a.active, #menu li.men_first a:hover, #menu li.men_first a.active {
color: #919191;
font-weight:bold;
}

#menu li.men_green a:hover, #menu li.men_green a.active {
color: #97B93A;
font-weight:bold;
}

#menu li.men_orange a:hover, #menu li.men_orange a.active {
color: #BD6ACC;
font-weight:bold;
}

#menu li.men_green ul a{height:14px;color:#919191;border:none;padding-top:6px;}
#menu li.men_orange ul a{height:14px;color:#919191;border:none;padding-top:6px;}
#menu li.men_first ul a, #menu li.men_last ul a{height:14px;color:#919191;border:none;padding-top:6px;}

#menu li ul {
left : -999em;
position : absolute;
padding-bottom:18px;
padding-top:0px;
padding-left:0px;
z-index:950;
background:transparent url("images/drop.png") no-repeat scroll 0 bottom;
}

#menu li ul li { float:none; margin-left:6px;}

#menu li ul a {
width : 100px;
padding-left:10px;
font-weight : normal;
padding-bottom:1px;
text-align:left;
color: #919191;
}



#menu li:hover ul, #menu li.sfhover ul {
left: auto;
visibility: visible; /*IE fix for stickiness*/
}

li.men_grey a
{
color: #919191;
}
li.men_black a
{
color: #656565;
}

mikacruz
Jul 21st, 2010, 12:29 PM
resolved,

I didnt know I could use background-image:none;
This way I applied the bg image to the whole menu class and set bg to none to the drop menu of that class:



#menu li.men_first a{height:42px;color:#919191;border-top:1px solid #ededed;border-left:1px solid #ededed;padding-top:24px;
background:transparent url("images/bgmen_selected.gif") no-repeat scroll 0 bottom;}

#menu li.men_first ul a, #menu li.men_last ul a{height:14px;color:#919191;border:none;padding-top:6px;background-image:none;}