0

Hi guys,

I nedd help with my html and css. I've created a navigation menu. My code for the menu is below.

/*TOP MENU PROPRITIES STARTS HERE*/
									#main-container {
			width : 970px;
			min-height : 400px;
			display : block;
			overflow : hidden;
			margin : 0 auto;
		}
		#main-top {
			width : 970px;
			height : 82px;
			display : block;
			overflow : hidden;
			margin-bottom : 50px;
		}
		#main-topleft {
			width : 300px;
			height : 82px;
			float : left;
			display : block;
			overflow : hidden;
		}
		#main-topright {
			width : 800px;
			height : 82px;
			float : right;
			display : block;
			overflow : hidden;
			padding-top : 5px;
		}
		#mainmenu {
			width : 600px;
			height : 90px;
			float : right;
			left : 50px;
			margin : 2px;
			overflow : hidden;
			padding-top : 10px;
		}
		#mainmenu li {
			display : inline;
			list-style : none;
			margin : 0;
			padding : 0;
		}
		#mainmenu li a {
			display : block;
			height : 90px;
			width : 80px;
			float : left;
			text-align : center;
			font-size : 16px;
			text-decoration : none;
			font-weight : bold;
			margin-right : 3px;
			padding : 8px 14px;
			color : #fff;
			background : #3accfd;
		}
		#mainmenu li a:link, #mainmenu li a:visited {
			background : #3accfd url(../../images/nav_active.jpg);
			color : #fff;
		}
		#mainmenu li a:hover, #mainmenu li a:active, #mainmenu li a:focus {
			background : #91e4e4 url(../../images/nav_hover.jpg);
			color : #CAF0F0;
			margin-top : 10px;
		}
		#mainmenu li.active a:link, #mainmenu li.active a:visited {
			background : #77d0d0 url(../../images/nav_active0.jpg);
			color : #167474;
		}
		#mainmenu li.active a:hover {
			background : #3accfd url(../../images/nav_hover.jpg);
			color : #fff;
			margin-top : 10px;
		}
		/*TOP MENU PROPRITIES ENDS HERE*/

My html code to display the menu:

<body>
<div id="main-container">
<div id="main-top">
  <div id="main-topleft"><img src="images/logo2.jpg" width="300" height="82" alt="incommunities - new user system " /></div>
  <div class="mainmenu">
    <!-- TOP NAVIGATION STARTS HERE -->
    <ul id="mainmenu">
      <li class="active"><a href="dashboard.php">Dashboard</a></li>
      <li><a href="users.php">Users</a></li>
      <li><a href="adduser.php">Add New User</a></li>
      <li><a href="../../help.doc">Help</a></li>
      <li><a href="logout.php">Logout</a></li>
    </ul>
  </div>
</div>
<!-- TOP NAVIGATION ENDS HERE -->

I want the menu to show the active background (nav_active0.jpg) when a user goes to a certain page,and the rest of the pages to be(images/nav_active.jpg)inactive. Can someone help me please...

2
Contributors
1
Reply
3
Views
7 Years
Discussion Span
Last Post by drsim
0

you have to make a class for the selected link. for example

#mainmenu li a.selected{

background : #77d0d0 url(../../images/nav_active0.jpg);

color : #167474;

}

then you have to apply it to the active page and active link.if you have alot of dynamic pages then you need to use javascript to switch the active class to the relevant link.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.