Thứ Bảy, 20 tháng 4, 2013

Hướng dẫn thiết kế Dropdown menu đẹp bằng Jquery & CSS cho thiết kế website

dropdown menu, thiet ke web 

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-stylenone;
004. 
005.padding0 20px;
006. 
007.margin0;
008. 
009.floatleft;
010. 
011.width920px;
012. 
013.background#222;
014. 
015.font-size1.2em;
016. 
017.backgroundurl(topnav_bg.gif) repeat-x;
018. 
019.}
020. 
021.ul.topnav li {
022. 
023.floatleft;
024. 
025.margin0;
026. 
027.padding0 15px 0 0;
028. 
029.positionrelative/*--Declare X and Y axis base for sub navigation--*/
030. 
031.}
032. 
033.ul.topnav li a{
034. 
035.padding10px 5px;
036. 
037.color#fff;
038. 
039.displayblock;
040. 
041.text-decorationnone;
042. 
043.floatleft;
044. 
045.}
046. 
047.ul.topnav li a:hover{
048. 
049.backgroundurl(topnav_hover.gif) no-repeat center top;
050. 
051.}
052. 
053.ul.topnav li span { /*--Drop down trigger styles--*/
054. 
055.width17px;
056. 
057.height35px;
058. 
059.floatleft;
060. 
061.backgroundurl(subnav_btn.gif) no-repeat center top;
062. 
063.}
064. 
065.ul.topnav li span.subhover {background-positioncenter bottomcursorpointer;} /*--Hover effect for trigger--*/
066. 
067.ul.topnav li ul.subnav {
068. 
069.list-stylenone;
070. 
071.positionabsolute/*--Important - Keeps subnav from affecting main navigation flow--*/
072. 
073.left0top35px;
074. 
075.background#333;
076. 
077.margin0padding0;
078. 
079.displaynone;
080. 
081.floatleft;
082. 
083.width170px;
084. 
085.border1px solid #111;
086. 
087.}
088. 
089.ul.topnav li ul.subnav li{
090. 
091.margin0padding0;
092. 
093.border-top1px solid #252525/*--Create bevel effect--*/
094. 
095.border-bottom1px solid #444/*--Create bevel effect--*/
096. 
097.clearboth;
098. 
099.width170px;
100. 
101.}
102. 
103.html ul.topnav li ul.subnav li a {
104. 
105.floatleft;
106. 
107.width145px;
108. 
109.background#333 url(dropdown_linkbg.gif) no-repeat 10px center;
110. 
111.padding-left20px;
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.subnav
07. 
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 click
14. 
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 up
19.});
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 Out
26.$(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

dropdown menu, thiet ke web

Nếu trình duyệt không bật javascript, sẽ có dạng như sau:

dropdown menu, thiet ke web 

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

 

0 nhận xét:

Đăng nhận xét