Bài viết sau sẽ hướng dẫn các bạn thực hiện một bài tập đơn giản về dropdown menu dùng jquery và css. Dưới đây là một ví dụ đơn giản để bạn có thể biết cách thao tác với jquery, css và html.
dropdown menu với jquery và css
Với một vài dòng code dưới đây hy vọng nó sẽ giúp bạn làm đẹp thêm website của bạn.
Bước 1: Tạo mã menu bằng HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="dropdown"> <a class="account" >My Account</a> <div class="submenu"> <ul class="root"> <li ><a href="#Dashboard" >Dashboard</a></li> <li ><a href="#Profile" >Profile</a></li> <li ><a href="#settings">Settings</a></li> <li ><a href="#feedback">Send Feedback</a></li> </ul> </div> </div> |
Bước 2: Viết mã Javascript
Với hàm $(“.account”).click(function() sẽ được thực thi khi “My account” được click. Sử dụng $(this).attr(‘id’) để lấy ra Id của anchor tag này và bao gồm điều kiện hiển thị ra khi nó có giá trị là 1.
|
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 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "></script>; <script type="text/javascript" > $(document).ready(function() { $(".account").click(function() { var X=$(this).attr('id'); if(X==1) { $(".submenu").hide(); $(this).attr('id', '0'); } else { $(".submenu").show(); $(this).attr('id', '1'); } }); //Mouse click on sub menu $(".submenu").mouseup(function() { return false }); //Mouse click on my account link $(".account").mouseup(function() { return false }); //Document Click $(document).mouseup(function() { $(".submenu").hide(); $(".account").attr('id', ''); }); }); </script> |
Bước 3: Viết mã 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 |
.dropdown { color: #555; margin: 3px -22px 0 0; width: 143px; position: relative; height: 17px; text-align:left; } .submenu { background: #fff; position: absolute; top: -12px; left: -20px; z-index: 100; width: 135px; display: none; margin-left: 10px; padding: 40px 0 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); } .dropdown li a { color: #555555; display: block; font-family: arial; font-weight: bold; padding: 6px 15px; cursor: pointer; text-decoration:none; } .dropdown li a:hover { background:#155FB0; color: #FFFFFF; text-decoration: none; } a.account { font-size: 11px; line-height: 16px; color: #555; position: absolute; z-index: 110; display: block; padding: 11px 0 0 20px; height: 28px; width: 121px; margin: -11px 0 0 -10px; text-decoration: none; background: url(icons/arrow.png) 116px 17px no-repeat; cursor:pointer; } .root { list-style:none; margin:0px; padding:0px; font-size: 11px; padding: 11px 0 0 0px; border-top:1px solid #dedede; } |
