How to set an Active tab on Navigation bar?

Scorpion Ghost · Feb 8, 2014

I tried doing it myself, but everything i attempted failed...

Basically i just finished installing and styling a 4-level drop-down navigation bar. It's the most complex CSS/HTML i've done until now. But i did ok and it didn't take too long either, which is good...

The one thing i didn't manage to do is set an Active state for the tabs. So for example if a user is on the Home Page of the blog, i want the "Home Page" tab on the nav bar to have a different effect than the rest of them...

p.s I don't particularly care about doing it for the drop-down tabs (unless it's simple). I just want the first level tabs to have an active state.

Here are my codes (I've highlighted all the First Level Tabs in Red):

HTML:

Code:

  [B] <div id="menu">[/B]

  [B]<ul class="level1">

[/B]

    [B][COLOR=#ff0000]<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>[/COLOR]

[/B]

    [COLOR=#ff0000][B]<li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]
[/COLOR]
[COLOR=#ff0000][B] <!--[if lte IE 6]><table><tr><td><![endif]-->[/B][/COLOR]

  [B]<ul class="level2">[/B]

  [B]<li><a href="#url">Email</a></li>[/B]

  [B]<li><a href="#url">Telephone</a></li>[/B]
  [B]<li><a href="#url">Online Form</a></li>[/B]

  [B]<li><a href="#url">Snail Mail Address</a></li>[/B]

[B]</ul>[/B]
  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
[/B]

    [COLOR=#ff0000][B]<li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]
[/COLOR]
[COLOR=#ff0000][B]<!--[if lte IE 6]><table><tr><td><![endif]-->[/B][/COLOR]

  [B]<ul class="level2">[/B]

    [B]<li><a href="#url">Ski Hire Facilities</a></li>[/B]
    [B]<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]
  [B] <!--[if lte IE 6]><table><tr><td><![endif]-->[/B]
  [B]<ul class="level3">[/B]
  [B]<li><a href="#url">Beginners Slopes</a></li>[/B]
  [B]<li><a href="#url">Intermediate Slopes</a></li>[/B]
    [B]<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]
  [B] <!--[if lte IE 6]><table><tr><td><![endif]-->[/B]
  [B]<ul class="level4">[/B]
  [B]<li><a href="#url">Local</a></li>[/B]
  [B]<li><a href="#url">Nearby</a></li>[/B]
  [B]<li><a href="#url">With instructor</a></li>[/B]
  [B]<li><a href="#url">Snow boarding</a></li>[/B]
  [B]</ul>[/B]
  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>[/B]
    [B]<li><a href="#url">Expert</a></li>[/B]
    [B]</ul>[/B]

  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>[/B]
    [B]<li><a href="#url">Night Life</a></li>[/B]
    [B]<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]

    [B]<!--[if lte IE 6]><table><tr><td><![endif]-->[/B]
  [B]<ul class="level3">[/B]
    [B]<li><a href="#url">Snow Hotel</a></li>[/B]

  [B]<li><a href="#url">The Snowman</a></li>[/B]
  [B]<li><a href="#url">Ice Cavern</a></li>[/B]
  [B]<li><a href="#url">Ski Inn</a></li>[/B]
    [B]</ul>[/B]

  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>[/B]
    [B]<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]

    [B] <!--[if lte IE 6]><table><tr><td><![endif]-->[/B]
  [B]<ul class="level3">[/B]
    [B]<li><a href="#url">From Airport</a></li>[/B]
  [B]<li><a href="#url">In Resort</a></li>[/B]
  [B]<li><a href="#url">Multiple Resorts</a></li>[/B]

    [B]</ul>[/B]
  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>[/B]
  [B]</ul>[/B]
  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
[/B]

    [COLOR=#ff0000][B]<li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]
[/COLOR]
[COLOR=#ff0000][B] <!--[if lte IE 6]><table><tr><td><![endif]-->[/B][/COLOR]

  [B]<ul class="level2">[/B]
  [B]<li><a href="#url">Where to go</a></li>[/B]

  [B]<li><a href="#url">What to do</a></li>[/B]
  [B]<li><a href="#url">Places of interest</a></li>[/B]

  [B]<li><a href="#url">National parks & Museums</a></li>[/B]
  [B]</ul>[/B]
  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
[/B]

    [COLOR=#ff0000][B]<li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]
[/COLOR]
[COLOR=#ff0000][B]<!--[if lte IE 6]><table><tr><td><![endif]-->[/B][/COLOR]

  [B]<ul class="level2">[/B]

  [B]<li><a href="#url">Money Exchange</a></li>[/B]
  [B]<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]

  [B] <!--[if lte IE 6]><table><tr><td><![endif]-->[/B]

  [B]<ul class="level3">[/B]
  [B]<li><a href="#url">Lift Passes</a></li>[/B]
  [B]<li><a href="#url">Insurance</a></li>[/B]
  [B]<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]
  [B] <!--[if lte IE 6]><table><tr><td><![endif]-->[/B]
  [B]<ul class="level4">[/B]
  [B]<li><a href="#url">Boots</a></li>[/B]
  [B]<li><a href="#url">Skis</a></li>[/B]
  [B]<li><a href="#url">Ski Wear</a></li>[/B]
  [B]<li><a href="#url">Goggles</a></li>[/B]
  [B]</ul>[/B]
  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>[/B]
  [B]<li><a href="#url">Ski Schools</a></li>[/B]

  [B]<li><a href="#url">Snow Report</a></li>[/B]
  [B]</ul>[/B]
  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>[/B]
  [B]<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->[/B]

  [B] <!--[if lte IE 6]><table><tr><td><![endif]-->[/B]
  [B]<ul class="level3">[/B]
  [B]<li><a href="#url">Austrian</a></li>[/B]

  [B]<li><a href="#url">German</a></li>[/B]
  [B]<li><a href="#url">French</a></li>[/B]

  [B]<li><a href="#url">English</a></li>[/B]
  [B]</ul>[/B]
  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>[/B]
  [B]<li><a href="#url">Short Breaks</a></li>[/B]

  [B]</ul>[/B]

  [B]<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>[/B]


    [COLOR=#ff0000][B]<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>[/B][/COLOR]

    [B]</ul>[/B]
  [B]</div> [/B]

CSS:

Code:

[B]/* ================================================================ [/B]
  [B]This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at [URL]http://www.cssplay.co.uk/menus/anywidth2.html[/URL][/B]
  [B]Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements.[/B]
  [B]=================================================================== */[/B]
  [B]#menu {width:740px; background: #3aa3d3; height:25px; text-align:center; position:relative; z-index:20;}[/B]
  [B]#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}[/B]
  [B]#menu ul {display:inline-block;}[/B]
  [B]#menu li {margin:0; padding:0; list-style:none;}[/B]
  [B]#menu li {clear:both;float:none;}[/B]
  [B]#menu ul ul {position:absolute; left:-9999px;}[/B]
  [B]#menu ul.level1 {margin:0 auto;}[/B]
  [B]#menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}[/B]
  [B]#menu ul.level1 {background:#3aa3d3;}[/B]
  [B]#menu ul.level2 {background:#ae4621;}[/B]
  [B]#menu ul.level3 {background:#c98b14;}[/B]
  [B]#menu ul.level4 {background:#9f690e;}[/B]
  [B]#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/[/B]
  [B]#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 15px 0 15px;outline:none;}[/B]
  [B]#menu ul.level1 li.level1-li a.level1-a {float:left;}[/B]
  [B]#menu ul li:hover > ul {visibility:visible; left:0; top:25px;}[/B]
  [B]#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}[/B]
  [B]#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}[/B]
  [B]#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}[/B]
  [B]#menu a:hover ul {left:0; top:23px;}[/B]
  [B]#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}[/B]
  [B]#menu li.left ul a {text-align:right; padding:0 15px 0 15px;}[/B]
  [B]#menu a:hover a:hover ul,[/B]
  [B]#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}[/B]
  [B]#menu li.left a:hover a:hover ul,[/B]
  [B]#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}[/B]
  [B]#menu a:hover ul ul,[/B]
  [B]#menu a:hover a:hover ul ul {left:-9999px;}[/B]
  [B]#menu li.left a:hover ul ul,[/B]
  [B]#menu li.left a:hover a:hover ul ul {left:-9999px;}[/B]
  [B]#menu li a.fly {font-variant: small-caps;}[/B]
  [B]#menu li.left ul a.fly {font-variant: small-caps;}[/B]
  [B]#menu li a:hover,[/B]
  [B]#menu li a.fly:hover {background-color:#555555;}[/B]
  [B]#menu li:hover > a,[/B]
  [B]#menu ul li:hover > a.fly {background-color:#555555;}[/B]
  [B]#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}[/B]
  [B]#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}[/B]
  [B]#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}[/B]
  [B]#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}[/B]
  [B]#menu ul, .tabs-outer {overflow:visible;}[/B]
  [B]#menu li a {border: none;}[/B]
  [B].main-outer {z-index:10;}/*for IE*/[/B]
  [B].tabs-outer {z-index:11;}/*for IE*/[/B]

If anyone could help me out i'd appreciate it. Thanks

artizhay · Feb 8, 2014

Why do you have so many conditional statements? A correct dropdown menu should work as follows:

HTML:

<ul>
    <li>
        <a>Link 1</a>
    </li>
    <li>
        <a>Link 2</a>
        <ul>
            <li>
                <a>Link 2 Sublink 1</a>
            </li>
        </ul>
    </li>
</ul>

Anyway, why wouldn't you just do:

HTML:

#menu ul li.active { 
    /* something different */
    background:#ffd140;
}

Top-level active-state <li> element would be:

HTML:

<li class="level1-li active">

Scorpion Ghost · Feb 8, 2014

artizhay said:
Why do you have so many conditional statements? A correct dropdown menu should work as follows:

HTML:

<ul> <li> <a>Link 1</a> </li> <li> <a>Link 2</a> <ul> <li> <a>Link 2 Sublink 1</a> </li> </ul> </li> </ul>

Honestly, i don't know... I didn't create these codes, i got them from elsewhere and then through trial and error learned how to fix and arrange and rearrange everything... Except the Active State for Tabs :/

artizhay said:
Anyway, why wouldn't you just do:

HTML:

#menu ul li.active { /* something different */ background:#ffd140; }

Top-level active-state <li> element would be:

HTML:

<li class="level1-li active">

Do you mean i should go to each Level 1 code and make the class="level1-li active"

And then insert...

HTML:

#menu ul li.active { 
    /* something different */
    background:#ffd140;
}

Into the CSS?

artizhay · Feb 8, 2014

Scorpion Ghost said:
Honestly, i don't know... I didn't create these codes, i got them from elsewhere and then through trial and error learned how to fix and arrange and rearrange everything... Except the Active State for Tabs :/

Do you mean i should go to each Level 1 code and make the class="level1-li active"

And then insert...

HTML:

#menu ul li.active { /* something different */ background:#ffd140; }

Into the CSS?

You should take a look at the menu I did at http://www.duffieldhouse.com/ and maybe copy the code from there. Alternatively, CSS3 Menu is quite fantastic.

But you would only add " active" on the <li> element that is currently active. Remember that elements can have more than one class. So if all the top-level elements are of class "level1-li", the active one needs "active" as well, so adding a space and making it "level1-li active" applies both "level1-li" and "active" to the element. However, "active" will override any corresponding properties in "level1-li" because it's placed after "level1-li" in "level1-li active."

So if the default for "level1-li" is to have a white background and "active" sets a gold background, for example, then "active" will override the background for "level1-li" and make it gold for that element, while the rest will remain white.

Scorpion Ghost · Feb 8, 2014

That menu looks nice, although when any drop-down tab is hovered over the Entire NavBar changes position... It goes lower and a bit to the left and isn't even completely visible at this point... I'm no expert, but something looks wrong with that picture..

Ok, about the active thing.. I'm probably gonna sound stupid now, but here goes nothing.

Do you mean i should give each top-level element a unique addition to the class=

So for example:

"level1-li active1"
"level1-li active2"
"level1-li active3"
"level1-li active4"
"level1-li active5"

And then in the CSS do something like:

#menu ul li.active1 .active2 .active3 .active4 acrive5 {
/* something different */
background:#ffd140;
}

Or maybe they should be separated by commas... Or maybe insert one CSS per tab, like so:

#menu ul li.active1 {
/* something different */
background:#ffd140;
}

Then the second:

#menu ul li.active2 {
/* something different */
background:#ffd140;
}

