CSS-Drop-Down Menu
- Hey Everyone,
I have designed a CSS drop-down menu using Morten Rand's tutorial. http://expression.microsoft.com/en-us/dd279540.aspx
All working fine except I am creating it Vertically not Horizontally
Link - http://www.amlautomation.com/NewSite/Test.html
As you can see in my page the Menu is hidden until hovered over,
My main Nav Menu is ¦ Home ¦ Distribution ¦ Manufacturing ¦ Register ¦ Contact ¦
But my question is.... is it possible to make the sub-lists collapsible within Distribution ¦ Manufacturing
So it only expands when one of the above it selected.
Can this be done with CSS or do I need a javascript menu ?
Thanks in advance
Cheers
Paul
Réponses
- Here's a list:
http://www.veign.com/blog/2008/02/big-list-of-css-menus.html
This is the one I like:
http://htmldog.com/articles/suckerfish/dropdowns/
Sample usage:
http://htmldog.com/articles/suckerfish/dropdowns/example/
--
Chris Hanscom - Microsoft MVP
On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign- Marqué comme réponsepaullyie mardi 3 novembre 2009 22:02
Toutes les réponses
Don't use that menu unless you are willing, as apparently he is, to tell a significant percentage of your site visitors to go pound sand.
"However, the drop-down feature does not work in Internet Explorer 6 (IE6) – an older version of IE that is still in use by a many people. ... There are proponents who say you still have to design with IE6 in mind but I am not one of them."
IE6 usage is still from 10% to 20% (sometimes more) of site visitors. You can certainly offer them less fancy functionality sometimes, but a non-working menu is not an option.- Do you have a captive audience (i.e. intranet with specified browser or defined clientele likewise)? If not, from 10% to 30% of your visitors are going to be very disappointed, and probably quite irked at you or your client, when they can't navigate the site with IE6.That menu is not IE6-compatible, and the author makes no bones about it. He apparently can afford to alienate a significant portion of his potential clients. I and most others cannot. Can you?cheers,scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - Yikes two alarm bells posted at once.....lol
Thanks for the replies, points taken
ok, what could you recommend as a quick and easy alternative?
Cheers
Paul - Here ya go, have a look at these. They require a smidgeon of javascript to support IE6, but are 99% pure CSS otherwise. Because of IE6's lack of support for the :hover pseudo-class on arbitrary elements (anchors only for IE6, no list items or ul elements), js is necessary, but not much.[EDIT: Umm, yeah. I meant to point you here http://by-expression.com/media/p/1554.aspx. Sorry about that; senior moment...RE-EDIT: Just discovered that Safari does funny things to copy/pasted links in this editor.]cheers,scott
Plural's don't have apostrophe's. It seem's sometime's that any word's ending in "s" get a gratuitous apostrophe. Apostrophe's are used to indicate possessive's and elision's (contraction's or abbreviation's). - Cheers Scott,
got a link btw?.....heehee - Here's a list:
http://www.veign.com/blog/2008/02/big-list-of-css-menus.html
This is the one I like:
http://htmldog.com/articles/suckerfish/dropdowns/
Sample usage:
http://htmldog.com/articles/suckerfish/dropdowns/example/
--
Chris Hanscom - Microsoft MVP
On Facebook | On Twitter | Resource Center | Veign's Blog | Web Development Help
Get a Complete Website Analysis by Veign- Marqué comme réponsepaullyie mardi 3 novembre 2009 22:02
- I prefer the CSS Express menus from Project Seven over suckerfish (and its prodigy) for accessiblity reasons though I've used son of suckerfish in the past.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes - Thanks for all the replies guys n gals,
I went with the first link that Scott suggested (by-expression.com)
Now I have a small problem, and was wondering if someone could help me out please?
The site looks fine (I hope) in IE8/IE7 (correction IE7 is not good either)
in FF the menu partially works (hover seems to be jumpy)
and in IE6 there is no hover effect and no drop down menu???
hopefully someone can point me in the right direction
http://www.amlautomation.com/home_test.html
or should I use another option?
Thanks - It works okay in Opera, but when an item is highlighted in the flyout (in IE8 also), the white background isn't as wide as the grey--looks a little odd, possbly a setting in the CSS for the menu? I also think there should be an indication that there is a submenu on a link (a right-pointing arrow or something)--that seems to be standard.
Speaking of a little odd--that is the skinniest site I have seen in ages. There is a link on the home page for a planned image gallery. You don't have enough room for much of an image gallery with a site that's so narrow. The widest image you can display is about 440 px. That's not enough for people to see meaningful detail of products. It might be okay for pictures of sunsets or kittens, but if you're trying to use photos to sell the products, they should really be bigger than that. A skinny site means needless vertical scrolling, too. - You didn't bother to mention which menu you were actually trying to use. But look at the IE7 and less conditional CSS. Ridiculous height for the links.
Start over with an empty page and follow whatever instructons you were trying to follow to the letter. Once you have that working, worry about adding it to your site. - Sounds like he's using the CSS Express Menu from Project Seven and if the height is screwed up it is because something was changed in the code. I'd suggest comparing the code with that of the original menu before any modifications made by the user.
MS MVP Expression Tutorials & Help http://by-expression.com and online instructor led Expression Classes - Thanks for all the replies everyone,
Kathy sorry it was the ProjectSeven menu I was using,
Bill, cheers, I took your advice and enlarged the width of the content only slightly though becuase I was updating an existing site so not much was changing in way of content.
After going through the Project Seven again, I still could not pinpoint what was causing the menu to Jump and the difference in IE6
Anyway, I went with one of Veigns reccomendations - Suckerfish menu
Lot easier to style and work with - fewer css elements involved
Thanks again
