CSS Navigation states

I know of hover, visited, and focus etc. but I’m looking for one that highlights the current page the user is on…

Am I in the right train of thought here?

So why did you quote me saying “It’s very little effort” and add the snide comment “…and no method” if you weren’t referring to what I had described?

my comment and your example don’t match :slight_smile: i didn’t comment on your method (with which i’m not even familiar), but on dresden_phoenix’s.

productivity! which can be done by anyone. i don’t know what your point is, but i know mine: repetitive tasks means smart coding using loops not manual labour “copy-paste-modify”.

if you find dresden_phoenix’s solution “streamlined and optimised” you are wrong. in so many ways :slight_smile:

as for the level of programming expected in completing the task of automating this process, of repetitive markup code generation using algorithms and loops, i gave you specifically references to spreadsheets and MS Access or OO Base. this system requires medium user knowledge about databases and languages to etl. no programmer training at all :slight_smile:

@Stomme poes: if you have static markup repeating you need to find a way to be more efficient, to automatize the process beyond “copy-paste-modify”. that’s how you keep a job :slight_smile: no need to be more than an advanced user for that.

and efficiency is also a big concern when talking about the division of labour. you may think it’s the back end guy’s job to transform your template in something reusable on every page, but given dresden_phoenix example this will not happen. it’s a division all right, not two people working together.

i don’t use/have/afford a server side programming language support

and use a scripting/query/programming language to generate markup.

Some of us are markup-writers, not programmers.

Esp in cases like mine, where I am building entire static HTML with examples of every possibility, which the back-end guy then inserts into his template, running (usually) PHP to dynamically generate markup. Why? Because I am the front-ender and he is the back-ender. He does the programming. I do the markup and styling. It’s called division of labour.

If he ever actually bothered to learn HTML and CSS and good coding practices etc, I would easily be out of a job, because then he could just do everything. But he’s busy writing programs, so I’m safe for now : )

If you’re using SSI to draw in the menu, but are coding the pages yourself rather than using a CMS of any sort (as I do on most of my sites), there’s no practical alternative. It isn’t really that much of a drag - you end up with one declaration in your CSS that has myriad selector pairs, but apart from that it’s very little effort.

and i remember you are a bit of a programmer

I’m trying, but can’t dedicate enough time to it to get anywhere. Maybe I need a nice bout of unemployment : ) I’d be doing non-stop Perl if that were the case.


Over the years that I’ve been running my websites, I have streamlined and optimised my code and my process, and I am 99% convinced that I am doing it the most efficient way without severely sacrificing the quality of output.

Let’s say that I want to add a new page, and feature it on the menu bar. I have to create the page, and include <body class="newpage">. I then open “menu.htm”, and add <li><a href="newpage.shtml" id="newpage">New page</a></li>. Finally, I open the stylesheet, and add .newpage #newpage, to the list of pairings the precede the ‘current’ declaration.

What method do you use that involves less effort and less work?

i guess you are misreading my comment.

i’m not saying that highlighting the current page the user is on is not good.

i’m saying dresden_phoenix’s solution is not something i would do to make that happen :slight_smile:

first of all, take a little time and read the posts again. you are mixing up two posts in one in order to make an unfair accusation.

first post: when you said “it’s very little effort” you didn’t offer a method, you were defending the OP’s as the only alternative. so when i said “and no method” i was referring to his way, as the only one i was aware of by that time, and the only method in discussion so far. once again, that was no snide comment, just stating the obvious. i couldn’t be referring yours even if i wanted, as you are to reveal one yet at this point.

second post: i’m referring ways to make possible the process of automation, available even w/o mySQL and php. you quote me, but you don’t really present a method, just an action, suggesting automation is not in order and there is little effort to do so. which is not true, considering an action is not a method, but a method is, in this case, a way to automate an action. and i obviously responded: “my comment and your example don’t match”. moreover, i’m telling you crystal clear i’m not familiar with your method (which you still haven’t presented, only mentioned its virtues) and i’m commenting OP’s. that was no snide comment, just stating the obvious, once again.

