Adding Dynamic Menu Ability
| Project: | Navigation |
| Version: | HEAD |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed |
I would like to see Navigation module have the ability to do dynamic HTML drop-down menus.
~~
At this moment, I've modified the Navigation code to add an API call that will be able to call the entire Menu Tree in a way that can be easily styled to generate dynamic menus.
I've included a patch that I ran against the 2004-05-31 (01:21 EDT) CVS version as well as a dynamic.css file for dynamic menus. WARNING: The CSS file needs to be tuned for IE, which I can't easily do since I don't have Windows.
I don't have a neat patch file for xtemplate, but to use the dynamic menu, you would change navigation_display_tabs with navigation_display_fulltabs, then select the dynamic.css as your stylesheet. Right now Navigation Module doesn't have a simple "Select your Menu Style" so I resorted to this method.
Demo site (works on with Mozilla/Konqueror and probably Opera): http://scrapped.mine.nu/
Below is the dynamic.css file (Drupal allows me only one file at a time):
/*
* More elaborate DHTML dropdown menus with
* mostly CSS, and some Javascript for broken IE.
*/
div#tabs {
background-color: #ddd;
height: 3.5em;
}
#tabs ul {
list-style: none;
padding: 0;
margin: 0;
}
#tabs li {
float: left;
position: relative;
cursor: default;
width: 10em;
background-color: #ddd;
margin: 1em;
}
#tabs li li {
margin: 0em;
border: none;
list-style: none;
background-color: white;
}
#tabs li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 12em;
border: solid 1px black;
border-width: 1px 0;
}
/* IE Hack */
#tabs li>ul {
top: auto;
left: auto;
}
#tabs li:hover ul, li.over ul {
display: block;
}
#tabs li li a {
display: block;
font-weight: normal;
padding: 0.2em 10px;
}
#tabs li li a:hover {
padding: 0.2em 5px;
border: 5px solid black;
border-width: 0 5px;
}
div {
clear: left;
}| Attachment | Size |
|---|---|
| navigation_dynamicmenu.patch | 3.95 KB |
#1
I tested with a few browsers, and found it works fine with:
Linux: FireFox, Opera, Mozilla (1.7b), Netscape (7.1)
Max OS X: Safari, Camino
But it doesn't work with:
Linux: Konqueror (v3.1.4)
Windows: Internet Explorer (6)
In both cases where it didn't work, it simply doesn't show any sub-menu-items. This means that none of those sub menus are accessible (unless you duplicate information and enable the menu's block, as you've done on your site).
Also, it looks like you might break normal tabs with your patch, as you remove the class 'tabs' and the id for each set of tabs.
#2
I've fixed IE Issues - but the fix might have side-effects.
Essentially, I followed the model they have at the following web site:
http://www.alistapart.com/articles/dropdowns/
Before they can get working dropdowns on IE, they need to use some Javascript. They also need to attach an ID to the top-level UL element (which, in navigation.module is usually tab-row0).
The problems with the change are:
1) Because you need a
, this might break subsequent menus that use the same code. For example, if you put two menus on your site. I haven't tried this myself.
2) You need Javascript, which can't easily be inserted into the theme. Theoretically, this should be possible with an administration option similar to selecting the CSS file - you can indicate a file with some Javascript in it or something.
In any case the demo site at http://scrapped.mine.nu/ now has working horizontal dropdown menus on it. If this functionality is desired in nagivation.module, the issue is merging the changes back into the code.
#3
Sorry, the HTML was parsed in the previous post. Trying again.
I've fixed IE Issues - but the fix might have side-effects. I wasn't aware of the Konqueror ones - I tested using Konqueror 3.2, and it works fine. I noticed you posted maybe about 10 minutes ago - that was probably a bad time to test, since I was actually editing the pages at that time to fix IE problems.
Essentially, I followed the model they have at the following web site:
http://www.alistapart.com/articles/dropdowns/
Before they can get working dropdowns on IE, they need to use some Javascript. They also need to attach an ID to the top-level UL element (which, in navigation.module is usually tab-row0).
The problems with the change are:
1) Because you need a [ul id="tab-row0"], this might break subsequent menus that use the same code. For example, if you put two menus on your site or enable extra menus in blocks, there might be issues.
2) You need Javascript, which is annoying to insert into the theme. Theoretically, this should be possible with an administration option similar to selecting the CSS file - you can indicate a file with some Javascript in it or something.
In any case, is this functionality that might be desired in nagivation.module? If it is, I will keep working at it.
#4
I performed my tests on your demo site -- it didn't work for Konqueror or IE.
In any case, I'm not interested in putting additional effort/functionality into the navigation module, because similar custom-menu functionality has already been merged into core removing the need for the navigation.module with future Drupal releases, 4.5+.
Those interested in dynamic drop downs in 4.4 will be very happy to find your attached patch...
#5
Okay, I tried again and indeed it now works for IE. :)
However, FWIW it still doesn't seem to work for Konquerer...
#6
Well, here's the newest patch.
Below is the newest CSS style sheet...
div#tabs {
background-color: #ddd;
height: 3.5em;
}
#tabs ul {
list-style: none;
padding: 0;
margin: 0;
}
#tabs li li {
margin: 0em;
border: none;
list-style: none;
background-color: white;
}
#tabs li li a:hover {
padding: 0.2em 5px;
border: 5px solid black;
border-width: 0 5px;
}
#tabs li li a {
display: block;
font-weight: normal;
padding: 0.2em 10px;
}
#tabs li {
float: left;
position: relative;
cursor: default;
width: 12em;
background-color: #ddd;
margin: 1em;
}
#tabs li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 12em;
border: solid 1px black;
border-width: 1px 0;
}
#tabs li>ul {
top: auto;
left: auto;
}
#tabs li:hover ul {
display: block;
}
#tabs li.over ul {
display: block;
}
div {
clear: left;
}
You also need this piece of Javascript in your xtemplate.xtmpl file (or similar) that will be attached to the next follow-up, since Drupal doesn't like it Cut and Pasted into the node body.
And instead of calling
navigation_display_tabs($mid), you should callnavigation_display_fulltabs($mid).A little bit of a mouthful of a change, but it's here in case anyone wants CSS dropdowns.
P.S. I can't get it to work with Konqueror 3.0 and 3.1 either. Works fine with 3.2, though.
#7
Javascript to drive the above XHTML/CSS dropdown menu in IE 6 is attached.
#8
You should use the nice_menus module for that. Everything is done.
Closing. Feel free to reopen.