tanfa - archived muse
:: View Archives List :: Home :: Skip to Have a Muse
Archive dated February 28, 2005
CSS Drop-down & Pop-Out Menus
As promised a few weeks back the CSS Menus demonstrated on SEO Consultants Directory are now finalised. You can view the source and play, or there is now a step by step tutorial available.
Starting with an introduction to the required resources it leads on to the Vertical Pop-Out Menu Tutorial and then the Horizontal DropDown Menu Tutorial. I recommend that you read the vertical tutorial first as there are bits in there applicable to both.
I have already been asked for a support area for these, but I'm not sure they need it yet. What I will do in the meantime is ask you to leave any questions in this other thread in the comments area and I will endeavour to update the post itself to be a FAQ if necessary over time.
Meanwhile enjoy the menus! ~ Introduction to Tutorial
Many thanks Claire.
A valuable and clear tutorial indeed.
I'm using the vertical menu (with some modifications)in my site.
Posted By MauricioSamySilva on 20/03/2005 at 23:05pm «þ»
Thanks tremendously for your dropdown and pop-out menu tutorials. I spent ages on trying to figure things out on my own and then found your site. Turns out most of the issues I had were releated to the wonderful IE browser. I now have several menu's , but my current problem is that the popout option is being overwritten by additional table details below - I am sure it is a sequencing problem, so should be able to have it fixed soon. Thanks again for your helpful pages - They have been very much appreciated.
Posted By Charkra on 21/03/2005 at 22:31pm «þ»
Thanks very much for these css-driven menus. FYI, I did notice one issue I had in my environment. When there was a hyperlink in the same place on the page where a menu was trying to go, the menu would disappear prematurely (in IE anyway). I solved it by adding the "z-index: 500" property to the #menu class iteslf.
That being said, yours is best HTML menuing system I've encountered yet. It is brilliant in its simplicity. I have a quote hangning in my cube that I think is very fitting...
"When I'm working on a problem, I never think about beauty. I think only how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong."
--- Buckminster Fuller
Thanks again for the beautiful solution!
Posted By JeremyKidd on 30/03/2005 at 20:09pm «þ»
I was trying to implement the vertical
css menu with pop outs, but it was not working, i even tried to use the code in your tutorial with the menu (the nested ul )that you provide in the tutorial, but the pop outs are not working in ie. i have the most updated ie with sp2...and all Microsoft stuff..., what could be stopping the menu to work perfectly?
Posted By Willy on 20/04/2005 at 16:04pm «þ»
OK I got the drop downs working in IE. I don't get to code much anymore and doing CSS is fun as I work on a genealogical website.
What I want to do is have the same menu on each page of the web site. I created a page that contains just the menu and I want to include that page on each of the other pages in the web site.
Somehow I think I am doing this the wrong way. Are there are tutorials on how to do this?
Posted By DavidG on 21/04/2005 at 7:35am «þ»
Hi, thanks for the tutorial it was perfect.
I'm wondering if there is a way of having the top elements with a variable width, not %. I want to just add padding to the sides and let the content be free.
Thanks again!
Posted By Kalle on 25/05/2005 at 16:33pm «þ»
All I have to say is you are the man! IE is a real pain to work with and your tutorial saved my butt. :) Thanks!!
Posted By Scotty on 26/05/2005 at 0:34am «þ»
First off, I would like send the webmasters a personal thank you for their hospitality, the css tutorials here are great. One problem I encountered with getting the pop out menus working in IE was that the the MIME type on my
Apache webserver had to be set correctly for the htc files to work under XP SP2.
After pulling my hair out for a few hours, I read a few posts and learned I needed to add the following to my httpd.conf to make the htc fixes work in IE.
AddType text/x-component .htc
I am hoping this post might give others with the same problem hope.
Posted By pdog on 27/06/2005 at 13:17pm «þ»
Got your menu to work.
problem is anything more then 3 levels (4th level) 
it appears as soon as you hover on the 4th level
other then that..fantastic job
Posted By Abyss on 14/02/2006 at 9:34am «þ»
Question regarding usability of this method for a menu. I have noticed that when I attempt to use this menu, and have custom list settings for the rest of my page, that the two different CSS settings stomp all over each other.
For example, I can't define in my style sheet any different type of bullet for my <li> elements because it adds that to my menu elements as well as the actual list.
Is there any type of work around for this, other than setting the <li type=circle>. I would much rather have this set in my style sheet, rather than the HTML code.
Thanks and keep up the great work!
Posted By Kevin on 12/04/2006 at 21:30pm «þ»
Sorry but muses are now closed on this article
previous :: top of page :: next
Thanks Suzy. This is a great solution, to a tricky site redesign where the client is insistant on keeping the drop down menus, and I'm insistant on accessible semantic markup for the propsed style switcher. Looks as though I will be able to get both types to work side by side.
Ta, Liam
Posted By Liam on 04/03/2005 at 13:02pm «þ»