And so on and so forth...???

Jeez, i feel like i really didn't get you... :headache:

artizhay · Feb 8, 2014

Oh...silly Internet Explorer. >.< I'll have to get someone to look at that in the morning.

You only need one active class.
So say you have a page index.html and a page contact.html.
On index.html you'll have:

HTML:

<li class="level1-li active"><a>Home</a></li>
<li class="level1-li"><a>Contact</a></li>

On contact.html you'll have:

HTML:

<li class="level1-li"><a>Home</a></li>
<li class="level1-li active"><a>Contact</a></li>

The special element CSS will apply only to the <li> element with "active" class on each page.

ChrisX · Feb 8, 2014

From what I see your main issue is adding the active state to tabs that are open, which can be done via javascript or server side. For example using jquery:

Code:

var path = window.location.pathname;    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);


    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });

Scorpion Ghost · Feb 8, 2014

artizhay said:
Oh...silly Internet Explorer. >.< I'll have to get someone to look at that in the morning.

You only need one active class.
So say you have a page index.html and a page contact.html.
On index.html you'll have:

HTML:

<li class="level1-li active"><a>Home</a></li> <li class="level1-li"><a>Contact</a></li>

On contact.html you'll have:

HTML:

<li class="level1-li"><a>Home</a></li> <li class="level1-li active"><a>Contact</a></li>

