I've read that the best way to do navigation menus is through CSS, but on many well-done websites, the developer has used javascript + tables to create a navigation menu. I am personally having trouble creating a horizontal navigation menu with buttons that change when mousing over, but hesitate to use tables because of what i've read (and from what my web development teacher says). What is your process of creating navigation menus?
as VarriaStudios says take a look at http://www.dynamicdrive.com/style/ if you still have problems send me the location so i can take a look or send me your code and I will get it going for you other wise I think this is what you are looking for with a few tweaks it will work fine for you Menu HTML <ul id="menu"> <li><a href="first-time-buyer.php"><strong>FIRST TIME BUYERS</strong></a></li> <li><a href="home-movers.php"><strong>HOME MOVERS</strong></a></li> <li><a href="remortgaging.php"><strong>REMORTGAGES</strong></a></li> <li><a href="poor-credit-mortgages.php"><strong>POOR CREDIT </strong></a></li> <li><a href="flexible-offset-mortgages.php"><strong>FLEXIBLE MORTGAGES</strong></a></li> <li><a href="self-cert-mortgages.php"><strong>SELF CERTIFIED</strong></a></li> </ul> /* Menu CSS */ #menu { padding:0; height:3em; list-style-type:none; border: none; margin: 3px; } #menu li { margin: 3px; margin-top: 8px; float:left; width: 200px; height:70px; line-height:2em; border:0px solid #bbb; position:relative; text-align:center; vertical-align:middle; } #menu li a, #menu li a:visited { display:block; text-decoration:none; color:#1261B0; text-align:center; vertical-align:middle; margin: 3px; margin-top: 8px; padding-top: 22px; width: 200px; height:55px; background-image:url(../images/siteimg/mort-bg-1.jpg); background-repeat:no-repeat; } #menu li a span, #menu li a:visited span { display:none; text-align:center; vertical-align:middle; margin: 3px; } #menu li a:hover { border:0; /* needed to trigger IE */ color:#bbb; text-align:center; vertical-align:middle; background-image:url(../images/siteimg/mort-bg-2.jpg); background-repeat:no-repeat; } #menu li a:hover span { display:block; width:5em; height:2em; text-align:center; position:absolute; left:-2px; top:-3px; color:#000; cursorointer; text-align:center; vertical-align:middle; }
I would recommend sticking with html and css over table and javascript, I personally find it's much cleaner and loads faster with fewer compatibility issues.
the dynamicdrive link is really great, I am still learning css and using it more and more in my designs, but it is usually hard to work out exactly how to write the css to obtain the effect I want and a lot of trial and error is involved. this site really simplifies a lot of great effects.
Using tables for a menu is silly and unnecessary, especially when considering semantic markup. Tables are meant for TABULAR data and nothing else. An unordered list is more then sufficient for a menu.
If you dont want your site to get indexed in Google, Then you can use javascript and tables alone for hover effect or any menu styling. I have seen many links just says "javascript:go(1);" etc. This is what is seen by search engines and your inner pages will not get crawled. I am sure you must be in the beginning stage in CSS. But CSS is queen of beauty in menu and styling. You just go on exploring the things. Or You can even check some of the joomla templates around the net. I see this cms people have explored almost all types of menus. I have also written a article on my site about menus too. But search with google too on css menu styling. Best Regards, Nirmal
Use HTML and CSS. It's more search engine friendly. Follow the previous suggestion using the UL list and floats to get them in a horizontal row. One more suggestion, use a CSS image sprite for all your "up" and rollover states. All the buttons (and rollover states) will load with one server request so they load much faster and all at once. Just google "css image sprite" for a tutorial.