Question

On google homepage, if you click the more button, a menu opens below just that button, like this:

How can I do a similar thing with one of the tabs in the navigation bar of my website using css/javascript/jquery?

Edit: To be more specific, I’m wondering how to accomplish the CSS part of this, i.e:

• How to make an up/down arrow graphic show on the tab when the dropdown is toggled. (i.e when toggled, show down arrow, when not, up arrow). (Rather than just putting an <img> i’d rather use a background-image to toggle the arrows)

• How to have the new list pop down below the tab and aligned with it.

Answer 1

This is an example for one way this could be done. Of course, you can experiment with diff methods and stuff, but this is a basic working solution.

A dropdown element to be toggled by clicking a link is pretty good.

<div id="topBar">
    <a href="#" id="more">More
        <span id="arrow">
            <span id="arrdown">&#x25BC;</span>
            <span id="arrup">&#x25B2;</span>
        </span>
    </a>
    <div class="dropdown">
        <a href="#">One</a>
        <a href="#">Two</a>
        <a href="#">Three</a>
    </div>
</div>​

Then you make it toggle with a JS click.

$('#more').click(function() {
    $(this).toggleClass('active');
    $(this).next('.dropdown').toggle();
    return false;
});

$('.dropdown a').click(function() {
    return false;
});

css:

body { background: #fee; font-family: calibri; }
#topBar { text-align: right; background: black; color: white; padding: 5px; }
#topBar a { color: white; text-decoration: none; padding: 5px 7px; }
#topBar a:hover { background: #ddd; color: black; }
#topBar a.active { background: white; color: black; }
.dropdown { display: none; position: absolute; right: 5px; background: white; color: black; }
.dropdown a { display: block; color: black !important; text-decoration: none; padding: 5px 7px; }
.dropdown a:hover { background: #ccc; }
#arrup { display: none; }
#arrow { font-size: 0.6em; }

​

Here’s a live example with CSS: http://jsfiddle.net/ZUPBj/