The special element CSS will apply only to the <li> element with "active" class on each page.

Ok, i don't know if it's because English is my third language, or because im working on a blogger blog and you're talking about doing something different where you may be able to access each page's HTML, i don't know... But i have no idea what to do...

I already tried what you said, like this:

<li class="level1-li active"><a class="level1-a active" href="#url" id="nav-home">Home Page</a></li>

<li class="level1-li active"><a class="level1-a fly" href="#url">Contact Us</a>


And then in CSS i put:
#menu ul li.active {
background:#ffd140;
color: #680000
}

And what happened was that both the Home Page and the Contact Us tabs took the same attributes from the CSS.

Scorpion Ghost · Feb 8, 2014

ChrisX said:
From what I see your main issue is adding the active state to tabs that are open, which can be done via javascript or server side. For example using jquery:

Code:

var path = window.location.pathname; path = path.replace(/\/$/, ""); path = decodeURIComponent(path); $(".nav a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('active'); } });

Yeah, that's my main issue...

But with this code, where do i put it? What changes (if any) do i need to do to it? What changes do i need to do to my HTML codes of the nav bar in order for the code you gave me to affect the right things at the right time?

Sorry, but im a noob in all this, especially the further away we move from CSS the more lost i am... And remember, i work on a Blogger Blog, so i don't have FTP's and PHP's and black magic and harry potters type things

ChrisX · Feb 8, 2014

The code basically loops through all links inside a navbar, which has class="nav". Assumng each link is in its own list item, it adds class="active" to nearest <li> element.

You would replace ".nav a" with whatever class your navigation has i.e. ".navigation a" and that's it. Place the code in your javascript functions file or at the end of your document like so:

Code:

<script type="text/javascript">
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);


    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