if you have a beef with me personally, PM me. otherwise, please keep the posts clean :slight_smile:

I feel it’s not only good practice to show users what pages they are currently on, but it should be done almost all the time.

I don’t believe it’s too overly complicated at all, anything that can be done to have a postive effect on the user experience imo should be done.

@dresden_phoenix: your solution gives away the fact you’re using static pages a lot. while clever, i would not ever bother to do something like that. there are too many things to keep track of when changes occur, which is a recipe for disaster, and it means a lot of unnecessary manual labour, html classes and css selectors.

one thought: since those are unique, why class and not id?


Well, that would require altering your HTML a lil.

you’d need to give a class to each of your Navigation elements
<li class=“home”><a href=“#”>Home</a></li>
<li class=“about”><a href=“#”>About</a></li>
<li class=“etc”><a href=“#”>Etc</a></li>

then on each corresponding page you set the same class to the body, for example on the Home page: <body class=“home”>

you can style it

.home .home, .about .about , .ect .ect { currnetnt page highlight styles declarations go here}

hope that helps

This has only just recently been discussed - http://www.sitepoint.com/forums/showthread.php?t=697263

If you search the forums I’m sure you’ll find plenty of other threads discussing this topic.

ssi has control directives: if…else…endif. now, instead having just one source for the nav, i’m sure one can manage to provide one for each page. doing so manually, not a solution. making an automation process, then yes, you can provide unlimited number w/o an visible effort. not that this method is the better thing to do, no, i’m just making a scenario to prove a point, don’t dwell on it :slight_smile:

it’s not by far a one time write. unless you have sites that are not changing but once or twice a year :slight_smile: and when the time of those changes arrive, you need to brace your self. one moment of sipping coffee could make you lose track of what it’s done, what is left to do and how exactly to do it. and when it’s not your work you’re changing…

not really, no. as i said, a medium level user is able to manage. and i remember you are a bit of a programmer :wink:

if it works for you, don’t let them tell you otherwise :wink:

Phoenix’ technique means one sections of CSS and the exact same menu on each page. I don’t personally use his technique because I don’t use Server-Side Includes: I can put the class wherever I want it. Phoenix’ solution is used by those who are stuck with the same menu on every page because their template pulls it. PHP (or whatever) does still have to set the body class or id… so that’s
<body id=“[%somevar%]”> (something like template toolkit looks like that)

Some people do those body id’s/classes manually because they have static includes.

Since it’s a one-time write of menu HTML and a one-time write of CSS, it’s very efficient for those using single instances of those things, pulled to the page as includes.

If you want to have HTML like mine (only a class on the current whoever instead of a class or id on every single menu item) but want to add them in dynamically, you need to know how to program. You need to say “if THIS is the page, then menu item three gets a class of ‘current’”.
So I disagree with

no need to be more than an advanced user for that.

I believe I would have to become a programmer, and likely a good one, to manage the above. Having some little scripty that pulls includes and assembles the page goes better with Phoenix’ technique (though there are plenty of different techniques for that situation and all might be a bit different here and there but ultimately they are all relying on One Menu To Rule Them All sort of thing).

And frankly, if you’re using vim, copy-pasta isn’t work. It’s an eyeblink, taking less time that the original writing of the program would be in the first place. Or so I argue : )

and no method…

even if you are using SSI and even if you are coding the pages w/o using a CMS, these are no reasons why you shouldn’t use any form of automated markup generation that will take care of the tedious and repetitive tasks.

this is one mantra i’ve heard before on this forum: i don’t use/have/afford a server side programming language support, i don’t have a database. so what? you surely can make at least a spreadsheet with the info you have repeating, put that spreadsheet at least in a table in a database, even if it’s MS Access or OO Base and use a scripting/query/programming language to generate markup. in the event of new changes you will have a real way to deal with errors that making mods usually bring with them.

this is the practical alternative. you are using a computer to help you get rid of repetitive tedious tasks. otherwise, we might as well go back to using paper and a pen :slight_smile: