Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 'active state' for a navigation bar

    Hello!

    I'm quite new to web design and Javascript in particular and I was wondering if somebody could help me to resolve a problem with the navigation bar in a website I am currently working on.

    The navigation bar has 3 main categories and there is an 'active' state so the page currently viewed is shown as grey underline text in the navigation bar. The thing is, I also have sub-categories that are not included in the navigation bar but I'd like to make it so the sub-category page currently being viewed makes the main category to which it is attached showing as 'active' in the navigation bar.

    This is the structure of my site:
    index.html
    contact.thml
    illustration
    index.html
    illustrationproject1.html
    illustrationproject2.html
    illustrationproject3.html
    photography
    index.html
    photography1.html
    photography2.html


    So for example, if I'm in illustrationproject1.html, the Illustration tab in the navigation bar should be on the active state.

    This is the code I have so far:
    Navigation Bar:
    [CODE]
    <ul id="nav">
    <li class="nav_item"><a href="illustration/index.html">Illustration</a></li>
    <li class="nav_item"><a href="photography/index.html">Photography</a></li>
    <li class="nav_item"><a href="design/index.html">Design</a></li>
    <li class="nav_item"><a href="stories/index.html">Stories</a></li>
    <li class="nav_item"><a href="profile.html" title="Profile">Profile</a></li>
    <li class="nav_item"><a href="contact.html" title="Contact">Contact</a></li>
    <li class="nav_item"><a href="links.html" title="Links">Links</a></li>
    </ul>

    [ICODE]

    This is the Javscript for the active state:
    [CODE]
    function setActive() {
    aObj = document.getElementById('nav').getElementsByTagName('a');
    for(i=0;i<aObj.length;i++) {
    if(document.location.href.indexOf(aObj[i].href)>=0) {
    aObj[i].className='active';
    }
    }
    }

    [ICODE]

    So this code is working but I'm just not sure how to apply it to the subcategories as well.
    I can see what I should do, write some "if" statement but I don't enough of Javascript yet for this...

    I hope I explained the problem clear enough!
    Thanks :-)

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,400
    Thanks
    11
    Thanked 595 Times in 575 Posts
    here's how we do it at work:

    first modify the nav table to add extra classes defining sections.

    Code:
    <ul id="nav">
    <li class="nav_item illust"><a href="illustration/index.html">Illustration</a></li>
    <li class="nav_item photo"><a href="photography/index.html">Photography</a></li>
    <li class="nav_item design"><a href="design/index.html">Design</a></li>
    <li class="nav_item stories"><a href="stories/index.html">Stories</a></li>
    <li class="nav_item profile"><a href="profile.html" title="Profile">Profile</a></li>
    <li class="nav_item contact"><a href="contact.html" title="Contact">Contact</a></li>
    <li class="nav_item links"><a href="links.html" title="Links">Links</a></li>
    </ul>
    now edit each and every page (sorry), and add a class to the body tag defining the section, using the same classes as before.
    example:
    Code:
    <body class="illust">
    now make a css stylesheet to modify only the active link (according to body's class):
    Code:
    <style>
    .illust .illust a,
    .photo .photo a,
    .design .design a,
    .stories .stories a,
    .profile .profile a,
    .contact .contact a,
    .links .links a { background-color:yellow; color:blue;  }
    </style>
    that's it.
    now, you won't rely on javascript or brittle file naming conventions to show the active section. You can change the section by editing the body class. Also, don't forget that you can define more than one class per class attrib, so you can even pool your sections together in this manner.

    advantages to not using javascript for this:


    CSS will appear faster than javascript would because styles are typically parsed before the page is shown,
    whereas javascript typically has to wait for everything (or at least the whole page) to load before running.

    CSS also uses less CPU than JS, so you site will be snappier on iPhones and other slow machines.

    There are also about 5% of surfer who disable javascript by default, but CSS use is near 100%, so everyone will see it.
    Last edited by rnd me; 07-26-2009 at 11:22 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a lot, it works super fine!
    I wouldn't have thought about doing it this way but I get it now :-)


  •  

    Tags for this Thread

    Posting Permissions

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