Simple Responsive Drop Down Menu jQuery CSS3

by in , 0

A beauty drop down responsive menu that shows its sub menus with icon symbol using open symbol fonts that allowing you to add more icons as you want. With my previous tutorial, i also show how to create Creating 3-Level Responsive Drop Down Navigation Menu with jQuery and CSS3 as well.
demo-drop-down-menu



Today we would like to show an experimental drop-down menu with jquery and css3 using beautiful symbol fonts. The main idea is to help you to save time for creating menus for website, it have a lot of content and sub-levels. Some sub-level in this menu will be shown in its context and icons. The menu is best use in professional web design that it can be used easily in a responsive layout.
This Responsive Drop Down Navigation Menu using plugin such as:

The Markup Language

The HTML :

01<div id="wrap">
02    <header>
03        <div class="inner relative">
04            <a class="logo" href="http://www.freshdesignweb.com"><img src="images/logo.png" alt="fresh design web"></a>
05            <a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
06            <nav id="navigation">
07                <ul id="main-menu">
08                    <li class="current-menu-item"><a href="http://www.freshdesignweb.com">Home</a></li>
09                    <li class="parent">
10                        <a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Features</a>
11                        <ul class="sub-menu">
12                            <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html"><i class="icon-wrench"></i> Elements</a></li>
13                            <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html"><i class="icon-credit-card"></i>  Pricing Tables</a></li>
14                            <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html"><i class="icon-gift"></i> Icons</a></li>
15                            <li>
16                                <a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
17                                <ul class="sub-menu">
18                                    <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Full Width</a></li>
19                                    <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Left Sidebar</a></li>
20                                    <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Right Sidebar</a></li>
21                                    <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Double Sidebar</a></li>
22                                </ul>
23                            </li>
24                        </ul>
25                    </li>
26                    <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Portfolio</a></li>
27                    <li class="parent">
28                        <a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Blog</a>
29                        <ul class="sub-menu">
30                            <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Large Image</a></li>
31                            <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Medium Image</a></li>
32                            <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Masonry</a></li>
33                            <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Double Sidebar</a></li>
34                            <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Single Post</a></li>
35                        </ul>
36                    </li>
37                    <li><a href="http://www.freshdesignweb.com/responsive-drop-down-menu-jquery-css3-using-icon-symbol.html">Contact</a></li>
38                </ul>
39            </nav>
40            <div class="clear"></div>
41        </div>
42    </header>
43</div>

The CSS

