Menu là một phần không thể thiếu trong các website. Chúng tôi xin giới thiệu đến các bạn 1 bộ dropdown menu cực đẹp dựa trên nền Jquery & CSS. Hãy xem ví dụ sau để có thể thiết kế 1 menu đẹp cho website của bạn.
Bước 1: Phần HTML
Tạo đoạn mã sau bằng HTML
01.<ul class="topnav">02. 03.<li><a href="#">Home</a></li>04. 05.<li>06. 07.<a href="#">Tutorials</a>08. 09.<ul class="subnav">10. 11.<li><a href="#">Sub Nav Link</a></li>12. 13.<li><a href="#">Sub Nav Link</a></li>14. 15.</ul>16. 17.</li>18. 19.<li>20. 21.<a href="#">Resources</a>22. 23.<ul class="subnav">24. 25.<li><a href="#">Sub Nav Link</a></li>26. 27.<li><a href="#">Sub Nav Link</a></li>28. 29.</ul>30. 31.</li>32. 33.<li><a href="#">About Us</a></li>34. 35.<li><a href="#">Advertise</a></li>36. 37.<li><a href="#">Submit</a></li>38. 39.<li><a href="#">Contact Us</a></li>40. 41.</ul>
Bước 2: Phần CSS
Nhúng đoạn CSS sau vào giữa thẻ <head>
001.ul.topnav {002. 003.list-style: none;004. 005.padding: 0 20px;006. 007.margin: 0;008. 009.float: left;010. 011.width: 920px;012. 013.background: #222;014. 015.font-size: 1.2em;016. 017.background: url(topnav_bg.gif) repeat-x;018. 019.}020. 021.ul.topnav li {022. 023.float: left;024. 025.margin: 0;026. 027.padding: 0 15px 0 0;028. 029.position: relative; /*--Declare X and Y axis base for sub navigation--*/030. 031.}032. 033.ul.topnav li a{034. 035.padding: 10px 5px;036. 037.color: #fff;038. 039.display: block;040. 041.text-decoration: none;042. 043.float: left;044. 045.}046. 047.ul.topnav li a:hover{048. 049.background: url(topnav_hover.gif) no-repeat center top;050. 051.}052. 053.ul.topnav li span { /*--Drop down trigger styles--*/054. 055.width: 17px;056. 057.height: 35px;058. 059.float: left;060. 061.background: url(subnav_btn.gif) no-repeat center top;062. 063.}064. 065.ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/066. 067.ul.topnav li ul.subnav {068. 069.list-style: none;070. 071.position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/072. 073.left: 0; top: 35px;074. 075.background: #333;076. 077.margin: 0; padding: 0;078. 079.display: none;080. 081.float: left;082. 083.width: 170px;084. 085.border: 1px solid #111;086. 087.}088. 089.ul.topnav li ul.subnav li{090. 091.margin: 0; padding: 0;092. 093.border-top: 1px solid #252525; /*--Create bevel effect--*/094. 095.border-bottom: 1px solid #444; /*--Create bevel effect--*/096. 097.clear: both;098. 099.width: 170px;100. 101.}102. 103.html ul.topnav li ul.subnav li a {104. 105.float: left;106. 107.width: 145px;108. 109.background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;110. 111.padding-left: 20px;112. 113.}114. 115.html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/116. 117.background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;118. 119.}
Bước 3: Phần JQUERY
Nhúng đoạn javascript sau vào giữa thẻ <head>, trên đoạn CSS ta vừa nhúng.
01.<script type="text/javascript" src="/<a href="view-source:http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js<;/a>"></script>02.<script type="text/javascript">03.$(document).ready(function(){04. 05.$("ul.subnav").parent().append("<span></span>");06.//Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav07. 08.$("ul.topnav li span").click(function() {09.//When trigger is clicked...10. 11.//Following events are applied to the subnav itself (moving subnav up and down)12.$(this).parent().find("ul.subnav").slideDown('fast').show();13.//Drop down the subnav on click14. 15.$(this).parent().hover(function() {16.}, function(){ 17.$(this).parent().find("ul.subnav").slideUp('slow');18.//When the mouse hovers out of the subnav, move it back up19.});20. 21.//Following events are applied to the trigger (Hover events for the trigger)22.}).hover(function() {23.$(this).addClass("subhover");24.//On hover over, add class "subhover"25.}, function(){ //On Hover Out26.$(this).removeClass("subhover");27.//On hover out, remove class "subhover"28.});29. 30.});31.</script>
Chú ý: Nếu trình duyệt web của bạn có bật javascript, menu sẽ chạy như sau
Nếu trình duyệt không bật javascript, sẽ có dạng như sau:
Bạn có thể tải đoạn mã chúng tôi đã làm sẵn để tham khảo tại địa chỉ:
Hướng dẫn thiết kế menu web bằng Jquery & CSS
Đăng nhận xét