SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    SitePoint Wizard bronze trophy bluedreamer's Avatar
    Join Date
    Jul 2005
    Location
    Middle England
    Posts
    3,366
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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

  4. #4
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks

  5. #5
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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?

  6. #6
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by noonnope View Post
    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
    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.

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    [...] it's very little effort.
    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

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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 : )

  11. #11
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by noonnope View Post
    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.
    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?

  12. #12
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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?
    my comment and your example don't match 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

    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

    @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 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.

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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 : )

  14. #14
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Some people do those body id's/classes manually because they have static includes.
    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



    Quote Originally Posted by Stomme poes View Post
    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.
    it's not by far a one time write. unless you have sites that are not changing but once or twice a year 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...



    Quote Originally Posted by Stomme poes View Post
    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).
    not really, no. as i said, a medium level user is able to manage. and i remember you are a bit of a programmer



    Quote Originally Posted by Stomme poes View Post
    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 : )
    if it works for you, don't let them tell you otherwise

  15. #15
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by noonnope View Post
    my comment and your example don't match i didn't comment on your method
    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?

  16. #16
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.

    camels++


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •