Alex Robinson posted a CSS challenge few days ago on css-discuss list: using 2-level nested list, create a two-line navigation with the following properties:
- “current” main item’s sub menu should be always visible
- sub menus for other items should display on hover
- menu should be liquid, i.e. to be based on ems rather than pixels
I took the plunge, and the end result can be seen here. Excellent example of such navigation is Nokia’s, and the CSS version based on the above is here.
Version with floated box fails in IE/Win. In that example, each item is floated to the left, and IE calculates width:100% for absolutely positioned nested lists from the left edge of the item instead of full viewport width. Yet another IE/Win bug. :(
Is the .js file and code avaiable ?
Simply open the source of the examples and peruse the code. Javascript used is just for IE, since it has no support for li:hover.
It doesn’t work properly with Mozilla. (1.7b)
When I try to move the mouse over the bottom line, it changes the content.
Ichim, what do you mean by changing content? I don’t have 1.7 (I prefer final versions), but it is working properly in Firefox 0.8.
I doubt that they broke something in the gecko engine, but you never know.
The mouse over effect is not working with ie, aparently hover doesn’t work in IE, any known solution for this ?
It does work. :)
There is a small Javascript in the page source that adds li:hover support for IE. I just retested it again, it sure does work.
What IE version are you using?
i didn’t put the javascript…oops hehe. I’m using the menu in plone and have no idea where to put that script…Any idea ?
plone=phone?
Same place as for any other page. If it‘s working on the desktop comp, and the same thing is not working on the phone, then the phone does not have the neccesary CSS and/or JS support. Same goes for anything else.
plone is a CMS built on Zope, so a lot of the path stuff would be handled not directly by him.
In this case maybe try using absolute paths “/script/s/hover.htc”
how about the class=“selected”? how does that work to update with the page you are currently on, and then as you go to a different page?
Not working in IE MAC?
By default, no IE/Mac. Script is needed to simulate :hover there, similar to IE/Win.
The easier way to set class=“selected” would be from the server-side code, whatever you use.
hi aleks,
at the moment i am trying to rework the script in order to use it in a table (problem: the sublist is not the same javascript element as the primary list anymore .. i sort of need to duplicate the structure)
the table is in order to have bold scrollover on the primary menu ..
.. ?
the first link to the example does not work. Do you have the link to see your example?
By the way…this is awesome and what you have done with the css and menus is awesome!! Thanks soooo much for all the help!
Aaron, sorry, I forgot to copy that dir when I tranfered the site content. It’s back now, thanks for letting me know.
MAN! You are the best! thanks again!
I am trying to format the top level LI’s but when i try and put padding or spacing to the top and bottom the lower ul’s and li’s start over lap.
Is there a way to do this?
Thanks again!
Would spacing out the top menus hiegth in IE have to do with the LI tags attributes?
When i change the style sheet to make the top level navigation to have more padding it gets over lapped by the bottom. I noticed it looked ok in other browsers but not in IE. Any thing i am missing?
Thanks again! :-)
ok i have figured it out. I am just a dork! :-)
But i have one more question now. Sorry! :-)
Is there a way to have the menu that appears below the the top or menu 1 item show up below it rather than off to the left?
I have a menu that has 2 items and they appear way off to the left and you have to move the mouse down and then all the way over to get to them.
Make sence? Sorry for all the questions and thanks soooo much for this menu item and all the help and fast responses! :-)
I’m sorry Aaron, but I don’t understand what you said in the last comment. Can you provide an URL (this always helps a great deal)?
oh yeah sorry :-) that would have probably helped huh? LOL
you can see the menu that i am trying to make it look like here http://www.americanbusinessmedia.com. But if you notice the submenus are under each menu1 item and this menu puts them off to the left like the nikia menu example.
Thanks again for all the help!!!! Dont know a site where someone would be so kind as to even attempt to help or answere the question! :-)
Thanks!
No, I meant the URL of the file you are working on, not the page you are trying to replicate. :)
Anw — the CSS is built so submenu always gets 100% wide in order to cover current submenu and subitems are on the left. So, there is no quick tweak you can apply to get the submenu right below the parent item (meaning I don’t see that tweak).
It’s an interesting thing to do though; unfortunatelly I don’t have time to go at it now. It might require some additional markup, but that is a wild guess at the moment.
I plan to update this code sometimes in the future, so maybe I’ll revisit it then.
These tabs have been updated to better code.
Hey Aleks, the menu is flickering on IE6/Win, same with the adxmenu but it works…
the flicker is annoying though… any tips on how this would’nt flicker?
Im currently using FireFox1.0PR but you just can’t ignore IE users…
I would like to use this menu with plone, is it possible? How can I use? Thx
I revived a how-to in plone.org but I think it isn’t published yet
http://plone.org/documentation/how-to/twolevel-navigation-in-plone-revived
While leaving the mouse from a current page to another one, the subpages of the current page do not disappear so that the subpages of another page are shown as well. So, nobody can read the subpages. What’s wrong?