Vertical Navigation flyout 5 deep CSS

  • MightyAsianThunder
  • Novice
  • Novice
  • MightyAsianThunder
  • Posts: 15
  • Loc: San Diego

Post 3+ Months Ago

I have a nightmare of a client that wants this indepth idiotic navigation system on his website... it is basically this web of mouse overs and nested tables.. I found something that I like but cannot seem to get it to function past the first tier:

http://www.alistapart.com/articles/horizdropdowns

the issue is that once the user mouses over the first visible object, every sub table shows up as opposed to the first level, then the next, then the next and so on and so forth....

I like this script for the small size and easy to understand concept in case he wants to */shudder/* augment the table himself....

Any help would be greatly appreciated.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

I'm not entirely sure this can be achieved through css. I don't think css fly-outs allow for more than one tier. I would suggest looking into a javascript alternative. I'll play around with it and see if I can come up with a solution in css, but it isn't likely.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

okay, got it set.
Sub menu's with css

you could essentially go as deep as you want with this method.

Take a look at the source, I commented pretty thoroughly. If you have any questions let me know

tested and working in chrome 2, opera 9, IE7, IE8, Firefox

This css will not interfere with any other elements on the page. Use unordered lists to achieve the structure of your menu, and then add a class name of "navigation" to the top level <ul> tag of the navigation menu. Again, you can add as many embedded ul tags within li tags as you need and this code should work seamlessly with all elements inside of a list with the "navigation" classname.
  • MightyAsianThunder
  • Novice
  • Novice
  • MightyAsianThunder
  • Posts: 15
  • Loc: San Diego

Post 3+ Months Ago

Sweet, just utter perfection... thank you sir!
  • MightyAsianThunder
  • Novice
  • Novice
  • MightyAsianThunder
  • Posts: 15
  • Loc: San Diego

Post 3+ Months Ago

this is weird.. it is not functioning in IE7 very well.. seems like when you mouse to the right too quickly the menu collapses and disappears... any suggestions?
  • Flanders
  • Beginner
  • Beginner
  • User avatar
  • Posts: 48
  • Loc: Reno, Nevada US

Post 3+ Months Ago

I've had really good experience with the CoolJSMenu (I don't know if linking to it is allowed, google it). I've used it on several projects and it works great.
  • MightyAsianThunder
  • Novice
  • Novice
  • MightyAsianThunder
  • Posts: 15
  • Loc: San Diego

Post 3+ Months Ago

i would prefer not to have to buy anything for something so painfully simple (so it seems)
  • Flanders
  • Beginner
  • Beginner
  • User avatar
  • Posts: 48
  • Loc: Reno, Nevada US

Post 3+ Months Ago

It's a free script, unless you want the Pro version. The free script will do everything you want to do.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

hmmm, not sure why it wouldn't be working, it works on my comp under IE7. I'll take another look at it and see what I can come up with.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

okay, did some research. Sorry for taking so long. I believe it's because of the wrapping comment tags "<--" and "-->" inside the stylesheet area. Just under the <style> tag and above the closing </style> tag. In IE7 the child combinator ">" becomes a bit buggy when proceeded with comment. Remove the <-- and --> in the stylesheet and it should work.

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 44 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.