Javascript/jQuery navigation based on URL path

Question

The following code is a vertical navigation menu in HTML/CSS/Javascript... The look/feel is primarily made with ul/li's and CSS ids/classes... It is also important to mention this nav is an include file...

So here is my problem... Basically, I know this Javascript is a really basic/beginner way to get this to do what I want. I was wondering if there was some jQuery or another way to simplify this code. What needs to happen is that the browser's URL needs to be called and split up so that it recognizes the path and displays the correct NAV and sub-nav depending on which page (or /path) is currently being displayed.

This may help further explain my needs/wants: I want to simplify this code so I don't have to make a ton of different ID's and classes for the LI's and have to write so much javascript. Isn't there a way in jQuery to just find the current page through the URL, and if it is current, I want that part of the included navigation menu to be bold and insert a » or arrow to signify that page is current.

Something like this, but not exactly... Can you provide me something more easily explained...

//$(document).ready(function () {

      //  $('li#current a:eq(0)').html("» " + $('li#current a:eq(0)').html());

    //});

My code is below... I hope there is a way you can help me out! Thanks!

<!-- Left Navigation starts here -->
            <!-- if IE -->
            <div id="IE_nav">
            <!-- endif IE -->
            <div id="left_nav">
                <ul>
                    <a href="http://www.smilesofomaha.com/_dev/general/"><li id="main_nav_1" class="nav_button">MAIN NAV BUTTON</li></a>
                                <li class="sub_nav_box" id="main_1" style="display: none;">
                                    <ul>
                                    <li id="link1" class="not_active"><a href="#LINKHERE"><div id="raquo1" class="raquo"><img src="../../images/pip_arrow.png" border="0"/></div>SUB NAV-ITEM HERE</a></li>
                                    <li id="link2" class="not_active"><a href="#LINKHERE"><div id="raquo2" class="raquo"><img src="../../images/pip_arrow.png" /></div>SUB NAV-ITEM HERE</a></li>
                                    </ul>
                                </li>
                    <a href="http://www.smilesofomaha.com/_dev/cosmetic/"><li id="main_nav_2" class="nav_button">MAIN NAV BUTTON 2</li></a>
                                <li class="sub_nav_box"  id="main_2" style="display: none;">        
                                    <ul>
                                    <li id="link3" class="not_active"><a href="#"><div id="raquo3" class="raquo"><img src="../../images/pip_arrow.png" border="0"/></div>SUB NAV-ITEM HERE</a></li>
                                    <li id="link4" class="not_active"><a href="#"><div id="raquo4" class="raquo"><img src="../../images/pip_arrow.png" border="0"/></div>SUB NAV-ITEM HERE</a></li>
                                    </ul>
                                </li>

<script type="text/javascript">

var url = window.location.href; 
url = url.split('/');

if (url[4] == "MAIN NAV BUTTON 1")
 {
  document.getElementById("main_1").style.display = 'block';
  document.getElementById('main_nav_1').className = 'nav_selected';

    if(url[5] == "URL PATHNAME SUB NAV-ITEM") {
        document.getElementById("link1").className = 'active';
        document.getElementById("raquo1").style.display = 'block';
    }

    if(url[5] == "URL PATHNAME FOR SUB NAV-ITEM") {
        document.getElementById("link2").className = 'active';
        document.getElementById("raquo2").style.display = 'block';
    }
 } 

if (url[4] == "URL PATH FOR MAIN NAV BUTTON 2")
{
  document.getElementById("cd").style.display = 'block';
  document.getElementById('cd_nav').className = 'nav_selected';

    if(url[5] == "URL TO PATHNAME FOR SUB NAV-ITEM") {
        document.getElementById("link3").className = 'active';
        document.getElementById("raquo3").style.display = 'block';
    }


        if(url[5] == "URL TO PATHNAME FOR SUB NAV-ITEM") {
            document.getElementById("link4").className = 'active';
            document.getElementById("raquo4").style.display = 'block';
        }

    }
</script>

user122211 · Accepted Answer · 2011-06-16 03:27:35Z

Assuming I haven't misunderstood you somewhere: you could have jQuery handle the searching for you with selectors.

Assuming your anchor tag contains the actual URL -- it's not clear since you seem to have some incomplete/pseudo-code HTML (e.g. "#", "#LINKHERE" etc) -- you can search against the href directly, e.g.

$("a[href=" + url + "]")

will select an anchor tag with the specified URL.

