Horizontal and Vertical flyout menus - Help!

[wms]

Hi,

I have the latest version installed [1.0.2].

Here is what I've done. 
I've taken the "Top simple navigation + left subnavigation + 1 column" template and I'm calling the "cssmenu.tpl" menu template instead of the "simple_navigation.tpl" menu template.  (I'm doing this because I need a horizontal and vertical flyout menu. I haven't really changed much except for colours.)
I'm using the default stylesheets except, I'm using the "Navigation: CSSMenu - Horizontal" stylesheet instead of the "Navigation: Simple - Horizontal" stylesheet.

Issue
The vertical flyout menu works in Firefox and not I.E. (6.0).

Question
Does anyone have any ideas why this would be?

I hope I've been as descripted enough for someone to fire off some ideas back at me.  I've been racking my brain and I'm at a loss.  I'm not expert at this stuff, so this may be my issue

Thanks,

P.S.  If someone know where I can get a theme that has flyouts for both the top and left nav that would be great.  I could just tweak from there.

[Dr.CSS]

If you look in the template that uses the CSSMenu you'll find in the a call for the IE menu script...
Just a little help for our poor buddy IE...





I have had to alter it to use it twice in the same template, or was that the menu CSS 

[wms]

...hmmm...I have that in my template....any other thoughts

Anything would be appreciated.  I'm at a lose.

Thanks,

[Signex]

if you give us a link we can look at your source code, maybe more people would be able to help then

[wms]

Attach are the files I'm using [again, just did basic stuff to them].

Here is the link to my problem:  http://www.goulbournsoccer.ca/index_bak.php?page=pages-and-navigation
(I'm just using the default data until I get the menu's working, and then I'll port the data over.  There is a live site still, so that's why I'm using "index_bak.php" to play around with for now.)  If you hover over the "Pages and navigation" link on the left_nav in Firefox, you get a flyout, however, in IE you do not.

Thanks for your help,

[gelöscht durch Administrator]

[Dr.CSS]

It may have to do with you using the Navigation: Simple - Vertical menu CSS it's for the default menu that has the pages listed under instead of flying out try the Navigation: CSSMenu - Vertical and take the extra...

          out of the template, with this kind of menu, CSS fly out, these are not needed...

[wms]

Hi Mark,

Ok, I've tried that.

The menus are pretty messed up right now.  Flying out all over the place.  Here's a test URL:  http://www.goulbournsoccer.ca/index_bak ... e=contacts

Any ideas?

[wms]

Calling anyone for help.

I've just spent the last three hours searching the forums and I cannot find anything on using horizontal dropdowns, with vertical flyout menus.

The attached files above are still what I'm using.  If I use the CSS horizontal stylesheet with the simple vertical stylesheet - it works and looks great - except I do not get the vertical flyouts in IE!  I really need this to work because 85% of my website vistors use IE [why I do not konw - but that's they're personal choice ]

Is anyone out there using a menu system like this???????

Any help would be great.

Thanks,

[wms]

ok....still playing with this.

I renamed the cssmenu.tpl file in the /module/MenuManager/templates folder and change the name of the declared classes and id's.  I then changed the classes and id's in the CSS horizontal menu stylesheet to match.  I my template, I call the new menu.tpl for the horizontal menu and the cssmenu.tpl for my sidebar [which is now using the CSS vertical menu].

I got the sidebar menus to flyout in IE 6, but now the top menu will not dropdown......

[Dr.CSS]

You changed the ul id and in the script it looks for it, so maybe you can make a new js for it by changing what it looks for and call it in the ...

// 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.onmouseover=function() {
if (this.className != "") {
this.className = this.className + menuadd;
}
else {
this.className = menuh;
}
}

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

[wms]

I had it going for a minute and then I did something??????????

Maybe when I did a refresh again in IE it caught on that I was getting close so it stop something else from work.



[gelöscht durch Administrator]

[wms]

...and the other files I'm using.

I think I changed something in the gscmenu_horiz.tpl, but everything seems to match?  I don't know....I'm spinning my little hamster wheel and nothing is happening?

test url:  http://www.goulbournsoccer.ca/index_bak.php?page=about


thanks,

[gelöscht durch Administrator]

[wms]

Does anyone have any ideas on why I cannot get vertical flyout menus in IE, but in Firefox, Opera, etc, they work.

Thanks for any help

[wms]

Hi,

If someone can take a look at goulbournsoccer.ca and maybe help figure out why in IE, I do not get the vertical menus to flyout.  I'm using two different scripts to call the top and side menus.

Any help would be great.

Thanks,

[mrk]

If someone can take a look at goulbournsoccer.ca and maybe help figure out why in IE, I do not get the vertical menus to flyout.  I'm using two different scripts to call the top and side menus.

Well first of i was looking at your code and you are going to run into issues first of all in your mark up. you are using the database tmplates for the navigation of both horizontal and verticle. Both use the ID  primary-nav. This is not going to work completely because an ID is only supposed to be used once on a page. This is why you are losing the functionality of these menus.

You will need to go into the MenuManager and create a copy of the cssmenu.tpl

once you have done that go into that template and re-name the ID's for the div and the ul:

Code: Select all

#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>

change them to: (this is just an example you can change them to anything that makes sense to you)

Code: Select all

#vert_menu - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#vert_menu_ul - The id for the <ul>

Then you will address your style sheet to reflect these new ID's in your vertical navigation style sheet.

and finally in Modules>MenuManger>CSSMenu.js
change:

Code: Select all

var cssid = "primary-nav"; // CSS ID for the menuwrapper

to:

Code: Select all

var cssid = "vert_menu"; // CSS ID for the menuwrapper

This might not be the most eloquent solution but it should work.