Page 1 of 1
CSSmenu + Google Map = trouble!
Posted: Sat Sep 17, 2005 6:02 pm
by 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!
Re: CSSmenu + Google Map = trouble!
Posted: Sat Sep 17, 2005 6:40 pm
by Ted
You wouldn't happen to have this open to the outside so we can see, do you? thanks
Re: CSSmenu + Google Map = trouble!
Posted: Sat Sep 17, 2005 6:53 pm
by martin42
http://imbatest.net42.co.uk and click on "Where To Ride" / "Challenge Trails Map"
Thanks Wishy!
Re: CSSmenu + Google Map = trouble!
Posted: Sat Sep 17, 2005 7:58 pm
by Ted
Any of you javascript/css types have any clue on this one? I'm kind of stumped.
Re: CSSmenu + Google Map = trouble!
Posted: Sat Sep 17, 2005 8:24 pm
by Greg
Re: CSSmenu + Google Map = trouble!
Posted: Sat Sep 17, 2005 9:34 pm
by 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.
Re: CSSmenu + Google Map = trouble!
Posted: Sat Sep 17, 2005 10:21 pm
by 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
Re: CSSmenu + Google Map = trouble!
Posted: Sun Sep 18, 2005 4:34 am
by martin42
That looks great - nice to avoid absolute positioning! I'll give it a try this afternoon.