您好,登錄后才能下訂單哦!
這篇文章主要講解了“jQuery怎么實習菜單功能”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“jQuery怎么實習菜單功能”吧!
一、垂直菜單的實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="app.css" rel="stylesheet"/> <script src="jquery-1.10.1.min.js"></script> <script src="app.js"></script> </head> <body> <ul> <li class="main"> <a href="#">菜單1</a> <ul> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> </ul> </li> <li class="main"> <a href="#">菜單2</a> <ul> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> </ul> </li> <li class="main"> <a href="#">菜單3</a> <ul> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> </ul> </li> </ul> </body> </html>
ul,li{ list-style: none; } ul{ padding: 0; margin: 0; } .main{ background-color: #666666; background-repeat: repeat-x; width: 100px; } li{ background-color: #eeeeee; } a{ text-decoration: none; padding-left: 20px; display: block; width: 80px; padding-top: 3px; padding-bottom: 3px; } .main a{ color: white; } .main li a{ color: black; } .main ul{ display: none; }
$(document).ready(function(){ $(".main>a").click(function(){ var ulNode = $(this).next("ul"); ulNode.toggle("normal"); }); });
二、水平菜單的實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="app.css" rel="stylesheet"/> <script src="jquery-1.10.1.min.js"></script> <script src="app.js"></script> </head> <body> <ul> <li class="main"> <a href="#">菜單1</a> <ul> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> </ul> </li> <li class="main"> <a href="#">菜單2</a> <ul> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> </ul> </li> <li class="main"> <a href="#">菜單3</a> <ul> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> </ul> </li> </ul> <br /> <br /> <br /> <br /> <br /> <ul> <li class="hmain"> <a href="#">菜單1</a> <ul> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> </ul> </li> <li class="hmain"> <a href="#">菜單2</a> <ul> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> </ul> </li> <li class="hmain"> <a href="#">菜單3</a> <ul> <li><a href="#">子菜單1</a></li> <li><a href="#">子菜單2</a></li> </ul> </li> </ul> </body> </html>
ul,li{ list-style: none; } ul{ padding: 0; margin: 0; } .main,.hmain{ background-color: #666666; background-repeat: repeat-x; width: 100px; } li{ background-color: #eeeeee; } a{ text-decoration: none; padding-left: 20px; display: block; width: 80px; padding-top: 3px; padding-bottom: 3px; } .main a,.hmain a{ color: white; } .main li a,.hmain li a{ color: black; } .main ul,.hmain ul{ display: none; } .hmain{ float: left; margin-right: 1px; } .main{ margin-top: 1px; }
$(document).ready(function(){ $(".main>a").click(function(){ var ulNode = $(this).next("ul"); ulNode.toggle("normal"); }); $(".hmain").hover(function(){ $(this).children("ul").slideDown(); },function(){ $(this).children("ul").slideUp(); }); });
感謝各位的閱讀,以上就是“jQuery怎么實習菜單功能”的內容了,經過本文的學習后,相信大家對jQuery怎么實習菜單功能這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。