Results 1 to 3 of 3

Thread: Horizontal menu based on Glossy Vertical Menu

  1. #1
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizontal menu based on Glossy Vertical Menu

    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

  2. #2
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok heres my code so far for the horizontalmenu based on glossy-vertical-menu
    as ya can see from the below code its not working any ideas
    CSS CODE
    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
    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>

  3. #3
    Join Date
    Oct 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is a link for a horizontal glossy menu.
    http://javascriptkit.com/script/scri...stopmenu.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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •