We are working on a project, where we have to do this crazy drop down menu. Not sure, how to plan this. Can anyone help ? See attached.
Woa that looks cool but I wouldn't want it on my site. I am sure there are ways but I am not any great css coder. Google my friend
Just download from Gooogle simple drop-down menu based on JavaScript and change HTML and CSS code with your graphics, colors and other things. It should help you. If you know some basic HTML and CSS you will deal with this.
yeah, this would be much easier to get done in Flash or with script. A pure HTML & CSS solution might be either extremely messy or just impossible. Since those rollover graphics overlap each other you'll have to do weird padding/margin hacks, and each sub-menu item needs it's own class defined. With a little jQuery however, this would be quite possible - not sure if it would impact search engine indexing though.
I can't see what the big deal is. The designer just has to give you graphics for each "level" and the class applied when you dynamically generate the menu - and the user just needs to know that only X levels can be used.
It isn't that big a deal if you separate out the elements into different layers so the sub-menus aren't direct descendants of the main nav items - but the problem with that is you lose semantic context and some accessibility. Due to all the angles, it's not going to be very easy to have your html look like: <ol> <li class='main-nav-item'> <a href='#'>About Us</a> <ol> <li class='sub-nav-item'><a href='#'>Our mission</li> <li class='sub-nav-item'><a href='#'>The team</li> <li class='sub-nav-item'><a href='#'>Etc...</li> </ol> </li> <li>...</li> </ol> HTML: Not saying it isn't possible, would just be more difficult than your average drop-down menu.