Highlight selected menu item when on page

Question

so this has been driving me crazy all day, all i want is simply to highlight the current li when your on the corresponding page,

excuse the mess but heres my code,

HTML

<div id="layout">
        <!-- Menu toggle -->
        <a href="#menu" id="menuLink" class="menu-link active">
            <span></span>
        </a>
        <div id="menu">
            <div class="pure-menu pure-menu-open">
                <a class="pure-menu-heading" href="pure.html">Nathaniel Harman</a>
                <ul class="nav">
                    <li>
                        <a href="software.html">
                            <span class="icon-macintosh" style="vertical-align: middle"></span>SOFTWARE</a>
                    </li>
                    <li>
                        <a href="frameworks.html">
                            <span class="icon-painting-roll-streamline" style="vertical-align: middle"></span>FRAMEWORKS</a>
                    </li>
                    <li>
                        <a href="lang.html">
                            <span class="icon-ink-pen-streamline" style="vertical-align: middle"></span>LANGUAGES</a>
                    </li>
                    <li>
                        <a href="projects.html">
                            <span class="icon-crop-streamline" style="vertical-align: middle"></span>PROJECTS</a>
                    </li>
                    <li>
                        <a href="exp.html">
                            <span class="icon-monocle-mustache-streamline" style="vertical-align: middle"></span>EXPERINECE</a>
                    </li>
                    <li>
                        <a href="production.html">
                            <span class="icon-design-graphic-tablet-streamline-tablet" style="vertical-align: middle"></span>IN PRODUCTION</a>
                    </li>
                    <li>
                        <a href="development.html">
                            <span class="icon-barista-coffee-espresso-streamline" style="vertical-align: middle"></span>IN DEVELOPMENT</a>
                    </li>
                    <li>
                        <a href="contact.html">
                            <span class="icon-map-streamline-user" style="vertical-align: middle"></span>CONTACT</a>
                    </li>
                </ul>

CSS

#menu {
    margin-left: -200px; /* "#menu" width */
    width: 200px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000; /* so the menu or its navicon stays above all content */
    background: #191818;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    #menu a {
        color: #999;
        border: none;
        padding: 0.6em 0 0.6em 0.6em;
    }


     #menu .pure-menu,
     #menu .pure-menu ul {
        border: none;
        background: transparent;
    }


    #menu .pure-menu ul,
    #menu .pure-menu .menu-item-divided {
        border-top: 1px solid #333;
    }

        #menu .pure-menu li a:hover,
        #menu .pure-menu li a:focus,
        #menu .pure-menu span:hover{
            background: #333;
            color:#fff;
        }


    #menu .pure-menu-selected,
    #menu .pure-menu-heading {
        background: #909090;
    }
           #menu .pure-menu-selected a {
            color: #fff;
        }

    #menu .pure-menu-heading {
        font-size: 110%;
        color: #fff;
        margin: 0;
    }

.menu-link {
    position: fixed;
    display: block; /* show this only on small screens */
    top: 0;
    left: 0; /* "#menu width" */
    background: #000;
    background: rgba(0,0,0,0.7);
    font-size: 10px; /* change this value to increase/decrease button size */
    z-index: 10;
    width: 2em;
    height: auto;
    padding: 2.1em 1.6em;
}

    .menu-link:hover,
    .menu-link:focus {
        background: #000;

    }

    .menu-link span {
        position: relative;
        display: block;
    }

    .menu-link span,
    .menu-link span:before,
    .menu-link span:after {
        background-color: #fff;
        width: 100%;
        height: 0.2em;
    }

        .menu-link span:before,
        .menu-link span:after {
            position: absolute;
            margin-top: -0.6em;
            content: " ";
        }

        .menu-link span:after {
            margin-top: 0.6em;
        }

any help would be great i can't figure out where i'm going wrong, as you can see i'm using the Pure CSS framework

Answer 1

You could do it dynamically by adding this on DOM ready:

$('.nav li').filter(function(){
   var page = $(this).children('a').attr('href');
   var url = window.location.pathname
   return (url===page);
}).addClass('pure-menu-selected');

You may need to tweak the url variable depending on your setup.

Here's a quick example: http://jsfiddle.net/2yLY8/

Answer 2

you'll need to ID and class each of your LI's:

<li id="item1" class="menuitemOff">

Then in your CSS, create "off" state and "on" state for your LI's. Set the correct state for each.

You'll need the IDs if you want to change them later with JavaScript.

Answer 3

The simplest way to do this is create a class, let's say current, and assign it to that li element on each individual page. For example, your software.html file would look like this:

<li class="current">
    <a href="software.html">
        <span ...></span>SOFTWARE</a>
</li>
<li>
    <a href="frameworks.html">
        <span ...></span>FRAMEWORKS</a>
</li>

While your frameworks.html file would look like this:

<li>
    <a href="software.html">
        <span ...></span>SOFTWARE</a>
</li>
<li class="current">
    <a href="frameworks.html">
        <span ...></span>FRAMEWORKS</a>
</li>

Then just style .current accordingly