Trying to design 2-Level Horizontal menu. There is lots of menu resource on the web but seems like, the one im looking for it’s not there : (
I need a nav where each active node will be highlighted when they are selected. Here is the mock-up link for visual idea: http://134.74.236.60/~web1tue09/projects/m_islam/mockup-orangeadnan-2.pdf
I got a menu which might work but need little tweak on the Java Script to highlight second level. http://134.74.236.60/~web1tue09/projects/m_islam/menu.html
They are loading sub menu from external file with AJAX call which is little too much for my need.
Is there any simple and easy way to do this (last minute I know)? Help help (911)
I’m not totally clear on what you are looking for, but…
If you are loading every page via Ajax this will break the back button in most cases which is a major problem for usability.
If, on the other hand you just need the navigation to give feedback as to the current page you might do something like this:
http://understandingnewmedia.com/webpro/examples/subnav-example.html
The above works for all modern browsers using just CSS. To make it work for IE6 I’m loading Dean Edwards’ ie7.js script which adds things like the hover pseudo-class to elements other than the anchor element in ie6. More about that here: http://code.google.com/p/ie7-js/
Comment by joe — December 11, 2009 @ Friday, December 11, 2009 5:24 pm
Just so you know, I actually think the above example is unclear from the users point of view. I would personally take out the “interactivity” that lets the user view the different sub-navigation.
Comment by joe — December 11, 2009 @ Friday, December 11, 2009 5:34 pm
Thank you Joe for prompt support. You are the best. It works now.
The main reason behind highlighting a sub node was, to let user know which page they are currently visiting. I was not interested to use any additional page heading for this purpose. But I am not sure how user will react with this. Surely I’m going to ask few of my friends and I will see how comfortable they are with this.
Thank you again.
Comment by adnan — December 12, 2009 @ Saturday, December 12, 2009 11:04 am
Internet Explorer 8 breaking the nav
http://134.74.236.60/~web1tue09/projects/m_islam/ie8-prob.gif
Right now I’m ignoring this problem
Comment by adnan — December 12, 2009 @ Saturday, December 12, 2009 7:12 pm
I made a slight change to the CSS, this may fix it for IE8, but no promises. Unfortunately, I just upgraded my system and haven’t had the time to put IE8 on it (just 6 + 7).
Comment by joe — December 13, 2009 @ Sunday, December 13, 2009 3:26 pm
Thank you so much for your help. It working now on IE8 yaaaaaaaah
Comment by adnan — December 13, 2009 @ Sunday, December 13, 2009 6:30 pm