Sexy Drop Down Menu w/ jQuery & CSS

Studi menunjukkan bahwa navigations atas cenderung mendapatkan perhatian yang paling visual ketika pengguna pertama kali mengunjungi situs. Memiliki navigasiterorganisir dan intuitif adalah kunci - dan sementara drop down menu yang palingmungkin terlihat estetis menyenangkan, mengembangkan mereka untuk menurunkananggun juga penting. Dalam tutorial ini saya ingin pergi ke cara membuat drop downmenu seksi yang juga dapat menurunkan anggun.

View Demo of Sexy Drop Down Menu

Step1. HTML

Pertama membuat daftar unordered untuk navigasi dasar utama Anda. Maka cukupsarang daftar lain unordered untuk navigasi sub.

1. <ul 
2. class="topnav">  
3.     <li><a href="#">Home</a></li>  
4.     <li>  
5.         <a href="#">Tutorials</a>  
6.         <ul class="subnav">  
7.             <li><a href="#">Sub Nav Link</a></li>  
8.             <li><a href="#">Sub Nav Link</a></li>  
9.         </ul>  
10.     </li>  
11.     <li>  
12.         <a href="#">Resources</a>  
13.         <ul class="subnav">  
14.             <li><a href="#">Sub Nav Link</a></li>  
15.             <li><a href="#">Sub Nav Link</a></li>  
16.         </ul>  
17.     </li>  
18.     <li><a href="#">About Us</a></li>  
19.     <li><a href="#">Advertise</a></li>  
20.     <li><a href="#">Submit</a></li>  
21.     <li><a href="#">Contact Us</a></li>  
22. </ul>  

Step2. CSS

Selanjutnya, saatnya untuk gaya wireframe navigasi dengan CSS.

1. ul.topnav {  
2.     list-style: none;  
3.     padding: 0 20px;  
4.     margin: 0;  
5.     float: left;  
6.     width: 920px;  
7.     background: #222;  
8.     font-size: 1.2em;  
9.     background: url(topnav_bg.gif) repeat-x;  
10. }  
11. ul.topnav li {  
12.     float: left;  
13.     margin: 0;  
14.     padding: 0 15px 0 0;  
15.     position: relative; /*--Declare X and Y axis base for sub navigation--*/  
16. }  
17. ul.topnav li a{  
18.     padding: 10px 5px;  
19.     color: #fff;  
20.     display: block;  
21.     text-decoration: none;  
22.     float: left;  
23. }  
24. ul.topnav li a:hover{  
25.     background: url(topnav_hover.gif) no-repeat center top;  
26. }  
27. ul.topnav li span { /*--Drop down trigger styles--*/  
28.     width: 17px;  
29.     height: 35px;  
30.     float: left;  
31.     background: url(subnav_btn.gif) no-repeat center top;  
32. }  
33. ul.topnav li span.subhover {background-position: center bottombottom; cursor: pointer;} /*--Hover effect for trigger--*/  
34. ul.topnav li ul.subnav {  
35.     list-style: none;  
36.     position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/  
37.     left: 0; top: 35px;  
38.     background: #333;  
39.     margin: 0; padding: 0;  
40.     display: none;  
41.     float: left;  
42.     width: 170px;  
43.     border: 1px solid #111;  
44. }  
45. ul.topnav li ul.subnav li{  
46.     margin: 0; padding: 0;  
47.     border-top: 1px solid #252525; /*--Create bevel effect--*/  
48.     border-bottom: 1px solid #444; /*--Create bevel effect--*/  
49.     clear: both;  
50.     width: 170px;  
51. }  
52. html ul.topnav li ul.subnav li a {  
53.     float: left;  
54.     width: 145px;  
55.     background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;  
56.     padding-left: 20px;  
57. }  
58. html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/  
59.     background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;  
60. }

Step3. jQuery

Bagi mereka yang baru jQuery, Anda dapat belajar tentang hal itu di sini (here).

Script berikut ini berisi komentar yang menjelaskan tindakan jQuery sedang dilakukan.

1. $(document).ready(
2. function(){  
3.   
4.     $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)  
5.   
6.     $("ul.topnav li span").click(function() { //When trigger is clicked...  
7.   
8.         //Following events are applied to the subnav itself (moving subnav up and down)  
9.         $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click  
10.   
11.         $(this).parent().hover(function() {  
12.         }, function(){  
13.             $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up  
14.         });  
15.   
16.         //Following events are applied to the trigger (Hover events for the trigger)  
17.         }).hover(function() {  
18.             $(this).addClass("subhover"); //On hover over, add class "subhover"  
19.         }, function(){  //On Hover Out  
20.             $(this).removeClass("subhover"); //On hover out, remove class "subhover"  
21.     });  
22.   
23. });

  

Untuk menurunkan sub, kami hanya menampilkan drop down menu memicuke pada mereka yang telah javascript diaktifkan.

Ini adalah apa yang tampak seperti ketika javascript dinonaktifkan:

View Demo of Sexy Drop Down Menu