</script>

Make sure you're including jQuery before this. If anything is not working, inspect element and check the console for error messages

Scorpion Ghost · Feb 8, 2014

ChrisX said:
The code basically loops through all links inside a navbar, which has class="nav". Assumng each link is in its own list item, it adds class="active" to nearest <li> element.

You would replace ".nav a" with whatever class your navigation has i.e. ".navigation a" and that's it. Place the code in your javascript functions file or at the end of your document like so:

Code:

<script type="text/javascript"> var path = window.location.pathname; path = path.replace(/\/$/, ""); path = decodeURIComponent(path); $(".nav a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('active'); } }); </script>

Make sure you're including jQuery before this. If anything is not working, inspect element and check the console for error messages

I tried, it's just not possible...

I replaced .nav a with .level1-li, which is the class= for my level-one tabs. I tried inserting the code above </head> in my template, then i tried above </body>, it didn't work...

I also see that there is no CSS in the code you gave me, so i thought maybe because the code adds "active", maybe i should put:

.active {
background: #680000;
}

In my blog's CSS section... But that didn't work either...

Thanks for trying to help guys, but i can't do it, i don't want anyone to spoon-feed me but it has happened before on BHW that i didn't manage to solve something, and then a month or two later someone came and responded and solved my issue. So i'll be checking this thread out and i hope someone can tell me how to fix this...

Sometimes i hate this website/blogging thing. The smallest thing becomes a problem... You know, it's no problem to implement autoscrolls and insert 2-3 types of commenting systems in the same blog, and all kinds of difficult things and floating sharing buttons and stuff... But no, i gotta waste hours and hours on making a fucking tab have an active state and managing to get stupid facebook to display the correct thumbnail picture when a post is shared on it... ufffff

artizhay · Feb 8, 2014

Revert back to your original structure with a div with ID "menu", a ul with class "level1", and the lis with class "level1-li" just as in your original post.

This javascript should work:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function() {
    /* path will equal the current file, i.e. "index.html", "index", "index.php", etc. */
    var path = decodeURIComponent(window.location.pathname.replace(/\/$/, ""));
    path = path.substr(path.lastIndexOf("/") + 1);

    /* loop through each top-level li since you only want to apply this to the main links */
    $("div#menu ul.level1 li.level1-li").each(function () {
        /* href will equal the href value of the li's first link, which is the main link */
        var href = $(this).children("a").first().attr("href");
        if (href.indexOf("/") !== -1) {
             href = href.substr(href.lastIndexOf("/") + 1);
        }

        /* if the current path (path) equals the link's href (href), then set the li to the active CSS state */
        if (path === href) {
            $(this).addClass("active");
            
            /* stop looping through any more li's since we found the one that is active */
            return false;
        }
    });
});
</script>

