Log in

View Full Version : Horizontal menu based on Glossy Vertical Menu



SNAFU
07-29-2007, 09:55 PM
Hey im trying to make a horizontal menu based on Glossy Vertical Menu but im new to css and it keeps turning to custard:) can some one pls help me to do this or post the css code i need to use

SNAFU
07-31-2007, 11:02 PM
ok heres my code so far for the horizontalmenu based on glossy-vertical-menu (http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/)
as ya can see from the below code its not working any ideas

CSS CODE

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.topmenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 100%;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
float: left;
}

.topmenu li{
display: inline;
}
.topmenu li a{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: inline;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
float: left;

}


* html .topmenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}

.topmenu li a:visited, .topmenu li a:active{
color: white;
}

.topmenu li a:hover{
color: yellow;
background-image: url(images/glossyback2.gif);
}
</style>
HTML CODE

<ul class="topmenu">
<li><a href="http://www.link1/.php" >link1</a></li>
<li><a href="http://www.link2.php" >link2</a></li>
<li><a href="http://www.ink3.php">link3</a></li>
<li><a href="http://www.ink4.php">Link4</a></li>
<li><a href="http://www.link5.php">link5</a></li>
<li><a href="http://www.link5.php" Chat</a></li>
</ul>

tjustleft
11-13-2007, 09:15 AM
Here is a link for a horizontal glossy menu.
http://javascriptkit.com/script/script2/csstopmenu.shtml

In the css just change the "background: url" to "images/glossyback.gif ".

This one has a javascript file to allow for submenu list. I believe it is optional if you don't plan on subs. I myself just found that some people are disabling javascript in their browsers and if they do then no sublinks show up when they hover their mouse over the main link. You can still use the css though. When I looked at it I noticed it is made like the glossy vertical. In fact they have the same glossy vertical but with different colors. Now I know why there are links to the javascriptkit site in this vertical menu.:)