Is there any way to retain the bgcolor of a menu tab after you mouse out?

**stevemtno** · 12-08-2008, 11:01 PM

Is there any way using CSS to retain the background color of a menu tab after you move your mouse to the secondary menu? Is there a web state that corresponds to this?

I'm working on a new 2-level menu for our website and this has been a problem. I tried changing the javascript code, which took care of the problem, but it also incorporated a lot of the CSS into it, giving us less control over things (plus I'm more comfortable and/or familiar with CSS).

Here's a link to the test page:
http://newsroom2.stltoday.com/stltod...6?OpenDocument

I would also be open to adding (but not replacing) the existing JS code.

Any help, suggestions, etc would be appreciated... thanks!

Steve

**Snookerman** · 12-08-2008, 11:35 PM

I don't know how your menu works so I don't know if this is possible, but if the subnavs were inside the list of primary menus, then the code would be quite simple:

Code:

ul#stlprimary li:hover {
	background-color:#900;
	color: #fff;
}

Menu would roughly look like this:

HTML Code:

<ul id="stlprimary">
  <li><a href="#">Main</a>
    <ul id="stlsubnav">
      <li><a href="#">Sub</a></li>
    </ul>
  </li>
</ul>

Then hovering over the subnavs would be like hovering over the primary, since the subnavs would be inside the primary. Then you could assign the subnavs their own hover colors.

If it's not possible with your code to put the subnavs inside the primary list items, then I think you'll have to use javasript for this.

**stevemtno** · 12-09-2008, 05:19 PM

Troed putting the submenu UL's inside the primary LI's like you suggested, but no luck. I don't think I can get away from the JS completely.

Thanks for the suggestion tho...

Steve

**Snookerman** · 12-09-2008, 06:22 PM

I used this menu on Dynamic Drive:

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

and rewrote the css so it would do what you wanted it to do. It has multiple levels of submenus and when you hover over the submenus, all the parent menus are highlighted. You could either use this menu for your site or rewrite the one you have now. The point is, there is a pretty simple way to do what you want, using only css, no JavaScript. The css code looks like this:

Code:

.jqueryslidemenu ul li:hover > a {
	background:#0099FF;
	color:#FF9966;
}

Here are the files, the only thing I changed was the css file:
Attachment 2301 (remove the .txt suffix or make your own page using the instructions from DD in the link above)
Attachment 2302 (css file that I change a bit, most important code in the beginning)
Attachment 2303 (same .js from DD, no changes made)

**stevemtno** · 12-09-2008, 06:51 PM

Hey Snookerman,

Thanks for the code. This is a pretty slick menu!

It doesn't do quite what I need, but probably could. It acts differently in IE & FF tho.

I need the subnav to display horizontally below the primary nav. In IE, the sub nav displays vertically instead of horizontally. In FF the subnav appears horizontally, but it's between the primary nav items.

The subnav (one of them) should be below the primary all the time.

Steve

**Snookerman** · 12-09-2008, 07:03 PM

The one I posted acts the same in both browsers, so I assume you are talking about the modified code. Could you please post a link to the site where you have the code, or attach you code?

**stevemtno** · 12-09-2008, 07:06 PM

Originally Posted by Snookerman

The one I posted acts the same in both browsers, so I assume you are talking about the modified code. Could you please post a link to the site where you have the code, or attach you code?

I guess that might help...

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="jqueryslidemenu.js"></script>
</head>
<body>
<div id="myslidemenu" class="jqueryslidemenu">
  <ul>
     <li id="stlnav-home"><a href="http://www.stltoday.com/">Home</a></li>
      <ul>
		<li><a href="http://www.stltoday.com/weather">Weather</a></li>
		<li><a href="http://www.stltoday.com/obits">Obituaries</a></li>
		<li><a href="http://www.post4trafficonline.com">Traffic</a></li>
		<li><a href="http://www.stltoday.com/entertainment/casinos">Lottery</a></li>		
		<li><a href="http://www.stltoday.com/todayspd">Today's P-D</a></li>
		<li><a href="http://www.stltoday.com/help/archives/simplesearch">Archive</a></li>
		<li><a href="http://www.stltoday.com/news/infozone">STL Info</a></li>
		<li><a href="http://www.stltoday.com/sitemap">Site Map</a></li>
		<li><a href="http://www.stltoday.com/help/subscriber-services">Subscribe</a></li>
		<li><a href="http://www.stltoday.com/rss">RSS</a></li>		
		<li><a href="http://www.stltoday.com/newsletters">Newsletters</a></li>
		<li class="lastLi"><a href="http://www.stltoday.com/contests">Contests</a></li>
	</ul>
    </li>
    <li id="stlnav-news"><a href="http://www.stltoday.com/news">News</a></li>
      <ul>
		<li><a href="http://www.stltoday.com/news/city-county">Metro</a></li>
		<li><a href="http://www.stltoday.com/news/illinois-news">Illinois</a></li>
		<li><a href="http://www.stltoday.com/news/stcharles">St. Charles</a></li>
		<li><a href="http://www.stltoday.com/obits">Obituaries</a></li>
		<li><a href="http://www.stltoday.com/news/nation">Nation/World</a></li>
		<li><a href="http://www.stltoday.com/news/politics">Politics</a></li>
		<li><a href="http://www.stltoday.com/news/science">Science</a></li>
		<li><a href="http://www.stltoday.com/news/law">Crime</a></li>
		<li><a href="http://www.stltoday.com/news/education">Education</a></li>
		<li><a href="http://www.stltoday.com/news/religion">Religion</a></li>
		<li><a href="http://www.stltoday.com/news/infozone">STL Info</a></li>
		<li><a href="http://www.stltoday.com/columnists#news">Columns</a></li>
		<li><a href="http://www.stltoday.com/blogzone/news">Blogs</a></li>
		<li class="lastLi"><a href="http://www.stltoday.com/forums/index.php?c=3">Forums</a></li>
	  </ul>
    </li>
    <li id="stlnav-opinion"><a href="http://www.stltoday.com/interact">Opinion</a></li>
      <ul>
		<li><a href="http://www.stltoday.com/news/editorial">Editorials</a></li>
		<li><a href="http://www.stltoday.com/blogzone/letters-to-the-editor/">Letters</a></li>
		<li><a href="http://stltoday.mycapture.com/mycapture/category.asp?CategoryID=25906">Cartoons</a></li>
		<li><a href="http://www.stltoday.com/newsletters">Newsletters</a></li>
		<li><a href="http://my.stltoday.com">MySTLToday</a></li>
		<li><a href="http://www.stltoday.com/columnists">Columns</a></li>
		<li><a href="http://www.stltoday.com/blogzone">Blogs</a></li>
		<li><a href="http://www.stltoday.com/forums">Forums</a></li>
		<li class="lastLi"><a href="http://www.stltoday.com/discussions">Discussions</a></li>
	  </ul>
    </li>
  </ul>
  <br style="clear: left" />
