Forums
This topic is locked
How to create a horizontal menu
Posted 04 Mar 2007 02:45:51
1
has voted
04 Mar 2007 02:45:51 Jason Calvert posted:
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?
Replies
Replied 04 Mar 2007 05:20:11
04 Mar 2007 05:20:11 Javier Castro replied:
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
Check here for CSS menus of all flavours: www.cssplay.co.uk/menus/index.html
Replied 04 Mar 2007 06:12:13
04 Mar 2007 06:12:13 Jason Calvert replied:
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
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
Replied 07 Mar 2007 21:12:10
07 Mar 2007 21:12:10 Jason Calvert replied:
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: " >> "; }
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: " >> "; }
Replied 07 Mar 2007 21:23:02
07 Mar 2007 21:23:02 Jason Calvert replied:
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?
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?
Replied 07 Mar 2007 22:54:22
07 Mar 2007 22:54:22 Jason Calvert replied:
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?