Welcome to WebmasterWorld Guest from 54.221.9.6

Forum Moderators: open

Message Too Old, No Replies

active menu state - dropdown

making a parent button stay active while dropdown is...

     
11:33 am on Feb 15, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 17, 2004
posts:51
votes: 0


hello, hello.

This is something I can never get... a pesky dab of javascript will fix me I think but I can't solve it. My issue (I think) is that the suckerfish dropdown that this menu is based on triggers the js for IE, so what do I do for FF where it's just an element: hover state?

my intention is to get the 'active' or 'parent' tab for the dropdown menus to stay the same rollover color while the dropdown menus are visible. Right now you only get the rollover state while actually on the button, not on the whole dropdown menu as it should be.

This is quite a common effect, so I hope my explanation is clear enough. Thanks for any advice!

***PS. I can't attach a zip. so the bg images will not show, hopefully this won't mess it up too bad.

11:33 am on Feb 15, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 17, 2004
posts:51
votes: 0


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Courier Mail navigation</title>
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav-list");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//->
</script>

<style type="text/css">
/* temp */
body { margin: 0px; }
/* // temp */

/* 1st tier menu */
#nav-wrap {
height: 24px;
background: transparent url(images/bg-top-tier-nav.gif) repeat-x 0 0;
}
#nav-wrap ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav-wrap ul li {
position: relative;
float: left;
display: block;
_width: 1%;
}
#nav-wrap li a {
display: block;
text-decoration: none;
color: #fff;
height: 24px;
padding: 0 8px;
font: bold 11px verdana, san-serif;
line-height: 21px;
_line-height: 20px;
}
#nav-wrap li a:hover {
color: #656565;
background: transparent url(images/bg-hover-tab-nav.gif) repeat-x 0 0;
}
#nav-wrap li a.active {
color: #1b73a4;
background: #d9e8ef url(images/bg-active-tab-nav.gif) repeat-x 0 0!important;
}
/* fix ie hide from ie mac \*/
* html #nav-wrap ul li { float: left; }
* html #nav-wrap ul li a { height: 24px; }
/* fix ie end */

#nav-wrap li:hover ul, li.over ul { display: block; }

/* 1st tier drop-down menus */
ul.drop-menu {
position: absolute;
left: 0;
top: 22px;
display: none;
}
#nav-wrap li ul.drop-menu li a { height: 20px; }
#nav-wrap li ul a {
background: #eee;
width: 120px;
height: 18px;
color: #1b73a4;
border: 1px solid #d3d3d3;
border-width: 0 1px 1px 1px;
}
#nav-wrap li ul a:hover { background: #ecf5f9; }

/* 2nd tier section menu */
#nav-sub-wrap {
display: block;
margin: 0;
padding: 0;
height: 22px;
background: #d9e8ef url(images/bg-dotted-line.gif) repeat-x 0 100%;
}
#nav-sub-wrap ul {
margin: 0;
padding: 0;
width: 998px;
list-style: none;
}
#nav-sub-wrap li {
float: left;
color: #1b73a4;
font: normal 11px tahoma, san-serif;
line-height: 21px;
_line-height: 21px;
}
#nav-sub-wrap li a {
display: block;
padding: 0 8px;
color: #1b73a4;
text-decoration: none;
}
#nav-sub-wrap li a.active { font-weight: bold; }
#nav-sub-wrap li a:hover { background: #ecf5f9; }
</style>
</head>

<body>
<div style="width: 998px;">

<div id="nav-wrap">
<ul id="nav-list">
<li><a href="#" class="active">Main</a></li>
<li><a href="#">Main</a>
<ul class="drop-menu">
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
</ul>
</li>
<li><a href="#">Main</a>
<ul class="drop-menu">
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
</ul>
<li><a href="#">Main</a></li>
<li><a href="#">Main</a>
<ul class="drop-menu">
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
</ul>
<li><a href="#">Main</a>
<ul class="drop-menu">
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
<li><a href="#">Sub-menu item</a></li>
</ul>
</li>
<li><a href="#">Main</a></li>
<li><a href="#">Main</a></li>
<li><a href="#">Main</a></li>
<li><a href="#">Main</a></li>
<li><a href="#">Main</a></li>
</ul>
</div>

<div id="nav-sub-wrap">
<ul>
<li><a href="#">second level</a></li>
<li><a href="#">second level</a></li>
<li><a href="#">second level</a></li>
<li><a href="#">second level</a></li>
<li><a href="#" class="active">second level</a></li>
<li><a href="#">second level</a></li>
<li><a href="#">second level</a></li>
<li><a href="#">second level</a></li>
</ul>
</div>

</div>
</body>
</html>

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members