Log in

View Full Version : Resolved 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/stltoday/pages.nsf/9C2225A4C505CC768625692100045EE4/06F2930BFF669F018625750700571796?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:

ul#stlprimary li:hover {
background-color:#900;
color: #fff;
}
Menu would roughly look like this:

<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/ (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:

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

Here are the files, the only thing I changed was the css file:
2301 (remove the .txt suffix or make your own page using the instructions from DD in the link above)
2302 (css file that I change a bit, most important code in the beginning)
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
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... :)



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

<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 (http://www.dynamicdrive.com/forums/forumdisplay.php?f=2) 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.
stevemtno
12-10-2008, 02:40 PM
Thanks for the reply, Snookerman.

Actually, I found out late yesterday afternoon that one of our blogs/forums programmers may be rewriting the whole thing in ext.js.

I'm not ready to give up yet, but it looks like my efforts (and your help) may just end up being concept only.

Thanks again for all your assistance with this.

Steve
Snookerman
12-11-2008, 02:55 PM
You're welcome and good luck with the site!