Question

I am working on a project where I have a horizontal navigation bar with 6 links, 3 of which are part of a sub navigation in the same horizontal bar. The links are represented with icons. I am looking for the easiest way to dynamically change the sub navigation when clicking on one of the main navigation icons.

[ Home - Search ]{ home1 - home2 - home3 }[ Add ]

when search is selected, it changes to:

[ Home - Search ]{ search1 - search2 - search3 }[ Add ]

This is the HTML for the bar currently. The links for the replacement icons have not been produced as it currently breaks the structure.

<nav id="navBar">
    <ul>
        <div id="mainNav">
            <li><a id="activeLink" class="homeLink" href="#">Home<a/></li>
            <li><a class="searchLink" href=#>Search<a/></li>
        </div>
        <div id="subNav">
            <li><a class="feedLink" href=#>Feed<a/></li>            
            <li><a class="messagesLink" href=#>Messages<a/></li>
            <li><a class="connectionsLink" href=#>Connections<a/></li>
        </div>
        <div id="mainNav">
            <li><a class="addLink" href=#>Add<a/></li>
        </div>
    </ul>
</nav>
<nav id="searchBar"></nav>

Any help on this would be greatly appreciated

Answer 1

I don’t know you need to get real clever with it. Just put them together and toggle a .hidden class:

CSS

.hidden {
    display: none;
}

HTML

<nav id="navBar">
    <ul>
        <li id="mainNav">
            <ul>
                <li><a id="activeLink" class="homeLink" href="#">Home</a></li>
                <li><a class="searchLink" href="#">Search</a></li>
            </ul>
        </li>
        <li id="subNav">
            <ul>
                <li><a class="feedLink" href="#">Feed</a></li>            
                <li><a class="messagesLink" href="#">Messages</a></li>
                <li><a class="connectionsLink" href="#">Connections</a></li>
            </ul>
        </li>
        <li id="searchNav" class="hidden">
            <ul>
                <li><a href="#">Search 1</a></li>            
                <li><a href="#">Search 2</a></li>
                <li><a href="#">Search 3</a></li>
            </ul>
        </li>
        <li id="mainNav">
            <ul>
                <li><a class="addLink" href="#">Add</a></li>
            </ul>
        </li>
    </ul>
</nav>

jQuery

$(document).ready(function(){
    var $subnavs = $('#subNav, #searchNav'),
        $search = $('#mainNav .searchLink');

    $search.click(function(){
        $subnavs.toggleClass('hidden');

        return false;
    });
});

http://jsfiddle.net/userdude/eJm2z/1

Note, that horribly ugly menu styling is just for demonstration only…