Pure CSS drop down menu that's mobile friendly?

Kavoir

New member
Joined
Jan 2, 2014
Messages
12
Points
0
I tried to implement this one [URLnf=http://www.htmldog.com/articles/suckerfish/dropdowns/]here[/URLnf] But it seems to be outdated and not quite mobile friendly. Any other options?

I need pure css. No Javascript.
 

Hassan

New member
Joined
Nov 11, 2014
Messages
706
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

New member
Joined
Jan 23, 2015
Messages
34
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.
 

deadmix

New member
Joined
Jul 25, 2013
Messages
35
Points
0
Hello,

You can check this tutorial : [URLnf="http://blueseodesign.com/jquery-tutoriels/creer-menu-responsive-en-jquery/"]Jquery Responsive Mobile Menu[/URLnf]

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

Goodluck
 

paul.1309

New member
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.
 
Newer threads
Replies
8
Views
3,431
Replies
12
Views
4,370
Latest threads
Replies
2
Views
368
Replies
1
Views
366
Replies
4
Views
1,888
Replies
3
Views
794
Recommended threads

Referral contests

Referral link for :

Sponsors

Popular tags

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