Nowadays, pure CSS3 menus still very popular. Mostly – this is UL-LI based menus. Today we will continue making nice menus for you. This will nice dropdown menu (looks like menu at http://www.microsoft.com/) with onclicking (instead onhover).
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the example files and lets start coding !
Step 1. HTML + JS
As usual, we start with the HTML.
Here are full html code with our menu. As you can see – this is multilevel menu. I hope that you can easy to understand it. Whole menu built on UL-LI elements.
index.html
001 | <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> |
002 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
003 | <div class="example"> |
004 | <div class="menu"> |
005 | <span> |
006 | <ul id="nav"> |
007 | <li><a href="#">Home</a></li> |
008 | <li><a href="#">Tutorials</a> |
009 | <div class="subs"> |
010 | <div> |
011 | <ul> |
012 | <li><h3>Submenu #1</h3> |
013 | <ul> |
014 | <li><a href="#">Link 1</a></li> |
015 | <li><a href="#">Link 2</a></li> |
016 | <li><a href="#">Link 3</a></li> |
017 | <li><a href="#">Link 4</a></li> |
018 | <li><a href="#">Link 5</a></li> |
019 | </ul> |
020 | </li> |
021 | <li><h3>Submenu #2</h3> |
022 | <ul> |
023 | <li><a href="#">Link 6</a></li> |
024 | <li><a href="#">Link 7</a></li> |
025 | <li><a href="#">Link 8</a></li> |
026 | </ul> |
027 | </li> |
028 | <li><h3>Submenu #3</h3> |
029 | <ul> |
030 | <li><a href="#">Link 9</a></li> |
031 | <li><a href="#">Link 10</a></li> |
032 | </ul> |
033 | </li> |
034 | </ul> |
035 | </div> |
036 | </div> |
037 | </li> |
038 | <li><a href="#">Resources</a> |
039 | <div class="subs"> |
040 | <div class="wrp2"> |
041 | <ul> |
042 | <li><h3>Submenu #4</h3> |
043 | <ul> |
044 | <li><a href="#">Link 1</a></li> |
045 | <li><a href="#">Link 2</a></li> |
046 | <li><a href="#">Link 3</a></li> |
047 | <li><a href="#">Link 4</a></li> |
048 | <li><a href="#">Link 5</a></li> |
049 | </ul> |
050 | </li> |
051 | <li><h3>Submenu #5</h3> |
052 | <ul> |
053 | <li><a href="#">Link 6</a></li> |
054 | <li><a href="#">Link 7</a></li> |
055 | <li><a href="#">Link 8</a></li> |
056 | <li><a href="#">Link 9</a></li> |
057 | <li><a href="#">Link 10</a></li> |
058 | </ul> |
059 | </li> |
060 | </ul> |
061 | <p class="sep"></p> |
062 | <ul> |
063 | <li><h3>Submenu #6</h3> |
064 | <ul> |
065 | <li><a href="#">Link 11</a></li> |
066 | <li><a href="#">Link 12</a></li> |
067 | <li><a href="#">Link 13</a></li> |
068 | </ul> |
069 | </li> |
070 | <li><h3>Submenu #7</h3> |
071 | <ul> |
072 | <li><a href="#">Link 14</a></li> |
073 | <li><a href="#">Link 15</a></li> |
074 | <li><a href="#">Link 16</a></li> |
075 | </ul> |
076 | </li> |
077 | <li><h3>Submenu #8</h3> |
078 | <ul> |
079 | <li><a href="#">Link 17</a></li> |
080 | <li><a href="#">Link 18</a></li> |
081 | <li><a href="#">Link 19</a></li> |
082 | </ul> |
083 | </li> |
084 | </ul> |
085 | </div> |
086 | </div> |
087 | </li> |
088 | <li><a href="https://www.script-tutorials.com/about/">About</a></li> |
089 | <li><a href="https://www.script-tutorials.com/click-action-css3-dropdown-menu-with-jquery/">Go Back To The Tutorial</a></li> |
090 | </ul> |
091 | </span> |
092 | </div> |
093 | </div> |
094 | <script type="text/javascript"> |
095 | jQuery(window).load(function() { |
096 | $("#nav > li > a").click(function (e) { // binding onclick |
097 | if ($(this).parent().hasClass('selected')) { |
098 | $("#nav .selected div div").slideUp(100); // hiding popups |
099 | $("#nav .selected").removeClass("selected"); |
100 | } else { |
101 | $("#nav .selected div div").slideUp(100); // hiding popups |
102 | $("#nav .selected").removeClass("selected"); |
103 | if ($(this).next(".subs").length) { |
104 | $(this).parent().addClass("selected"); // display popup |
105 | $(this).next(".subs").children().slideDown(200); |
106 | } |
107 | } |
108 | e.stopPropagation(); |
109 | }); |
110 | $("body").click(function () { // binding onclick to body |
111 | $("#nav .selected div div").slideUp(100); // hiding popups |
112 | $("#nav .selected").removeClass("selected"); |
113 | }); |
114 | }); |
115 | </script> |
In bottom – we can see extra jQuery code. Here are onclick events and a little of animation.
Step 2. CSS
Here are used CSS styles. First two selectors – layout of our demo page. All rest – belong to menu.
css/style.css
001 | /* demo page styles */ |
002 | body { |
003 | background:#eee; |
004 | margin:0; |
005 | padding:0; |
006 | font-family:Segoe UI,Tahoma,Arial,Verdana,sans-serif; |
007 | } |
008 | .example { |
009 | background:#fff url(../images/blue.jpg); |
010 | width:700px; |
011 | height:500px; |
012 | border:1px #000 solid; |
013 | margin:20px auto; |
014 | padding:15px; |
015 | border-radius:3px; |
016 | -moz-border-radius:3px; |
017 | -webkit-border-radius:3px; |
018 | } |
019 | /* main menu styles */ |
020 | .menu { |
021 | background-color:#d0e6f5; |
022 | text-align:center; |
023 | width:100%; |
024 | } |
025 | .menu > span { |
026 | display:inline-block; |
027 | margin:0 auto; |
028 | } |
029 | #nav { |
030 | display:inline; |
031 | text-align:left; |
032 | position:relative; |
033 | list-style-type:none; |
034 | } |
035 | #nav > li { |
036 | float:left; |
037 | padding:0; |
038 | position:relative; |
039 | } |
040 | #nav > li > a { |
041 | border:1px solid transparent; |
042 | color:#4F4F4F; |
043 | display:block; |
044 | font-size:90%; |
045 | padding:3px 10px; |
046 | position:relative; |
047 | text-decoration:none; |
048 | } |
049 | #nav > li > a:hover { |
050 | background-color:#e4ecf4; |
051 | border-color:#999 |
052 | } |
053 | #nav > li.selected > a { |
054 | background-color:#FFFFFF; |
055 | border-color:#999999 #999999 #FFFFFF; |
056 | z-index:2; |
057 | } |
058 | #nav li div { |
059 | position:relative; |
060 | } |
061 | #nav li div div { |
062 | background-color:#FFFFFF; |
063 | border:1px solid #999999; |
064 | padding:12px 0; |
065 | display:none; |
066 | font-size:0.75em; |
067 | margin:0; |
068 | position:absolute; |
069 | top:-1px; |
070 | z-index:1; |
071 | width:190px; |
072 | } |
073 | #nav li div div.wrp2 { |
074 | width:380px; |
075 | } |
076 | #nav .sep { |
077 | left:190px; |
078 | border-left:1px solid #E3E3E3; |
079 | bottom:0; |
080 | height:auto; |
081 | margin:15px 0; |
082 | position:absolute; |
083 | top:0; |
084 | width:1px; |
085 | } |
086 | #nav li div ul { |
087 | padding-left:10px; |
088 | padding-right:10px; |
089 | position:relative; |
090 | width:170px; |
091 | float:left; |
092 | list-style-type:none; |
093 | } |
094 | #nav li div ul li { |
095 | margin:0; |
096 | padding:0; |
097 | } |
098 | #nav li div ul li h3 { |
099 | border-bottom:1px solid #E3E3E3; |
100 | color:#4F4F4F; |
101 | font-weight:bold; |
102 | margin:0 5px 4px; |
103 | font-size:0.95em; |
104 | padding-bottom:3px; |
105 | padding-top:3px; |
106 | } |
107 | #nav li ul ul { |
108 | padding:0 0 8px; |
109 | } |
110 | #nav li ul ul li { |
111 | margin:0; |
112 | padding:0; |
113 | } |
114 | #nav li ul ul li a { |
115 | color:#0060A6; |
116 | display:block; |
117 | margin-bottom:1px; |
118 | padding:3px 5px; |
119 | text-decoration:none; |
120 | font-size:0.9em; |
121 | } |
122 | #nav li ul ul li a:hover{ |
123 | background-color:#0060a6; |
124 | color:#fff; |
125 | } |
Live Demo
Conclusion
Hope you enjoyed with this tutorial, don’t forget to tell thanks and leave a comment 🙂 Good luck!
