SO - 19943064

by Arun P Johny

HTML

<div id="wrapper">
    <div id="header">
        <img src="img/logo.png">
    </div>
    <!--header END-->
    <div id="nav">
        <ul>
            <li><a href="index.php" class="select">Profil</a>
            </li>
            <li><a href="referencer.php" class="pushlinks" class="select">Referencer</a>
            </li>
            <li><a href="projekter.php" class="pushlinks" class="select">Projekter</a>
            </li>
            <li><a href="galleri.php" class="pushlinks" class="select">Galleri</a>
            </li>
            <li><a href="blog.php" class="pushlinks" class="select">Blog</a>
            </li>
            <li><a href="#" class="pushlogin" class="select">Login</a>
            </li>
        </ul>
    </div>
    <!--nav END-->
    <div id="content"></div>
</div>

CSS

/*RESET*/
 * {
    margin:0px;
    padding:0px;
    border:0;
}
html {
    background:url(../img/grey_bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body {
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
}
#wrapper {
    width:960px;
    margin:0px auto;
}
#header {
    height:140px;
}
#header img {
    margin:35px 0 0 35px;
}
#nav {
    height:51px;
    padding-left:1px;
    font-size:0;
    border-top:4px solid #7a7ab3;
    border-left:4px solid #7a7ab3;
    border-right:4px solid #7a7ab3;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    background: #464674;
    /* Old browsers */
    background: -moz-linear-gradient(top, #464674 0%, #494978 20%, #5a5a8f 70%, #606098 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464674), color-stop(20%, #494978), color-stop(70%, #5a5a8f), color-stop(100%, #606098));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #464674 0%, #494978 20%, #5a5a8f 70%, #606098 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #464674 0%, #494978 20%, #5a5a8f 70%, #606098 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #464674 0%, #494978 20%, #5a5a8f 70%, #606098 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #464674 0%, #494978 20%, #5a5a8f 70%, #606098 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464674', endColorstr='#606098', GradientType=0);
    /* IE6-9 */
}
#nav ul {
    margin:22px 0 0 20px;
}
#nav ul li {
    margin-top:1px;
    display:inline-block;
    list-style:none;
}
#nav ul li a {
    font-size:12px;
    padding:14px 10px 14px 10px;
    text-decoration:none;
    text-transform:uppercase;
    color:rgba(255, 255, 255, 1);
}
.pushlinks {
    margin-left:16px;
}
.pushlogin {
   ...

JavaScript

jQuery(function () {
    var page = location.pathname.split('/').pop();
    page = 'referencer.php'; //hard coded for testing
    $('#nav li a[href="' + page + '"]').addClass('active')
})