CSSmenu + Google Map = trouble!

[martin42]

Has anyone got CSSmenu working with Google Maps?  (CMSMS 0.11-beta)

Problem is the GoogleMap that when you mouse over the menu, you can see the drop-down sub-menus getting drawn underneath the map! Hopefully just a silly mistake in my code, but I can't see it!

[Ted]

You wouldn't happen to have this open to the outside so we can see, do you?  thanks

[martin42]

http://imbatest.net42.co.uk and click on "Where To Ride" / "Challenge Trails Map"

Thanks Wishy!

[Ted]

Any of you javascript/css types have any clue on this one?  I'm kind of stumped.

[Greg]

This info might help http://www.experts-exchange.com/Web/Web ... 74319.html

[martin42]

Thanks for pointing me in the right direction Greg

The good news, is that you just set the "z-order" in the styles of the DIVs containing the Map and the Menu.  You need the menu bar to have a bigger z-order number so that the drop-downs come out on-top, not underneath.

The bad news, is that CSS z-order is implemented (in all browsers I tried) only for layouts that use *absolute* positioning.  This is a bit of a blow!  Still, I can stick with relative positioning for all pages other than the Google Maps page, so that any layout mess is limited to that one page.

I'm reading a book at the moment called "Stylin' With CSS".  Quite a nice read but I can see that I'll need to read it from cover to cover in order to get the absolute positioning spot-on in all browsers.  There is no standard default style-sheet, so for cross-browser consistency you need to specify every single parameter: I'll have to read up on how to do that.

[Greg]

I modified CSSMenu.js  to the following:

Code: Select all

function IEHoverPseudo() {
	if (document.getElementById("primary-nav-vert") != null) {
		var navItems = document.getElementById("primary-nav-vert").getElementsByTagName("li");
        var select1 = document.getElementById("select1");
		
		for (var i=0; i<navItems.length; i++) {
			if(navItems[i].className == "menuparent") {
				navItems[i].onmouseover=function() { this.className += " over"; select1.style.visibility = "hidden"; }
				navItems[i].onmouseout=function() { this.className = "menuparent"; select1.style.visibility = ="visible"; }
			}
		}
	}
	if (document.getElementById("primary-nav-horiz") != null) {
		var navItems = document.getElementById("primary-nav-horiz").getElementsByTagName("li");
		var select1 = document.getElementById("select1");
        
		for (var i=0; i<navItems.length; i++) {
			if(navItems[i].className == "menuparent") {
				navItems[i].onmouseover=function() { this.className += " over"; select1.style.visibility = "hidden"; }
				navItems[i].onmouseout=function() { this.className = "menuparent"; select1.style.visibility = ="visible"; }
			}
		}
	}
}
window.onload = IEHoverPseudo;

Then in the page I gave an element the id="select1" now when I mouseover the menu the element with the id 'select1' disappears. re-appears on mouseout.

Try using this modification on your CSSMenu.js and then wrap a div around your google map with an id="select1"

Works in IE and FF

[martin42]

That looks great - nice to avoid absolute positioning!  I'll give it a try this afternoon.