q/22124814/1636522 (3)

by wared

HTML

<ul id="nav">
    <li><a href="index.php">Home</a></li>
    <li><a href="skillsets.php">Skillsets</a></li>
    <li><a href="gallery.php">Gallery</a></li>
    <li><a href="about.php">About</a></li>
    <li><a href="contact.php">Contact</a></li>
</ul>

CSS

body {
    font: normal 16px Arial;
}
#nav {
    list-style: none;
    padding: 0;
}
#nav li {
    display: none;
}
#nav a {
    display: block;
    padding: .5em;
    border-bottom: 1px solid #999;
    text-decoration: none;
}
#nav .top {
    display: list-item;
}
#nav .top a {
    color: red;
}

JavaScript

var page = 'skillsets.php';

!function (href) {
    var item, ul = $('#nav');
    if (href) {
        item = ul.find('a[href*="' + href + '"]');
        $('#nav').prepend(item.length ? item.parent() : [
            '<li>',
                '<a href="404NotFound.php">',
                    '<icon><img src="images/404-icon.png"></icon>404',
                '</a>',
            '</li>'
        ].join(''));
    }
    item = ul.find(':first');
    item.addClass('top');
    item = item.find(':first');
    item.append('<span> +</span>').click(function (e) {
        e.preventDefault();
        $(this).find('span').text(function (i, text) {
            return text === ' +' ? ' -' : ' +';
        });
        $(this).parent().siblings().slideToggle();
    });
}(page);