Jump to content

Navigation Bar question


Recommended Posts

What i usually do is give a class to a body for each of the page and a class to all of the nav menu. for example: in the home page, you set it's body tag in the index.php, or index.html to <body class="page-home">in the about page, you set it's body tag in the about.php, or about.html to <body class="page-about"> Then, the nav menus are each given a class: class="nav-home", and class="nav-about" Finally, the CSS:

.page-home .nav-home,.page-about .nav-about {	 background-color: red;}

You can name the class to whatever you like.

Edited by leev18
Link to post
Share on other sites

Hi Leev, Thanks for your reply..

ul#menu{   list-style-type:none;   margin:0px;   padding-top:10px;   overflow:hidden;}   ul#menu li{   float:left;}   ul#menu li a:link,a:visited{   display:block;   height:30px;   width:190px;   color:#000000;   background-color:#FFFFFF;   text-align:center;   text-decoration:none;}  ul#menu li a:hover,a:active{   display:block;   height:30px;   width:190px;   color:#000000;   background-color:#00FF00;   text-align:center;   text-decoration: none;}

is the navigation I have currently with 5 options in the actual menu bar then. What are you suggesting I should I change to make it so that the selected one will stay with a green background the whole time instead of just when hoverd over?

Link to post
Share on other sites

here's some example files, see if it helps: index.html or index.php (which is the home page, or page #1):

<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style.css"/></head> <body class="page-1"> <!-- assign class to "body" for the page --> <div id="nav">	<ul>		<li class="nav-menu-1"><a href="index.html">Home</a></li>  <!-- assign class to each "li" nav menu -->		<li class="nav-menu-2"><a href="about.html">About</a></li>	</ul></div> </body></html>

about.html or about.php (page #2):

<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style.css"/></head> <body class="page-2"> <!-- assign class to "body" for the page --> <div id="nav">	<ul>		<li class="nav-menu-1"><a href="index.html">Home</a></li>  <!-- assign class to each "li" nav menu -->		<li class="nav-menu-2"><a href="about.html">About</a></li>	</ul></div> </body></html>

style.css:

#nav ul {	margin: 0;	padding: 0;	list-style: none;} #nav a {	display: block;	padding: 5px;	text-decoration: none;	color: #000000;} #nav li {	float: left;} #nav li:hover {	background-color: pink;} .page-1 .nav-menu-1,.page-2 .nav-menu-2 {	background-color: red;}

highlight-selected-tab-for-current-page.zip

Link to post
Share on other sites

I just create a class, for example; #{DIV ID} .selected {background-color: #FF0000;} then in the HTML,<div id="{DIV ID}" class="selected"></div>

Link to post
Share on other sites

Depends if your website nav is dynamic as in a CMS like your link (wordpress) or static html, where nav is placed in indivual pages manually Wordpress uses a class 'current_page_item' to identify current menu link for current page.

header nav ul li a:hover, header nav ul li.current_page_item a { 	background-color: #F30908;}

static site;You would just use the same principle as already mentioned apply class to identify it as active (to current page)

<ul class="menu"><li><a href="home.htm">Home</a></li><li><a href="about.htm">About</a></li><li class="active"><a href="shows.html">Shows</a></li><li><a href="music.html">Music</a></li><li><a href="gallery.html">Gallery</a></li></ul>

.menu .active a {display:block;  	background-color: #F30908;color:#fff;}

where 'Shows' link will now show with red background, you just have to make sure is placed to the actual shows.html page

Edited by dsonesuk
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...