|
Welcome
Guest
|
Register
| Login
|
|
|
| Index | Recent Threads | Unanswered Threads | Who's Online | User List | Help |
Killersites.com Forum
General Web Design
CSS - Styling your pages with Cascading Style Sheets.
Thread: Highlight Current Page Plus!
|
| No member browsing this thread |
|
Thread Status: Active Thread Type: Sticky Thread Total posts in this thread: 8
|
|
| Author |
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
This original article can also be found here on my site. Below I've compiled the three easiest ways to highlight the current page that your on. All three are coded clean and very simple to implement into your own project. The method that you choose to use simply comes down to the project at hand and your prefered coding style. Each are pretty self explanatory, so I'll just let the code explain itself. That's usually the way I learn best anyway! Option #1 Here is a working example. This one is the easiest and most basic of the three options listed. If you have a small site (1 to 5 pages) and your running .html extensions, and/or you don't want or need to use PHP Includes, then this method is the one for you! #nav { width:150px; list-style:none; margin:150px auto; } #nav a { color:black; text-decoration:none; } #nav a:active, #nav a:focus, #nav a:hover { color:red; } a#current { color:red; } a#current:active, a#current:focus, a#current:hover { color:blue; } <body> <ul id="nav"> <li><a href="#" id="current">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </body> Option #2 Here is a working example. If you use, or want to use PHP Includes on your website, then the simple code shone above will not suffice. Therefore, you'll need to get a little more creative and use this method (Option #2) or the next method (Option #3) instead. This method shone here, is usually my code of choice for the job at hand! #nav { width:150px; list-style:none; margin:150px auto; } #nav a { color:black; text-decoration:none; } #nav a:active, #nav a:focus, #nav a:hover { color:red; } #home a#homenav, #about a#aboutnav, #contact a#contactnav { color:red; } #home a#homenav:hover, #about a#aboutnav:hover, #contact a#contactnav:hover { color:blue; /* add :active and :focus styles here also */ } <body id="home"> <!-- the body needs a unique id --> <ul id="nav"> <!-- each anchor needs a unique id --> <li><a href="#" id="homenav">HOME</a></li> <li><a href="#" id="aboutnav">ABOUT</a></li> <li><a href="#" id="contactnav">CONTACT</a></li> </ul> </body> Option #3 Here is a working example. And the final way of going about highlighting the current page's navigation link is to use a bit of PHP. A little explanation: This bit here in bold <?php $pageName = "Home"; ?> (which tells the PHP code which page your currently on) can be placed just about anywhere on the page, that is, as long as it's sitting above the #nav using it. In this case, and partly for simplicity purposes, I just placed it inside the body tag as you can see. However, and unless proven otherwise, I think I like it there! And I'd like to thank Ben Falk and John Beatrice for helping me to get this last one working. #nav { width:150px; list-style:none; margin:150px auto; } #nav a { color:black; text-decoration:none; } #nav a:active, #nav a:focus, #nav a:hover { color:red; } a#current { color:red; } a#current:active, a#current:focus, a#current:hover { color:blue; } <body<?php $pageName = "Home"; ?>> <ul id="nav"> <li><a href="#" <?php if ($pageName=="Home") echo 'id="current"'; ?>>HOME</a></li> <li><a href="#" <?php if ($pageName=="About") echo 'id="current"'; ?>>ABOUT</a></li> <li><a href="#" <?php if ($pageName=="Contact") echo 'id="current"'; ?>>CONTACT</a></li> </ul> </body> ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 8 times, last edit by ewwatson at Nov 7, 2008 1:14:25 PM] |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
Just a really minor edit... In example #3, you placed your PHP code snippet within the body tag, rather than closing the body tag first and then placing the PHP after it. Other than that though, the instructions look very clear and should be easy to follow. <body<?php $pageName = "Home"; ?>>---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
Just a really minor edit... In example #3, you placed your PHP code snippet within the body tag, rather than closing the body tag first and then placing the PHP after it. Other than that though, the instructions look very clear and should be easy to follow. <body<?php $pageName = "Home"; ?>>Hi Ben, No, I placed it there on purpose. Obviously you didn't see it, but I briefly explained my reasoning in Option #3's explanation. But here it is again. "This bit here <?php $pageName = "Home"; ?> (which tells the PHP code which page your currently on) can be placed just about anywhere on the page, that is, as long as it's sitting above the #nav using it. In this case, and partly for simplicity purposes, I just placed it inside the body tag as you can see. However, and unless proven otherwise, I think I like it there!" It works pretty much anywhere you put it. Above the doctype, below it, anywhere in the head section, and anywhere in the body. However, as you can probably guess, it has to be above the #nav in question in order to work. If you place it next to the body tag it moved the "ul" up and tabbed it over (killing my pretty code formatting). However, if you place it directly below the body tag it moves nothing, or anywhere in or above the head section for that matter. So "I believe", it just comes down to pure preference. But, someone might take me up on my "unless proven otherwise" statement - we'll see... ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 1 times, last edit by ewwatson at Nov 5, 2008 1:28:09 PM] |
||
|
|
Wickham
Advanced Member UK Joined: Sep 17, 2007 Post Count: 590 Status: Offline |
Code often works even if it is incorrect and I tend to agree with Ben that it should not be inside the body tag. It's OK in your own sites but as a tutorial it would give beginners the wrong idea. I put similat code at the beginning of the nav div just before the menu "include" file:- <div class="siteNav noborder"> <?php define('THIS_PAGE', 'Home'); include('menu.inc'); ?> </div> ---------------------------------------- Code downloaded to my PC will be deleted in due course. WIN XP SP3; IE7, Firefox 3.0, Opera and Safari for Windows; screen resolution usually 1024x768. IE6 on W98 with 800*600. |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
Code often works even if it is incorrect and I tend to agree with Ben that it should not be inside the body tag. It's OK in your own sites but as a tutorial it would give beginners the wrong idea. I put similat code at the beginning of the nav div just before the menu "include" file:- <div class="siteNav noborder"> <?php define('THIS_PAGE', 'Home'); include('menu.inc'); ?> </div> If it works and it's valid then it purely comes down to coding preference! However, show me proof that it's "wrong", and it's not merely your opinion, and I'll gladly change it!  Edit - and then while your at it, you should go point out to Billy that there is in fact, no alternate content displayed in IE6 or IE7 using his posted method of embedding valid flash (even though it clearly states that it does!) that everyone so freely throws around. Oh wait, no one did that, even though I clearly pointed out that it did not. Oh well, alternate content... that's not very important anyways right...? ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 6 times, last edit by ewwatson at Nov 5, 2008 2:02:56 PM] |
||
|
|
falkencreative
Advanced Member USA Joined: Aug 14, 2007 Post Count: 1129 Status: Offline |
Code often works even if it is incorrect and I tend to agree with Ben that it should not be inside the body tag. It's OK in your own sites but as a tutorial it would give beginners the wrong idea. I put similat code at the beginning of the nav div just before the menu "include" file:- <div class="siteNav noborder"> <?php define('THIS_PAGE', 'Home'); include('menu.inc'); ?> </div> If it works and it's valid then it purely comes down to coding preference! However, show me proof that it's "wrong", and it's not merely your opinion, and I'll gladly change it! Perhaps you are right -- it may be a coding preference thing. I didn't actually see your explanation when I first glanced it over, so sorry about not paying more attention. That said, I would say that if your php tags end up enclosing several lines (for example, in Wickham's PHP example), rather than just one line in which you set the variable, it might make the code more readable if you moved it out of within the body tag as it is now, and less confusing to beginners, in case they were to wonder why the there were two >> closing tags. and then while your at it, you should go point out to Billy that there is in fact, no alternate content displayed in IE6 or IE7... Perhaps you should point this out to him directly, in the thread, rather than mentioning it in a thread that has nothing to do with it and that he may not see? ---------------------------------------- Benjamin Falk | student : designer : developer Twitter: falkencreative |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
That said, I would say that if your php tags end up enclosing several lines (for example, in Wickham's PHP example), rather than just one line in which you set the variable, it might make the code more readable if you moved it out of within the body tag as it is now, and less confusing to beginners, in case they were to wonder why the there were two >> closing tags. First of all, beginners shouldn't and wouldn't be messing with PHP anyways. Once you've graduated to PHP if you don't know what a closing tag is then you've got bigger problems! And two, I understand you guys mean well (after all Ben, you helped me put the PHP part together), but lets be real here! That little tut I just gave above, spells it out more clearly (in the English language that beginners understand) than 99.9% of all others. And three, it's the only one of it's kind (that I'm aware of). That is, all three methods in one place! So lets not nit-pick shall we? I think all the "beginners" are going to be just fine! And four, If you, or a beginner, does not want to place it in the body tag, and wants to place it somewhere else, I gave this person all the information they'll need in order to do so. Which is more than I can say for what Google will spit out on the subject. PS - I did a little digging, and I couldn't find any negative mention of putting PHP in the body tag. After all, everything else gets put in there - so I think it's clean! If I had some JS or an id in there also, then I'd probably move it to directly below the body tag as my second choice. I just don't like putting things above my doctype. And I think the head section is not well suited for it either. Plus, while looking around I see that everyone puts it in all different places. So it's a coding preference is all! ---------------------------------------- Eric :~) Knowledge is Power ---------------------------------------- [Edit 2 times, last edit by ewwatson at Nov 5, 2008 3:11:40 PM] |
||
|
|
ewwatson
Advanced Member United States Joined: Dec 19, 2007 Post Count: 1285 Status: Offline |
...and for good measure! Highlight Current Page With Javascript ---------------------------------------- Eric :~) Knowledge is Power |
||
|
|
|
|
Current timezone is GMT Mar 20, 2010 8:21:46 PM |
