How to create Mobile Navigation Menu with CSS & jQuery
Mobile Navigation is one of the challenge work for web designers in responsivedesigns if site has many pages and sections then its very challenging to squeeze all the links in small mobile screen. So I am going to give you a tutorial on some designing tips and solve this problem with an easy procedures usingCSS and jQuery and it helps you to merge your navigation and show proper menu to your mobile viewers.
Navigation markup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div id="nav-wrap">
<ul id="nav">
<li><a href="http://www.phpgang.com/">Home</a></li>
<li><a href="http://demo.phpgang.com/">Demo</a>
<ul>
<li><a href="http://www.wptutorialsacademy.com/">Wordpress</a></li>
<li><a href="http://www.phpgang.com/category/jquery">jQuery</a></li>
<li><a href="http://www.phpgang.com/category/php">PHP</a></li>
<li><a href="http://www.phpgang.com/category/social">Facebook</a></li>
<li><a href="http://www.phpgang.com/category/css">CSS</a></li>
</ul>
</li>
<li><a href="http://www.phpgang.com/about">About</a></li>
<li><a href="http://www.phpgang.com/request-tutorials-here">Contact</a></li>
<li><a href="http://www.phpgang.com/advertisement">Advertisement</a></li>
</ul>
</div>
|
Above Markup only shows a navigation menu.
CSS used to manage this navigation looks nice
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<style type="text/css">
a {
text-decoration: none;
color: #39C;
}
#nav-wrap {
margin-top: 20px;
}
#menu-icon {
display: none;
}
#nav, #nav li {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
float: left;
margin-right: 5px;
}
#nav a {
padding: 4px 15px;
display: block;
color: #000;
background: #ecebeb;
}
#nav a:hover {
background: #f8f8f8;
}
#nav ul {
background: #fff;
padding: 2px;
position: absolute;
border: solid 1px #ccc;
display: none;
width: 200px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav li:hover > ul {
display: block;
}
</style>
|
Above CSS used make Navigation looks nice and view-able on the website with sub navigation on demo link.
Now add @media query to output on device width let see how it works on devices with media.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
<style type="text/css">
@media screen and (max-width: 600px) { /* Devices below or equal to 600px */
#nav-wrap {
position: relative;
}
#menu-icon {
color: #000;
width: 42px;
height: 30px;
background: #ecebeb url(http://www.phpgang.com/wp-content/themes/PHPGang_v2/img/menu-icon.png) no-repeat 10px center; /* show menu icon */
padding: 8px 10px 0 52px;
cursor: pointer;
border: solid 1px #666;
display: block;
}
#menu-icon:hover {
background-color: #f8f8f8; /* Color on hand over */
}
#menu-icon.active {
background-color: #bbb;
}
#nav {
clear: both;
position: absolute;
top: 38px;
width: 160px;
z-index: 10000;
padding: 5px;
background: #f8f8f8;
border: solid 1px #999;
display: none;
}
#nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px;
}
#nav a, #nav ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #666;
border: none;
}
#nav a:hover, #nav ul a:hover {
background: none;
color: #000;
}
#nav ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
#nav ul li {
margin: 3px 0 3px 15px;
}
}
@media screen and (min-width: 600px) {
#nav {
display: block !important; /* as we have make nav display none on above media here is for desktop make it visible. */
}
}
</style>
|
jQuery used to make dropdown show and hide on click event:
1
2
3
4
5
6
7
8
9
10
11
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>
|
That’s all about this tutorial you can check our demo and download script for free.
Altogether from our demo page:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>How to create Mobile Navigation Menu with CSS & jQuery | PGPGang.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
/* prepend menu icon */
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#nav").slideToggle();
$(this).toggleClass("active");
});
});
</script>
<style type="text/css">
a {
text-decoration: none;
color: #39C;
}
#nav-wrap {
margin-top: 20px;
}
/* menu icon */
#menu-icon {
display: none; /* hide menu icon initially */
}
#nav,
#nav li {
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
float: left;
margin-right: 5px;
}
/* nav link */
#nav a {
padding: 4px 15px;
display: block;
color: #000;
background: #ecebeb;
}
#nav a:hover {
background: #f8f8f8;
}
/* nav dropdown */
#nav ul {
background: #fff;
padding: 2px;
position: absolute;
border: solid 1px #ccc;
display: none; /* hide dropdown */
width: 200px;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav li:hover > ul {
display: block; /* show dropdown on hover */
}
@media screen and (max-width: 600px) {
/* nav-wrap */
#nav-wrap {
position: relative;
}
/* menu icon */
#menu-icon {
color: #000;
width: 42px;
height: 30px;
background: #ecebeb url(menu-icon.png) no-repeat 10px center;
padding: 8px 10px 0 52px;
cursor: pointer;
border: solid 1px #666;
display: block; /* show menu icon */
}
#menu-icon:hover {
background-color: #f8f8f8;
}
#menu-icon.active {
background-color: #bbb;
}
/* main nav */
#nav {
clear: both;
position: absolute;
top: 38px;
width: 160px;
z-index: 10000;
padding: 5px;
background: #f8f8f8;
border: solid 1px #999;
display: none; /* visibility will be toggled with jquery */
}
#nav li {
clear: both;
float: none;
margin: 5px 0 5px 10px;
}
#nav a,
#nav ul a {
font: inherit;
background: none;
display: inline;
padding: 0;
color: #666;
border: none;
}
#nav a:hover,
#nav ul a:hover {
background: none;
color: #000;
}
/* dropdown */
#nav ul {
width: auto;
position: static;
display: block;
border: none;
background: inherit;
}
#nav ul li {
margin: 3px 0 3px 15px;
}
}
@media screen and (min-width: 600px) {
/* ensure #nav is visible on desktop version */
#nav {
display: block !important;
}
}
</style>
</head>
<body>
<h2>How to create Mobile Navigation Menu with CSS & jQuery example. => <a href="http://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
<div id="nav-wrap">
<ul id="nav">
<li><a href="http://www.phpgang.com/">Home</a></li>
<li><a href="http://demo.phpgang.com/">Demo</a>
<ul>
<li><a href="http://www.wptutorialsacademy.com/"> Wordpress </a></li>
<li><a href="http://www.phpgang.com/category/jquery"> jQuery </a></li>
<li><a href="http://www.phpgang.com/category/php"> PHP </a></li>
<li><a href="http://www.phpgang.com/category/social"> Facebook </a></li>
<li><a href="http://www.phpgang.com/category/css"> CSS </a></li>
</ul>
</li>
<li><a href="http://www.phpgang.com/about">About</a></li>
<li><a href="http://www.phpgang.com/request-tutorials-here">Contact</a></li>
<li><a href="http://www.phpgang.com/advertisement">Advertisement</a></li>
</ul>
</div>
</body>
</html>
|
I hope you like this tutorial and please don’t forget to comment your suggestions and do share this with your friends.
No comments:
Post a Comment