• I am trying to incorporate a Glossy Horizontal Menu found here (http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/) into a WordPress site I’m building using the free version of the Mimbo theme.

    Here is the code from the glossy menu:

    <style type="text/css">
    
    /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
    /*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */
    
    .glossymenu{
    	position: relative;
    	padding: 0 0 0 34px;
    	margin: 0 auto 0 auto;
    	background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
    	height: 46px;
    	list-style: none;
    }
    
    .glossymenu li{
    	float:left;
    }
    
    .glossymenu li a{
    	float: left;
    	display: block;
    	color:#000;
    	text-decoration: none;
    	font-family: sans-serif;
    	font-size: 13px;
    	font-weight: bold;
    	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
    	height: 46px;
    	line-height: 46px;
    	text-align: center;
    	cursor: pointer;
    }
    
    .glossymenu li a b{
    	float: left;
    	display: block;
    	padding: 0 24px 0 8px; /*Padding of menu items*/
    }
    
    .glossymenu li.current a, .glossymenu li a:hover{
    	color: #fff;
    	background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
    	background-position: left;
    }
    
    .glossymenu li.current a b, .glossymenu li a:hover b{
    	color: #fff;
    	background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
    }
    
    </style>

    And here is the navigation code from Mimbo:

    #nav {
    	background:#777;
    	font-size:1.1em;
    	}
    
    #nav, #nav ul {
    	list-style: none;
    	line-height: 1;
    	}
    
    #nav a, #nav a:hover {
    	display: block;
    	text-decoration: none;
    	border:none;
    	}
    
    #nav li {
    	float: left;
    	list-style:none;
    	border-right:1px solid #a9a9a9;
    	}
    
    #nav a, #nav a:visited {
    	display:block;
    	font-weight:bold;
    	color: #f5f5f4;
    	padding:6px 12px;
    	}
    
    #nav a:hover, #nav a:active, .current_page_item	a, #home .on {
    	background:#000;
    	text-decoration:none
    	}

    Iève worked for the last 24 hours trying to get this to work together without having to resort to doing it where I have to manually add the navigation links. Does anyone have any suggestionsÉ I would greatly appreciate it.

    Thanks

  • The topic ‘Integrating Glossy Horizontal Menu’ is closed to new replies.