How to create a horizontal menu
| Author | Topic |
|---|---|
| Jason Calvert Member Joined: 09 Jan 2007 Country: Posts: 9 |  Posted: 04 Mar 2007 02:45:51 I want to create a horizontal menu simular to the Cozumel website - www.islacozumel.com.mx/ I want to create a horizontal menu simular to the Cozumel website - www.islacozumel.com.mx/The menu running horizontal across the page. Maybe "ABOUT" has sub categories like contact, history, etc. I'd like a mouse over that would display them horizontaly below the main links. How do you go about creating this? |
| Javier Castro Total freaking Member  Joined: 09 Sep 2004 Country: Canada Posts: 453 | Posted: 04 Mar 2007 05:20:11 Have you tried the popup menu in DWeaver? It works for me. Also you can check at some CSS based menus. Just Google, CSs horizontal menu. Have you tried the popup menu in DWeaver? It works for me. Also you can check at some CSS based menus. Just Google, CSs horizontal menu.Check here for CSS menus of all flavours: www.cssplay.co.uk/menus/index.html |
| Jason Calvert Member Joined: 09 Jan 2007 Country: Posts: 9 | Posted: 04 Mar 2007 06:12:13 Thanks for the reply. Thanks for the reply.I've tried the pop-menu in DW but I can't get it to work. I tested it with just a text link in a table on a blank page and it works. But it doesn't work on the page that is already complete. I have a nav div for my navigation and when I use the same settings from the test I did, it doesn't work. I'm going to try your CSS suggestion. Thanks |
| Jason Calvert Member Joined: 09 Jan 2007 Country: Posts: 9 | Posted: 07 Mar 2007 21:12:10 I've created a basic horizontal CSS menu but can't get the sub menus to display in a line. I can get them as a verticle list but not as a horizontal one. I've created a basic horizontal CSS menu but can't get the sub menus to display in a line. I can get them as a verticle list but not as a horizontal one.Here is the code, if anyone can help HTML <body> <div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">ITEM ONE</a></li> <li><a href="#">ITEM TWO</a> <ul id="subnavlist"> <li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li> <li><a href="#">Subitem two</a></li> <li><a href="#">Subitem three</a></li> <li><a href="#">Subitem four</a></li> </ul> </li> <li><a href="#">ITEM THREE </a></li> <li><a href="#">ITEM FOUR</a></li> <li><a href="#">ITEM FIVE </a></li> <li><a href="#">ITEM SIX </a></li> <li><a href="#">ITEM SEVEN </a></li> <li><a href="#">ITEM EIGHT </a></li> <li><a href="#">ITEM NINE </a></li> </ul> </div> </body> CSS ul#navlist { white-space: nowrap; margin: 0; padding: 0; } #navlist li { display: inline; list-style-type: none; } #navlist a { padding: 2px 5px; } #navlist a:link { color: #000000; text-decoration: none; font: bold 10px Verdana, Arial, Helvetica, sans-serif; border-right: 1px solid #000000; } #navlist a:visited { color: #990000; text-decoration: none; font: bold 10px Verdana, Arial, Helvetica, sans-serif; } #navlist a:hover { color: #006600; text-decoration: none; font: bold 12px Verdana, Arial, Helvetica, sans-serif; } ul#subnavlist { display: none; } ul#subnavlist li { float: none; } ul#subnavlist li a { padding: 0px; margin: 0px; } ul#navlist li:hover ul#subnavlist { display: block; position: absolute; font-size: 8pt; padding-top: 5px; } ul#navlist li:hover ul#subnavlist li a { display: block; width: 10em; border: none; padding: 2px; } ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; } |
| Jason Calvert Member Joined: 09 Jan 2007 Country: Posts: 9 | Posted: 07 Mar 2007 21:23:02 Just got it to work. Just got it to work.I deleted the last line of code in CSS file and its working fine now. Whats weird is that I put it back in and the menu is working with that now as well. I've noticed that sometimes I get these weird glitches with dreamweaver 8. Is anyone else having weird things going on with 8? |
| Jason Calvert Member Joined: 09 Jan 2007 Country: Posts: 9 | Posted: 07 Mar 2007 22:54:22 Hey guys, I have one more issue. I can't seem to get the different sub listings to line up under the main links. The link to the far right has its listings pop up over on the far left. How could I fix this?Hey guys, I have one more issue. I can't seem to get the different sub listings to line up under the main links. The link to the far right has its listings pop up over on the far left. How could I fix this? |
