Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    29
    Thanks
    4
    Thanked 1 Time in 1 Post

    css menu color change

    I am in the process of developing a site and need to mimic this site for the menu. http://www.xt-commerce.com/ Just hover over the menu and you will see what I mean.

    What I need is for the menu border on the bottom to change color when you hover over a link.

    example: when on the home page the home button and border are blue.

    When you hover on the contact link the button for contact changes to orange, but so does the bottom border. When you click on the contact button the color remains orange.

    I don't want to do java if possible. I was able to get it to work by placing each link with a seperate menu . Basically creating a new menu for each link, but it seems a little over the top and redundant.

    Anyone have a simpler way to do this? Here is the basic css which came from a dropdown menu.

    Code:
    #menu {
    	list-style:none;
    	width:940px;
    	margin:3px auto 0px auto;
    	height:43px;
    	padding:0px 20px 0px 20px;
    
    	/* Rounded Corners */
    	
    	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	border-radius: 10px;
    
    	/* Background color and gradients */
    	
    	background: #fff;
    	
    	/* Borders */
    	
    	border-bottom: 4px solid #065682;
    
    	-moz-box-shadow:inset 0px 0px 1px #edf9ff;
    	-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
    	box-shadow:inset 0px 0px 1px #edf9ff;
    }
    
    #menu li {
    	float:left;
    	display:block;
    	text-align:center;
    	position:relative;
    	padding: 4px 10px 4px 10px;
    	margin-right:30px;
    	margin-top:7px;
    	border:none;
    }
    
    #menu li:hover {
    	border: 1px solid #777777;
    	padding: 4px 9px 4px 9px;
    	
    	/* Background color and gradients */
    	
    	background: #F4F4F4;
    	background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
    	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
    	
    	/* Rounded corners */
    	
    	-moz-border-radius: 5px 5px 0px 0px;
    	-webkit-border-radius: 5px 5px 0px 0px;
    	border-radius: 5px 5px 0px 0px;
    }
    
    #menu li a {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:14px; 
    	color: #000;
    	display:block;
    	outline:0;
    	text-decoration:none;
    	text-shadow: 1px 1px 1px #000;
    }
    
    #menu li:hover a {
    	color:#161616;
    	text-shadow: 1px 1px 1px #ffffff;
    }
    This would be for the home link. If I wanted to make a second link for example it would be for the contact button and I just changed the menu to menu1. That was the only way I could think to make it work, but it is a lot of code.

    Thanks for any simpler answers
    Last edited by j634; 02-07-2012 at 08:23 AM. Reason: resolved


 

Posting Permissions

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