</div>
</body>
</html>

**Snookerman** · 12-09-2008, 07:38 PM

I see you have an error in the code:

Code:

<div id="myslidemenu" class="jqueryslidemenu">
  <ul>
     <li id="stlnav-home"><a href="http://www.stltoday.com/">Home</a></li>
      <ul>
		<li><a href="http://www.stltoday.com/weather">Weather</a></li>
		<li><a href="http://www.stltoday.com/obits">Obituaries</a></li>
		<li><a href="http://www.post4trafficonline.com">Traffic</a></li>
		<li><a href="http://www.stltoday.com/entertainment/casinos">Lottery</a></li>		
		<li><a href="http://www.stltoday.com/todayspd">Today's P-D</a></li>
		<li><a href="http://www.stltoday.com/help/archives/simplesearch">Archive</a></li>
		<li><a href="http://www.stltoday.com/news/infozone">STL Info</a></li>
		<li><a href="http://www.stltoday.com/sitemap">Site Map</a></li>
		<li><a href="http://www.stltoday.com/help/subscriber-services">Subscribe</a></li>
		<li><a href="http://www.stltoday.com/rss">RSS</a></li>		
		<li><a href="http://www.stltoday.com/newsletters">Newsletters</a></li>
		<li class="lastLi"><a href="http://www.stltoday.com/contests">Contests</a></li>
	</ul>
    </li>
    <li id="stlnav-news"><a href="http://www.stltoday.com/news">News</a></li>
      <ul>
		<li><a href="http://www.stltoday.com/news/city-county">Metro</a></li>
		<li><a href="http://www.stltoday.com/news/illinois-news">Illinois</a></li>
		<li><a href="http://www.stltoday.com/news/stcharles">St. Charles</a></li>
		<li><a href="http://www.stltoday.com/obits">Obituaries</a></li>
		<li><a href="http://www.stltoday.com/news/nation">Nation/World</a></li>
		<li><a href="http://www.stltoday.com/news/politics">Politics</a></li>
		<li><a href="http://www.stltoday.com/news/science">Science</a></li>
		<li><a href="http://www.stltoday.com/news/law">Crime</a></li>
		<li><a href="http://www.stltoday.com/news/education">Education</a></li>
		<li><a href="http://www.stltoday.com/news/religion">Religion</a></li>
		<li><a href="http://www.stltoday.com/news/infozone">STL Info</a></li>
		<li><a href="http://www.stltoday.com/columnists#news">Columns</a></li>
		<li><a href="http://www.stltoday.com/blogzone/news">Blogs</a></li>
		<li class="lastLi"><a href="http://www.stltoday.com/forums/index.php?c=3">Forums</a></li>
	  </ul>
    </li>
    <li id="stlnav-opinion"><a href="http://www.stltoday.com/interact">Opinion</a></li>
      <ul>
		<li><a href="http://www.stltoday.com/news/editorial">Editorials</a></li>
		<li><a href="http://www.stltoday.com/blogzone/letters-to-the-editor/">Letters</a></li>
		<li><a href="http://stltoday.mycapture.com/mycapture/category.asp?CategoryID=25906">Cartoons</a></li>
		<li><a href="http://www.stltoday.com/newsletters">Newsletters</a></li>
		<li><a href="http://my.stltoday.com">MySTLToday</a></li>
		<li><a href="http://www.stltoday.com/columnists">Columns</a></li>
		<li><a href="http://www.stltoday.com/blogzone">Blogs</a></li>
		<li><a href="http://www.stltoday.com/forums">Forums</a></li>
		<li class="lastLi"><a href="http://www.stltoday.com/discussions">Discussions</a></li>
	  </ul>
    </li>
  </ul>
  <br style="clear: left" />
</div>

As you can see, you are closing the lists twice. This is a common mistake, all you need to do is remove the red parts.

**stevemtno** · 12-09-2008, 07:41 PM

That makes it work in FF (thanks), but the subnavs still come in vertically rther than horizontally.

**Snookerman** · 12-10-2008, 12:17 PM

I suggest you go to the Dynamic Drive scripts help forum and post a thread there with your request, maybe DDAdmin or someone else will help you out with that. You should also look around through the old threads in case someone has already figured this out.

Thread: Is there any way to retain the bgcolor of a menu tab after you mouse out?

Thread Tools

Search Thread

Is there any way to retain the bgcolor of a menu tab after you mouse out?

Bookmarks

Bookmarks

Posting Permissions