Note that your original HTML has all the links set to "#url", so those will need to be updated else this wouldn't work of course.

Scorpion Ghost · Feb 9, 2014

artizhay said:

Revert back to your original structure with a div with ID "menu", a ul with class "level1", and the lis with class "level1-li" just as in your original post.

This javascript should work:

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function() {
    /* path will equal the current file, i.e. "index.html", "index", "index.php", etc. */
    var path = decodeURIComponent(window.location.pathname.replace(/\/$/, ""));
    path = path.substr(path.lastIndexOf("/") + 1);

    /* loop through each top-level li since you only want to apply this to the main links */
    $("div#menu ul.level1 li.level1-li").each(function () {
        /* href will equal the href value of the li's first link, which is the main link */
        var href = $(this).children("a").first().attr("href");
        if (href.indexOf("/") !== -1) {
             href = href.substr(href.lastIndexOf("/") + 1);
        }

        /* if the current path (path) equals the link's href (href), then set the li to the active CSS state */
        if (path === href) {
            $(this).addClass("active");
            
            /* stop looping through any more li's since we found the one that is active */
            return false;
        }
    });
});
</script>

Note that your original HTML has all the links set to "#url", so those will need to be updated else this wouldn't work of course.

Ok, i can see you spent some time making this, and i really appreciate it. And i wish i could say i did it and it's done.. But i can't...

So i'm just gonna ask.

Where should i put the code you gave me? In the HTML of my blog above the </head> tag? Or above the </body> tag? Or in the Layout in an HTML/JavaScript Gadget? Where should the code you give me be pasted?

And then after that, where do i insert the CSS codes for the active state? I mean, do i insert the CSS codes i want the active tab to have within the code you gave me, or in my blog's HTML? And then if it's in my blog's HTML, what's the opening tag i should use for it? Or if it's in the code you gave me, then where in the code?

Shit, sorry man... I wish i didn't have to ask you and waste more of your time...

artizhay · Feb 9, 2014

Scorpion Ghost said:
Ok, i can see you spent some time making this, and i really appreciate it. And i wish i could say i did it and it's done.. But i can't...

So i'm just gonna ask.

Where should i put the code you gave me? In the HTML of my blog above the </head> tag? Or above the </body> tag? Or in the Layout in an HTML/JavaScript Gadget? Where should the code you give me be pasted?

And then after that, where do i insert the CSS codes for the active state? I mean, do i insert the CSS codes i want the active tab to have within the code you gave me, or in my blog's HTML? And then if it's in my blog's HTML, what's the opening tag i should use for it? Or if it's in the code you gave me, then where in the code?

Shit, sorry man... I wish i didn't have to ask you and waste more of your time...

The javascript goes above the </head> tag. If you already have jQuery on your site (view your source and do a search for "jquery" and see if any .js files appear), then you can leave out the first line of the code that includes the jquery.min.js files.

The CSS goes where the rest of your CSS from the original post is located.

Scorpion Ghost · Feb 9, 2014

artizhay said:
The javascript goes above the </head> tag. If you already have jQuery on your site (view your source and do a search for "jquery" and see if any .js files appear), then you can leave out the first line of the code that includes the jquery.min.js files.

