How to create a dropdown menu like google's 'More' button?


Tags: css

Problem :

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

google screenshot

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.



Solution :

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/


    CSS Howto..

    How to start ordered list from 2 not 1 with w3c validity and IE 6 compatibility?

    How do I center bootstrap's carousel? Not the images, the carousel itself

    How to add a second border around a CSS circle

    How to set min-height for bootstrap container

    How do I display an image over a table cell that's larger than the cell?

    how to set css width equal to length of longest text

    How to center a div tag in a html page without being affected by zooming

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    How to make submit input and text input equally spaced

    css how to set the tr that has a speicifc id

    How to make my

    How can I hide a div completely from HTML DOM?

    JavaScript, AngularJS: How do I know if element is larger than its container?

    How to align multiple columns in bootstrap 3 carousel?

    How to apply a CSS height setting to all child elements?

    HTML Imported text doesn't show line feeds correctly

    How to place a
    to the right of an input field

    How can I give a child element of one parent a higher z-index than another parent?

    How to implement responsive, independently scrolling panes in Bootstrap 3?

    CSS: How to create colsgroup like semantic-ui way

    How to float div up?

    How to remove the white background from Bootstrap carousal?

    HTML CSS How to stop a table cell from expanding

    How can I avoid using too many classes in CSS?

    How to set padding on the container?

    how to change single li element in a menu using lists?

    how to create a pricetag like border around list items

    Do I need to use float:clear to have content show where I want it to show?

    How to get a label under an underlined word in css? [closed]

    Css Tricks - How to align 4 div's