|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
CSS - Styling your pages with Cascading Style Sheets.
Thread: CSS Horizontal Mulitlevel Dropdown/Flyout Menu
|
| No member browsing this thread |
|
Thread Status: Active Total posts in this thread: 9
|
|
| Author |
|
newseed
Advanced Member Joined: Apr 2, 2005 Post Count: 2141 Status: Offline |
I've looked at numerous types of combination dropdown/flyout menus but most of them are a bit of an overkill or the code is too bloated in the css or too many conditional comments in the html. Can anyone suggest a good accessible multi-level dropdown horizontal menu that has clean code in both html and css? I like for it work for IE6 too and so a bit of javascript is fine with me. Thanks. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
Here is every nav menu I could find on the web ---------------------------------------- Eric :~) Knowledge is Power |
||
|
|
billyboy
Advanced Member Joined: Sep 3, 2005 Post Count: 2206 Status: Offline |
There is no such thing as an accessible drop down or flyout menu... at least I've never been able to find one. In order to be accessible it would have to have all levels available to all user agents and function, via keyboard, mouse, or other device without javascript. Interesting comment in the 2nd post here on the whole philosophy of drop down/flyout menus. http://www.accessifyforum.com/viewtopic.php?t=10938 ---------------------------------------- Quiquid latine dictum sit altum viditur |
||
|
|
Wickham
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
Accessibility is a problem with pure CSS dropdown menus, so I always make sure that the top level has a link (often the top level doesn't in templates) so that if the dropdown doesn't work or a person without a mouse is using the menu, it will lead somewhere. I then make sure that the top level link has the other links from the dropdown menu somewhere on its page, so that the dropdown is just for convenience and saves extra clicks and loading an extra page. IE6 often needs a behavior file and ActiveX, but I regard this as a small price to pay, especially as a IE6 user with ActiveX disabled can still use the top level links. CSS menus can have a combination of horizontal and flyout, here's one which validates for HTML and CSS:- http://www.broadchalke.info/villagehall.php the flyouts are on some of the Photos menu links. The dropdown combined with PHP to highlight the current page is bloated, but it's a bit of an experiment. The bloat is mainly because of the number of links and the PHP; the basic code is relatively simple. The top level links will open with tab navigation (dotted box in IE7 and underline in Firefox). There are no conditional comments inside the html markup; I know that many CSS dropdown menus insert lots of these to insert a table just for IE6, but that can be avoided. There is only a conditional comment in the head section leading to a short css file with the behavior file and minor adjustments for IE6. IE8 beta 2 does operate this menu in a flaky way, the mouse has to be waved around a bit to maintain contact with the dropdown level, but that may change in the final release and not many general public viewers will be using IE8 yet. ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. ---------------------------------------- [Edit 4 times, last edit by Wickham at Sep 19, 2008 1:28:44 AM] |
||
|
|
newseed
Advanced Member Joined: Apr 2, 2005 Post Count: 2141 Status: Offline |
Thanks guys. I was afraid of that. I have one where it uses superfish javascript which works fairly well. The issues is have different color background for hover and inconsistant displaying of the arrows I have used. As soon as I ftp this menu, I will post a link and maybe one of you guys can shed some light on how I can make it look good visually. Thanks. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group ---------------------------------------- [Edit 1 times, last edit by newseed at Sep 19, 2008 8:53:09 AM] |
||
|
|
newseed
Advanced Member Joined: Apr 2, 2005 Post Count: 2141 Status: Offline |
I have ftp the code to my site: thek aspergro up.com/tools/cssdr opdow nmenu/menu-template.html ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
||
|
|
Wickham
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
I've just tried your menu in IE7 and Firefox. It suffers from a common problem that when you move the mouse across from the top level to the dropdown level, it loses the connection and the dropdown box disappears. It's sometimes fiddly to cure this, but I can see a space between the top level and the dropdown level which means closing the gap; (a drastic cure is even using negative margin and/or padding to place the first dropdown box over the bottom of the top level). It's worse in IE7 than in Firefox. As far as the colors of the text and boxes are concerned, it's often a matter of trial and error. You should be able to identify the levels from the styles, one li is the first level, two the second, etc. Then edit one color at a time, possibly just the hover styles, and see which changes. ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. ---------------------------------------- [Edit 1 times, last edit by Wickham at Sep 19, 2008 10:49:20 AM] |
||
|
|
shelfimage
Advanced Member USA Joined: Mar 24, 2005 Post Count: 3000 Status: Offline |
I have ftp the code to my site: thek aspergro up.com/tools/cssdr opdow nmenu/menu-template.html I can fix problem #1 which also a requirement with all of my suckerfish style menus. I didn't look at your code, but if it is the usual nested list sucker fish approach, this may help. I use it on all of my menus to keep the parent link active while hovering over child links in the dropdown. /*keeps parent hover color when child menu is hovered */ #menu a:hover, #menu li:hover a, #menu li.hover a { background-position:0 -38px; } the background positioning is there because a lot of the menus I build are image based. Just replace that with your hover color. I just looked at your menu. my snippet above will work. superfish.css (line 102) #menu .top-menu li:hover, #menu .top-menu li.sfHover, #menu .top-menu a:focus, #menu .top-menu a:hover, #menu .top-menu a:active { background:#009900 none repeat scroll 0 0; color:#FFFFFF; text-decoration:none; } Just add #menu li:hover a, #menu li.sfhover a this keeps your active a #fff color on while hovering. ---------------------------------------- "The art of life lies in a constant readjustment to our surroundings." -Okakura Kakuzo Save the developers<!> Maine Webworks |
||
|
|
newseed
Advanced Member Joined: Apr 2, 2005 Post Count: 2141 Status: Offline |
This is why I like having a second set of eyes looking at the code. Thank you very much for you help. ---------------------------------------- Success is based on how much you spend. If it's not money, then the alternative is your time. The Kasper Group |
||
|
|
|
|
Current timezone is GMT Sep 9, 2010 3:37:36 AM |
