본문 바로가기
BootStrap/Bootstrap Sample File

HOW TO CREATE A NAVIGATION MENU DROPDOWNS USING JQUERY

hookbox 2015. 11. 15. 10:09
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 {
    display:  none;
    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;
    position: relative;
    z-index:100;
    background: #6e6e6e;
    border-bottom: 1px solid #666;
}
.nav li li li a {
    z-index:200;
    background: #6e6e6e;
    border-bottom: 1px solid #666;
}
 
@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
 
}

script.js

?
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
(function($){
 $.fn.dropdowns = function (options) {
   
  var defaults = {
   toggleWidth: 768
  }
   
  var options = $.extend(defaults, options);
   
  var ww = document.body.clientWidth;
   
  var addParents = function() {
   $(".nav li a").each(function() {
    if ($(this).next().length > 0) {
     $(this).addClass("parent");
    }
   });
  }
   
  var adjustMenu = function() {
   if (ww < options.toggleWidth) {
    $(".toggleMenu").css("display", "inline-block");
    if (!$(".toggleMenu").hasClass("active")) {
     $(".nav").hide();
    } else {
     $(".nav").show();
    }
    $(".nav li").unbind('mouseenter mouseleave');
    $(".nav li a.parent").unbind('click').bind('click', function(e) {
     // must be attached to anchor element to prevent bubbling
     e.preventDefault();
     $(this).parent("li").toggleClass("hover");
    });
   }
   else if (ww >= options.toggleWidth) {
    $(".toggleMenu").css("display", "none");
    $(".nav").show();
    $(".nav li").removeClass("hover");
    $(".nav li a").unbind('click');
    $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
     // must be attached to li so that mouseleave is not triggered when hover over submenu
     $(this).toggleClass('hover');
    });
   }
  }
   
  return this.each(function() {
   $(".toggleMenu").click(function(e) {
    e.preventDefault();
    $(this).toggleClass("active");
    $(this).next(".nav").toggle();
   });
   adjustMenu();
   addParents();
   $(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
   });
  });
  
 }
})(jQuery)


'BootStrap > Bootstrap Sample File' 카테고리의 다른 글

HOW TO MAKE DRAGDROP AND SORTABLE WIDGETS WITH JQUERY UI AND BOOTSTRAP  (0) 2015.11.15
HOW TO MAKE MODAL (POPUP/DIALOG) USING JQUERY  (0) 2015.11.15
HOW TO MAKE AUTOCOMPLETE USING JQUERY UI AND BOOTSTRAP  (0) 2015.11.15
HOW TO MAKE ACCORDION USING JQUERY UI AND BOOTSTRAP  (0) 2015.11.15
CRUD (CREATE, READ, UPDATE, DELETE, PAGINATION) USING PHP PDO AND BOOTSTRAP  (0) 2015.11.15

'BootStrap/Bootstrap Sample File' Related Articles

티스토리툴바