Pure CSS drop down menu that's mobile friendly?

Kavoir

New member
Joined
Jan 2, 2014
Messages
8
Points
0
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

Well-known member
Registered
Joined
Nov 11, 2014
Messages
433
Points
0
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

Member
Registered
Joined
Jan 23, 2015
Messages
28
Points
0
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.
 

paul.1309

New member
Registered
Joined
Feb 27, 2015
Messages
6
Points
0
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.
 
Older Threads
Replies
11
Views
4,108
Replies
4
Views
2,920
Replies
7
Views
4,300
Newer Threads
Latest Threads
Replies
0
Views
84
Replies
0
Views
53
Replies
0
Views
48
Replies
1
Views
80

Latest postsNew threads

Latest Hosting OffersNew Reviews

Sponsors

Tag Cloud

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top