So assume you have a structure like this:

<ul>
    <li><a href="/apple/oranges/3">Some link</li>
    <li><a href="/apple/banana/4">Another link</li>
</ul>

And you use a selector with your parsed URL:

var parsedUrl = "/apple/orange/3"; // I've used a string here for clarity
var currentAnchor = $("a[href=" + parsedUrl + "]");

Now you have a starting point to apply your css.

Say you want to add in your >> symbol, then:

currentAnchor.text(">>" + currentAnchor.text())

Say you want to add some classes:

currentAnchor.addClass("active");

You can also access other elements relative to this anchor with various selectors, e.g.

currentAnchor.parents("li").css("display", "block");

So you can end up with a generic block of code instead of the giant if monster you have:

var parsedUrl = "/apple/orange/3"; // I've used a string here for clarity
var currentAnchor = $("a[href=" + parsedUrl + "]");
currentAnchor.addClass("active");
currentAnchor.parents("li").css("display", "block");

And you also wouldn't need to reference any element directly by id with this approach.

Assuming this works, I think this is exactly what I am looking for!

Luke The Obscure · Accepted Answer · 2011-06-16 03:33:05Z

1

I realize that this isn't directly answering your question- but maybe an alternative train of thought you might consider.

Consider targeting the active menu item with a body id. It's a little bit cleaner, and you might find it more extensible/maintainable in the long run.

Example HTML:

<body id="home>
...
<ul class="nav"
  <li class="home"><a>Home</a</li>
  <li class="about"><a>About</a</li>
</ul>

CSS:

li.home, li.about {font-weight: normal}
#home li.home, #about li.about {font-weight: bold}

You can use CSS tricks to spoof the ">>" (creating a background image would be the easiest).

answered Jun 16, 2011 at 3:33

Luke The Obscure

1,5243 gold badges20 silver badges36 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2011-06-16 03:13:42Z

0

Keeping the url splitting logic as it is you can use JQuery to find the element and apply css class etc to simplyfy your code. Based on your requirement use appropriate selectors and set the class and other properties to the element.

answered Jun 16, 2011 at 3:13

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

4 Comments

Jason Over a year ago

So what would this look like? Would this avoid me having to make like 20 classes/ids if I had 20 different nav items? (i.e. id=nav1, id=nav2, etc.) That seems really impractical and too heavy.

Jason Over a year ago

//$(document).ready(function () { // $('li#current a:eq(0)').html("» " + $('li#current a:eq(0)').html()); //}); So this above code, doesn't eq() count the # of LI items.. how would I apply this code to my nav...

Jason Over a year ago

The script I posted above works perfect, I just want a way to simplify it with jQuery so that I don't have to have so many random classes & ids

ShankarSangoli Over a year ago

That will simplify your code. I dont know how you have built your navigation so cannot comment much on it.

Liangliang Zheng · Accepted Answer · 2011-06-16 03:41:48Z

That's interesting ~

I have a simple idea for you.. However, I reckon the idea from Luke is my ideal solution

HTML:

<ul id='menu'>
    <li><a href='link1' id='default_item' level='1'>item 1</a></li>
    <li><ul><li>
        <a href='link2' level='2'><div>sub item 1</div></a>
        <a href='link3' level='2'><div>sub item 2</div></a>
        </li></ul>
    </li>
    ...
</ul>

JAVASCRIPT:

var url = window.location.href; 
// changing something link http://www.google.com/search?blabla=foo
// into "search?blabla=foo"
// that is sort-of normalisation
url = url.replace(/^\w+\:\/\/[^\/]+?\//, '', url);

$currA = $('#default_item');
$('#menu').find('a').each(function(){
    // getting the href of current 'a' element
    var lnk = $(this).attr('href');
    // also normalise your href 
    lnk = lnk.replace(/^\w+\:\/\/[^\/]+?\//, '', lnk);

    // well, we get the current a ~!
    if(lnk == url){
        $currA = $(this);
    }
}

if($currA.attr('level') == 1){
    var $li = $currA.parents('li:eq(0)');
} else {
    // manipulating your sub-item
    $currA.addClass('active')
    .find('div').css('display', 'block');

    // getting the level-one li element
    $li = $currA.parents('li:eq(1)');
}

// manipulating your menu items
$li.addClass('nav_selected')
.next().css('display', 'block');

Collectives™ on Stack Overflow

Javascript/jQuery navigation based on URL path

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related