[solved] Two menu items appear selected even when not hovered over --thanks!

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
SMSS
New Member
New Member
Posts: 4
Joined: Fri Jan 12, 2007 1:52 am

[solved] Two menu items appear selected even when not hovered over --thanks!

Post by SMSS »

Hi!--

I have two fourth-level menu items (and their fifth-level children) that appear to be "stuck down" when hovering over their 2nd level parent or 3rd level parent.  When I view the source code for the menu items, the HTML code looks correct.

I have created some other fourth-level menu item pages in other sections, and the same thing happens.

The problem happens in both Firefox and IE 7.

I have seen something similar caused by a glitch in the back-end of the database when creating pages.  I've had two pages that accidentally got the same hierarchy number (like 2.2 was assigned to both), so both appeared "clicked" or "selected."  To fix that, I think I just changed one of the sets of numbers wherever it appeared in the database to the next available number in the hierarchy.  (Using phpMyAdmin).  Or I deleted the pages and recreated them... now I'm not sure.  But the hierarchy numbers on these menu items are different, so that isn't the problem here (but I wanted to post that information iin case it helps someone with a similar problem). 

We're using CMSMS 1.0.2, and I really didn't modify the standard menu templates all that much.  I took out the arrows, and I think that was about it.  We have horizontal menus.  (The top level is horizontal).

Could this be a bug in the javascript for CSSMenu.jss where some regular expression that decides what is hovered over somehow doesn't limit the hierarchy numbers correctly (so, when 1.1.1 is moused-over, 1.1.1 and 1.1.1.x and 1.1.1.1.x are all treated the same incorrectly)?  If so, does anyone know how to fix the problem?

I think the relevant code is below.  The page is http://www.scriptwritersnetwork.org/ (but I may take those elements out so the site doesn't look too bad for too long).  Mouse over "Programs" and then "Events" to see the incorrect effect.

Thanks for your help! 

--Shaene

Shaene M. Siders
Volunteer
The Scriptwriters Network Foundation, Inc.

Here is the CSSMenu.jss 

Code: Select all

// Javascript for the CMS CSS Menu Module
// Copyright (c) 2005 Alexander Endresen
// Released under General Public Licence
// This script will emulate the css :hover effect on the menu elements in IE

// The variables
var cssid = "primary-nav"; // CSS ID for the menuwrapper
var menuadd = "h";  // Character to be added to the specific classes upon hovering. So for example, if this is set to "h", class "menuparent" will become "menuparenth" when hovered over.
var menuh = "menuh"; // Classname for hovering over all other menu items

if (window.attachEvent) window.attachEvent("onload", cssHover);

function cssHover() {
	var sfEls = document.getElementById(cssid).getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {

		sfEls[i].onmouseover=function() {
			if (this.className != "") {
				this.className = this.className + menuadd;
			}
			else {	
				this.className = menuh;
			}
		}

		sfEls[i].onmouseout=function() {
			if (this.className == menuh) {
				this.className = "";
			}
			else {
				this.className = this.className.replace(new RegExp(menuadd + "$"), "");
			}
		}
	}
}

Here is the partial menu source code, which looks correct.  The fourth and fifth level items are the ones that keep becoming active even if they're not.

Code: Select all

	<li class="menuparent"><a class="menuparent" 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=outreach-programs" ><dfn>3: </dfn>Programs</a>


	<ul>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=outreach-programs" ><dfn>3.1: </dfn>Programs</a>

</li>
	<li class="menuparent"><a class="menuparent" 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=events" ><dfn>3.2: </dfn>Events</a>


	<ul>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=events" ><dfn>3.2.1: </dfn>Upcoming Events</a>

</li>
	<li class="menuparent"><a class="menuparent" 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=meeting-highlights" ><dfn>3.2.3: </dfn>Event Summaries</a>


	<ul>
	<li class="menuparent"><a class="menuparent" 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=2007-event-summaries" ><dfn>3.2.3.2: </dfn>2007</a>


	<ul>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=ray-bradbury" ><dfn>3.2.3.2.1: </dfn>Ray Bradbury - 2/10/07</a>

</li>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=development-executives-panel" ><dfn>3.2.3.2.2: </dfn>Development Executives Panel - 5/12/07</a>

</li>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=tracy-friedman" ><dfn>3.2.3.2.3: </dfn>Tracy Friedman - 5/19/07</a>

</li>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=jason-clark" ><dfn>3.2.3.2.4: </dfn>Jason Clark - 6/9/07</a>

</li>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=nicole-berger" ><dfn>3.2.3.2.5: </dfn>Nicole Berger - 6/16/07</a>

