You can experiment with the existing syntax above, you can also edit the syntax above your heart's content.







How to Create a Navigation menu dropdowns using jQuery
-In this article I will discuss how to create a dropdown menu using jquery and along with html and css. The dropdown menu navigation is very useful for people who design template website or blog either blogger or wordpress.

In the dropdown menu navigation is then needed is a jquery plugin that can be found on their official website. Then you download and copy jquery plugins into a new folder. In the new folder there will be files that exist below.

index.html

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
<!DOCTYPE html>
<html>
<head>
 <title>Dropdowns</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="style.css">
  
</head>
<body>
<div class="nav-ljb">
  
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
 <li class="active"><a href="#">Home</a></li>
 <li>
  <a href="#">Web</a>
  <ul>
   <li>
    <a href="#">Desktop/Mobile</a>
    <ul>
     <li><a href="#">HTML6</a></li>
     <li><a href="#">CSS4</a></li>
     <li><a href="#">JavaScript</a></li>
     <li><a href="#">jQuery</a></li>
     <li><a href="#">Backbone</a></li>
     <li><a href="#">Angular</a></li>
    </ul>
   </li>
   <li>
    <a href="#">Server</a>
    <ul>
     <li><a href="#">PHP/Perl</a></li>
     <li><a href="#">Java EE/JSP</a></li>
     <li><a href="#">ASP.NET</a></li>
    </ul>
   </li>
  </ul>
 </li>
 <li>
  <a href="#">Framework</a>
  <ul>
   <li>
    <a href="#">PHP Framework</a>
    <ul>
     <li><a href="#">CodeIgniter</a></li>
     <li><a href="#">Yii Framework</a></li>
     <li><a href="#">Slim Framework</a></li>
    </ul>
   </li>
   <li>
    <a href="#">UI Framework</a>
    <ul>
     <li><a href="#">Bootstrap</a></li>
     <li><a href="#">UIKit</a></li>
     <li><a href="#">Metro UI CSS</a></li>
    </ul>
   </li>
  </ul>
 </li>
 <li>
  <a href="#">SEO</a>
  <ul>
   <li><a href="#">On Page</a></li>
   <li><a href="#">Off Page</a></li>
  </ul>
 </li>
 <li>
  <a href="#">Blog</a>
  <ul>
   <li><a href="#">Blogger</a></li>
   <li><a href="#">WordPress</a></li>
   <li><a href="#">Webbly</a></li>
   <li><a href="#">Blog.com</a></li>
   <li><a href="#">Typepad</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>
</div>
 
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<script>
 $(".nav-ljb").dropdowns();
</script>
</body>
</html>

style.css

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
.nav-ljb {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width:auto;
}
.nav-ljb nav, .nav-ljb ul, .nav-ljb li, .nav-ljb a  {
    margin: 0; padding: 0;
}
.nav-ljb a {
    text-decoration: none;
}
.toggleMenu {
    displaynone;
    background: #393939;
    color: #fff;
}
a.toggleMenu{
    padding: 10px 0;
    width:100%;
    text-align: left;
}
a.toggleMenu:before{
    content:" ";
    padding-left: 10px;
}
.nav {
    list-style: none;
     *zoom: 1;
     background: #393939;
}
.nav:before,
.nav:after {
    content: " ";
    display: table;
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width:10em;
}
.nav a {
    padding: 10px 15px;
    color:#fff;
}
.nav a:hover {
    background-color: #ff5a09;
}
.nav li.active a{
    background-color: #ff5a09;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
}
.nav > li > .parent {
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;