Pure CSS drop down menu that's mobile friendly?

Kavoir · Feb 3, 2015

I tried to implement this one here But it seems to be outdated and not quite mobile friendly. Any other options?

I need pure css. No Javascript.

Hassan · Feb 3, 2015

Building a basic drop down is easy there are three steps

Step 1. HTML Components

Code:

<!-- dropdown container -->
<div class="dropdown">

    <!-- trigger button -->
    <button>Navigate</button>

    <!-- dropdown menu -->
    <ul class="dropdown-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

Step 2. Positioning the Menu

Code:

.dropdown {
    position: relative;

    /** Make it fit tightly around it's children */
    display: inline-block;
}

.dropdown .dropdown-menu {
    position: absolute;

    /**
     * Set the top of the dropdown menu to be positioned 100%
     * from the top of the container, and aligned to the left.
     */
    top: 100%;
    left: 0;

    /** Allow no empty space between this and .dropdown */
    margin: 0;
}

Step 3. Show and hide menu

Code:

/**
 * Apply these styles to .dropdown-menu when user hovers
 * over .dropdown
 */
.dropdown:hover .dropdown-menu {

    /** Show dropdown menu */
    display: block;
}

stanton · Feb 3, 2015

Kavoir said:
I tried to implement this one here But it seems to be outdated and not quite mobile friendly. Any other options?

I need pure css. No Javascript.

Not only out updated but so simple to apply for a web template if you want to build a website with a professional menu. I suggest you try to g00gle mega menu or pure drop down menu CSS, tons of types of these codes on the search results, click and find a suitable one for you.

good luck.

deadmix · Feb 4, 2015

Hello,

You can check this tutorial : Jquery Responsive Mobile Menu

Download the source code and play with it in order to build your own menu items..

Goodluck

paul.1309 · Feb 27, 2015

for me you have to create two set of menu. 1 is for the desktop view and mobile menu. each one will display according to resolution of devise used.

Pure CSS drop down menu that's mobile friendly?

Kavoir

New member

Hassan

Well-known member

stanton

Member

deadmix

Member

paul.1309

New member

Latest posts New threads

Latest posts

New threads

Latest Hosting Offers New Reviews

Latest hosting offers

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud