Cascade primary links implementation
| Project: | Multiflex-3 |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | task |
| Priority: | normal |
| Assigned: | hswong3i |
| Status: | closed |
Jump to:
I give a quick review about how Multiflex37 handle the cascade primary menu in D5, but soon found that shouldn't function in D6: D6 menu system come with a complete revamp, and most related functions (e.g. menu_navigation_links(), menu_secondary_links() and so on) are now based on current page. This revamp is very useful since will not load ALL menu item but only those are USEFUL during function call, but as a side effect we will not able to obtain ALL 2nd level menu item under primary menu at once.
As Multiflex-3's cascade primary menu system is a bit different from normal Drupal site style, it may be too complicated for handle it under Drupal menu admin system. I am thinking about if just simply GIVE UP the cascade primary menu implementation, but keep the theme as simple and elegant. Any suggestion or idea?
#1
Just give a revamp to primary links, and clone the original demo design to the theme. Some implementation is cut off, e.g. IE6 support. It is tested with FF2/3, Opera9.27/9.5, Safari3 and IE7. RTL support is not fully tested yet.
I also give a try to multiple layer of cascade menu implementation but failed. It is too complicated and rear case, the outlook is not too elegant and not easy to use, so just let it be.
Instruction is also documented in README.txt.
#2
set #272338 as duplicated.
#3
Set #275822 as duplicated. Some bugs are fixed, e.g. the cascade menu is run away when mouse move though the hover slowly.
#4
Primary links is now revamp with maximum 4 level of menus, which means you can have 3 layer of child items. It is very simple for extend its support layer (although I don't really think it is too useful...). E.g. now the other layers are implemented as:
/* Multi-level dropdowns */#primary-links ul ul ul,
#primary-links ul li:hover ul ul,
#primary-links ul li:hover li:hover ul ul,
#primary-links ul li:hover li:hover li:hover ul ul {
display: none;
}
#primary-links ul li:hover li:hover ul,
#primary-links ul li:hover li:hover li:hover ul,
#primary-links ul li:hover li:hover li:hover li:hover ul {
display: block;
top: 1em;
left: 10em; /* LTR */
right: auto; /* LTR */
margin: 0 1.2em;
}
#primary-links ul li:hover li:hover a,
#primary-links ul li:hover li:hover li:hover a,
#primary-links ul li:hover li:hover li:hover li:hover a {
background-color: #D2D2D2;
}
#primary-links ul li:hover li:hover li a,
#primary-links ul li:hover li:hover li:hover li a,
#primary-links ul li:hover li:hover li:hover li:hover li a {
background-color: #EDEDED;
border-top: solid 1px #AFAFAF;
margin-top: -1px;
}
So if you hope to have one more layer, just put this into your custom.css:
#primary-links ul li:hover li:hover li:hover li:hover ul ul {display: none;
}
#primary-links ul li:hover li:hover li:hover li:hover li:hover ul {
display: block;
top: 1em;
left: 10em; /* LTR */
right: auto; /* LTR */
margin: 0 1.2em;
}
#primary-links ul li:hover li:hover li:hover li:hover li:hover a {
background-color: #D2D2D2;
}
#primary-links ul li:hover li:hover li:hover li:hover li:hover li a {
background-color: #EDEDED;
border-top: solid 1px #AFAFAF;
margin-top: -1px;
}
As you can see, the key point is "how many li:hover are defined" :-)
#5
Zohar report that the cascade primary links is also function for RTL, so it's the time to set this issue as fixed :-)
#6
Automatically closed -- issue fixed for two weeks with no activity.