</li>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=irisyamashita" ><dfn>3.2.3.2.6: </dfn>Iris Yamashita - 8/11/07</a>

</li>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=steve-kaire" ><dfn>3.2.3.2.7: </dfn>Steve Kaire - 8/18/07</a>


	</li></ul>
	</li>
	<li class="menuparent"><a class="menuparent" 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=2008-2" ><dfn>3.2.3.3: </dfn>2008</a>


	<ul>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=dara-marks" ><dfn>3.2.3.3.1: </dfn>Dara Marks - 5/17/08</a>


	</li></ul></li></ul>
	</li>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=past-events" ><dfn>3.2.4: </dfn>Past Events List</a>

</li>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=speaker-series-maps-to-raleigh-studios" ><dfn>3.2.5: </dfn>Speaker Series:  Raleigh Studios Location</a>

</li>
	<li><a 
href="http://www.scriptwritersnetwork.org/swn/index.php?page=seminar-series-cbs-radford-studios-location" ><dfn>3.2.6: </dfn>Seminar Series:  CBS Studio Center Location</a>


	</li></ul>
Last edited by SMSS on Sun Jul 13, 2008 11:39 pm, edited 1 time in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Two menu items appear selected even when not hovered over

Post by Dr.CSS »

Actually the CSSmenu.js has nothing to do with Firefox or IE7 as they both understand the hover effect on things other than a, the menu can be 10 levels deep as long as you keep giving it the CSS calls for it...

The default is set for 3 levels...

1. page
1.2 page
1.3 page
to add more...
1.4 page
you need to change the CSS...

You need to look at the CSS near the bottom is...

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level

*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
  display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level

*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
  display: block;
}

Anything with an h or menuh is for IE6 as the JS adds this for it, from the JS...

// The variables
var cssid = "primary-nav"; // CSS ID for the menuwrapper   
var menuadd = "h";  // Character to be added to the specific classes upon hovering. So for example, if this is set to "h", class "menuparent" will become "menuparenth" when hovered over.
var menuh = "menuh"; // Classname for hovering over all other menu items

This should say the ID for the ul, if you change the ID of this in the menu template it won't work you have to change the JS also
SMSS
New Member
New Member
Posts: 4
Joined: Fri Jan 12, 2007 1:52 am

Re: Two menu items appear selected even when not hovered over

Post by SMSS »

Wow, now I feel silly.  :)  Thanks, Mark, for catching that.  I know I've seen that somewhere before.

Oddly enough, though, it's now working in IE but not in FireFox.  I guessed at how to do level five (just added extra uls), so maybe I did it wrong.  Any suggestions on the weird behavior?  (It's still doing the "both are selected" in Firefox, and I closed and re-opened Firefox.  And at one point the entire menu set wasn't pulling down in FireFox, and then I started from scratch and then the menus would pull down, but the same problem reappeared, so I don't think it's a refresh issue).

/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul ul
{
  display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul,
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
#primary-nav ul ul ul ul li:hover ul,
#primary-nav ul ul ul ul li.menuparenth ul
{
  display: block;
}

Thanks again!

--Shaene

Shaene M. Siders
Volunteer
The Scriptwriters Network Foundation, Inc.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Two menu items appear selected even when not hovered over

Post by Dr.CSS »

Just keep adding them...

#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
#primary-nav li:hover ul ul ul,
#primary-nav li.menuparenth ul ul ul ul,
#primary-nav li:hover ul ul ul ul,
#primary-nav li.menuparenth ul ul ul ul ul

{
  display: none;
}

Don't forget the , between them but not on the last one...
SMSS
New Member
New Member
Posts: 4
Joined: Fri Jan 12, 2007 1:52 am

Re: Two menu items appear selected even when not hovered over

Post by SMSS »

Whoa, now I feel doubly silly!  I guess I didn't expect IE to work fine but Firefox to need an additional level...

That worked great!

Thank you, thank you, thank you for the lightning-fast help both times! 

I set up this site for a non-profit organization, and everyone who helps with the organization is a volunteer.  I usually spend hours troubleshooting these things, which is fun, but unfortunately every minute I spend troubleshooting is another minute I don't have to help with the "cool" stuff they want me to implement in my "spare time."  :)  Thanks for saving my sanity!

Thanks a ton!--

--Shaene

Shaene M. Siders
Volunteer
The Scriptwriters Network Foundation, Inc.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: [solved] Two menu items appear selected even when not hovered over --thanks!

Post by Dr.CSS »

Your welcome...

IE is the reason so many sites are coded so badly, it will take most any kind of a mess and just guesses what you wanted and hope it comes out right... ;)
Post Reply

Return to “Layout and Design (CSS & HTML)”