Quick Tutorial: Simple PHP and CSS to Highlight Current Navigation Section
Jul 12, 2009; Category: CSS, Design/Development, Information Architecture, PHP for Designers; Tags: Design/Development, Information Architecture; 11 Comments
Good website navigation not only helps visitors find the information they are looking for, it also tells them where they are on a website. This is especially important in light of the fact that people may arrive anywhere on a website via search or a link from another website. They will appreciate some indication of what section of the website they are in; sort of a “you are here” marker.
Essentially, we want to tell the navigation list that, if the navigation section is ‘X’, then this particular navigation list item should have a “current” class applied to it, which would allow us to style that item to highlight the navigation section. But the last thing we need, if we’re busy and have better things to do, is to edit the navigation on each page individually: every time we add or remove a page or change a navigation item name, we would have to update the navigation on every page.
We can make our lives easier with PHP. Remember, PHP executes on the server: you must upload your files to a PHP-enabled server to see it work. It will not execute on your desktop unless you have a local server set up. But if so, you are way beyond this little tutorial…
A good tutorial very well explained. Big thanks!
great tutorial and exactly what I need, but I”m getting parsing errors, think it has something to do with
<li>
Rob: Note that there should be a double >> enclosing the opening list tags (sometimes people remove one).
Another problem might be no space before “class” in ‘ class=”current”;’
Those are two common errors.
Hi Ray,
great article!!!
i’ve been looking for this kind of simple and logical explanation in many books or on websites!
I’m even following a “small” course for developping with html, css, javascript and php, but to assemble all these languages aren’t easy.
It’s not enough to know the syntaxe use!
What is generally missing is a technique, like you are giving us!
Can you recommand me other articles?
I’m looking for the “architectural” use of php: how php create an htlm page on the client(navigator) and how php includes (for exemple) operate afterwards on the client page and so on.
sorry for my english… it’s not my mother tongue!
regards
Nico
hey! great article thanks!!
Yep, makes sense to me. Thanks for the simple explanation, kept me from having to think of a way to achieve this goal. Timelines are such a pain in the butt, eh?
Cheers
Excellent! Just what I was looking for. Thanks!
Great tutorial it works great!
Thanks!
Thank you for this.
Thanks, This is exactly what i was looking for. Great Tutorial!
This was PERFECT. Thank you!