001a {
002    color: #23dbdb;
003    text-decoration: none;
004}
005
006a:hover {
007    color: #000;
008}
009ol, ul {
010    list-style: none;
011    padding:0px;
012    margin:0px;
013}
014#wrap {
015    margin: 0 auto;
016}
017
018.inner {
019    margin: 0 auto;
020    max-width: 940px;
021    padding: 0 40px;
022}
023
024.relative {
025    position: relative;
026}
027
028.right {
029    float: right;
030}
031
032.left {
033    float: left;
034}
035
036/* HEADER */
037#wrap > header {
038    background-color: #333;
039    padding-bottom: 20px;
040}
041.logo {
042    display: inline-block;
043    font-size: 0;
044    padding-top:15px;
045}
046#navigation {
047    position: absolute;
048    right: 40px;
049    bottom: 0px;
050}
051
052#menu-toggle {
053    display: none;
054    float: right;
055}
056
057/* HEADER > MENU */
058#main-menu {
059    float: right;
060    font-size: 0;
061    margin: 10px 0;
062}
063
064#main-menu > li {
065    display: inline-block;
066    margin-left: 30px;
067    padding: 2px 0;
068}
069
070#main-menu > li.parent {
071    background-image: url(../images/plus-gray.png);
072    background-size: 7px 7px;
073    background-repeat: no-repeat;
074    background-position: left center;
075}
076
077#main-menu > li.parent > a {
078    padding-left: 14px;
079}
080
081#main-menu > li > a {
082    color: #eee;
083    font-size: 14px;
084    line-height: 14px;
085    padding: 30px 0;
086    text-decoration:none;
087}
088
089#main-menu > li:hover > a,
090#main-menu > li.current-menu-item > a {
091    color: #23dbdb;
092}
093
094/* HEADER > MENU > DROPDOWN */
095#main-menu li {
096    position: relative;
097}
098
099ul.sub-menu { /* level 2 */
100    display: none;
101    left: 0px;
102    top: 38px;
103    padding-top: 10px;
104    position: absolute;
105    width: 150px;
106    z-index: 9999;
107}
108
109ul.sub-menu ul.sub-menu { /* level 3+ */
110    margin-top: -1px;
111    padding-top: 0;
112    left: 149px;
113    top: 0px;
114}
115
116ul.sub-menu > li > a {
117    background-color: #333;
118    border: 1px solid #444;
119    border-top: none;
120    color: #bbb;
121    display: block;
122    font-size: 12px;
123    line-height: 15px;
124    padding: 10px 12px;
125}
126
127ul.sub-menu > li > a:hover {
128    background-color: #2a2a2a;
129    color: #fff;
130}
131
132ul.sub-menu > li:first-child {
133    border-top: 3px solid #23dbdb;
134}
135
136ul.sub-menu ul.sub-menu > li:first-child {
137    border-top: 1px solid #444;
138}
139
140ul.sub-menu > li:last-child > a {
141    border-radius: 0 0 2px 2px;
142}
143
144ul.sub-menu > li > a.parent {
145    background-image: url(../images/arrow.png);
146    background-size: 5px 9px;
147    background-repeat: no-repeat;
148    background-position: 95% center;
149}
150
151#main-menu li:hover > ul.sub-menu {
152    display: block; /* show the submenu */
153}

The CSS Responsive Style

01@media all and (max-width: 700px) {
02
03    #navigation {
04        position: static;
05        margin-top: 20px;
06    }
07
08    #menu-toggle {
09        display: block;
10    }
11
12    #main-menu {
13        display: none;
14        float: none;
15    }
16
17    #main-menu li {
18        display: block;
19        margin: 0;
20        padding: 0;
21    }
22
23    #main-menu > li {
24        margin-top: -1px;
25    }
26
27    #main-menu > li:first-child {
28        margin-top: 0;
29    }
30
31    #main-menu > li > a {
32        background-color: #333;
33        border: 1px solid #444;
34        color: #bbb;
35        display: block;
36        font-size: 14px;
37        padding: 12px !important;
38        padding: 0;
39    }
40
41    #main-menu li > a:hover {
42        background-color: #444;
43    }
44
45    #main-menu > li.parent {
46        background: none !important;
47        padding: 0;
48    }
49
50    #main-menu > li:hover > a,
51    #main-menu > li.current-menu-item > a {
52        border: 1px solid #444 !important;
53        color: #fff !important;
54    }
55
56    ul.sub-menu {
57        display: block;
58        margin-top: -1px;
59        margin-left: 20px;
60        position: static;
61        padding: 0;
62        width: inherit;
63    }
64
65    ul.sub-menu > li:first-child {
66        border-top: 1px solid #444 !important;
67    }
68
69    ul.sub-menu > li > a.parent {
70        background: #333 !important;
71    }
72}

The JavaScript Function:

01$(document).ready(function() {
02
03    /* MAIN MENU */
04    $('#main-menu > li:has(ul.sub-menu)').addClass('parent');
05    $('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
06
07    $('#menu-toggle').click(function() {
08        $('#main-menu').slideToggle(300);
09        return false;
10    });
11
12    $(window).resize(function() {
13        if ($(window).width() > 700) {
14            $('#main-menu').removeAttr('style');
15        }
16    });
17
18});

Now! We have a Responsive Drop Down Menu jQuery CSS3 Using Icon Symbol. Check out the demo link, and feel free to download this example for future use. I hope you enjoyed this tutorial and find it useful!


Download Source code

Leave a Reply