Goodthing07 Posted June 14, 2013 Share Posted June 14, 2013 Hello, Ive made a navigation bar and want to be able to make it so that the selected page of the navigation stays coloured like on this site for example: http://www.djoneman.net/home/ . Could anybody please help me out and let me know of a simple way to do this please? Thanks for any help! Link to comment Share on other sites More sharing options...
leev18 Posted June 14, 2013 Share Posted June 14, 2013 (edited) 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 June 14, 2013 by leev18 Link to comment Share on other sites More sharing options...
Goodthing07 Posted June 14, 2013 Author Share Posted June 14, 2013 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 comment Share on other sites More sharing options...
leev18 Posted June 14, 2013 Share Posted June 14, 2013 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 comment Share on other sites More sharing options...
Goodthing07 Posted June 15, 2013 Author Share Posted June 15, 2013 I will take a good look at those and see what I come out with. Thanks very much for all your help! Link to comment Share on other sites More sharing options...
MarkT Posted June 16, 2013 Share Posted June 16, 2013 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 comment Share on other sites More sharing options...
dsonesuk Posted June 16, 2013 Share Posted June 16, 2013 (edited) 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 June 16, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now