The CSS goes where the rest of your CSS from the original post is located.

Holy shit, alright, it worked, sort of...

It worked only for the "Home Page" tab. It won't affect any of the other tabs though.

And also for the Home Page tab, the "background:" CSS works, but the "color:" part won't work (i tried inserting !important for color, but it still didn't work).

Here's the CSS i used:

.active {background:#0059eb; color: #ffffff !important;}

I also tried using .active a as the opening tag in hopes that the color tag will take effect, but it didn't work.

Here is my site by the way, so that you can see how it works now...
tinyurl(dot)com/lgo75eh

artizhay · Feb 9, 2014

Scorpion Ghost said:
Holy shit, alright, it worked, sort of...

It worked only for the "Home Page" tab. It won't affect any of the other tabs though.

And also for the Home Page tab, the "background:" CSS works, but the "color:" part won't work (i tried inserting !important for color, but it still didn't work).

Here's the CSS i used:

.active {background:#0059eb; color: #ffffff !important;}

I also tried using .active a as the opening tag in hopes that the color tag will take effect, but it didn't work.

Here is my site by the way, so that you can see how it works now...
tinyurl(dot)com/lgo75eh

Okay. Issue is because the path variable isn't including the ?max-result etc querystring and of course doesn't match the href. Just an issue with the javascript.

Also, I suppose it would have been better on my part to apply the "active" class to the <a> rather than the <li>. This is why your colors aren't working.

I'll reply in a bit with fixed javascript.

artizhay · Feb 9, 2014

See if this works.

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    /* path will equal the current file, i.e. "index.html", "index", "index.php", etc. */
    var path = decodeURIComponent(window.location.href);
    path = path.substr(path.lastIndexOf("/") + 1);

    /* loop through each top-level li since you only want to apply this to the main links */
    $("div#menu ul.level1 li.level1-li").each(function () {
        /* href will equal the href value of the li's first link, which is the main link */
        var childLink = $(this).children("a").first();
        var href = $(childLink).attr("href");
        if (href.indexOf("/") !== -1) {
             href = href.substr(href.lastIndexOf("/") + 1);
        }

        /* if the current path (path) equals the link's href (href), then set the li to the active CSS state */
        if (path === href) {
            $(childLink).addClass("active");
            
             /* stop looping through any more li's since we found the one that is active */
            return false;
        }
    });
});
</script>

Scorpion Ghost · Feb 9, 2014

artizhay said:

See if this works.

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    /* path will equal the current file, i.e. "index.html", "index", "index.php", etc. */
    var path = decodeURIComponent(window.location.href);
    path = path.substr(path.lastIndexOf("/") + 1);

    /* loop through each top-level li since you only want to apply this to the main links */
    $("div#menu ul.level1 li.level1-li").each(function () {
        /* href will equal the href value of the li's first link, which is the main link */
        var childLink = $(this).children("a").first();
        var href = $(childLink).attr("href");
        if (href.indexOf("/") !== -1) {
             href = href.substr(href.lastIndexOf("/") + 1);
        }

        /* if the current path (path) equals the link's href (href), then set the li to the active CSS state */
        if (path === href) {
            $(childLink).addClass("active");
            
             /* stop looping through any more li's since we found the one that is active */
            return false;
        }
    });
});
</script>

Magic...

It works now, perfectly...

At first the background color wasn't working but i inserted "!important" to the code in CSS and poof, done.

Brother, i can't tell you how grateful i am for this.

What can i do for you? I can send you followers or likes or subscribers for whatever youtube/twitter/facebook/stumbleupon etc etc...

I can put something on the blog in the sidebar and send a little traffic your way, and it will be a dofo1low link too.. Although, it won't carry much weight considering the blog is PR 0

I can promote something for you if you want i got a few facebook and twitter accounts, and then after i share your link on my accounts i'll throw in some retweets and shares from traffic exchange sites...

I got a humor fan page on facebook with 850 likes, if you got something i can also promote it there...

I wanna pay you back somehow... Tell me what can i do for you??

How to set an Active tab on Navigation bar?

Elite Member

BANNED

Elite Member

BANNED

Elite Member

BANNED

Regular Member

Elite Member

Elite Member

Regular Member

Elite Member

BANNED

Elite Member

BANNED

Elite Member

BANNED

BANNED

Elite Member

Main Menu

Marketplace

Making Money

BlackHat World