HTML部分:將以下的code放至您想放選單的位置。
JQuery的部分:
CSS部分:放置CSS要設定的值
就完成了JQuery實作的三層垂直主選單喔~!! 效果如下:
<div class="menu"> <ul> <li> <a href="#">► Level 1</a> <ul class="submenu"> <li> <a href="#">► Level 1-1</a> <ul class="lastmenu"> <li> <a href="#" target="_blank">Level 1-1-1</a> </li> </ul> </li> <li> <a href="#">► Level 1-2</a> <ul class="lastmenu"> <li> <a href="#" target="_blank">Level 1-2-1</a> </li> </ul> </li> </ul> </li> </ul> </div>
JQuery的部分:
<script language="javascript"> $(function(){ $(".menu > ul > li > a").click(function(){ var _this=$(this); if(_this.next("ul").length>0){ if(_this.next().is(":visible")){ _this.html(_this.html().replace("▼","►")).next().hide(); }else{ _this.html(_this.html().replace("►","▼")).next().show(); } return false; } }); $(".submenu > li > a").click(function(){ var _this=$(this); if(_this.next("ul").length>0){ if(_this.next().is(":visible")){ _this.html(_this.html().replace("▼","►")).next().hide(); }else{ _this.html(_this.html().replace("►","▼")).next().show(); } return false; } }); $("a").focus( function(){ $(this).blur(); }); }); </script>
CSS部分:放置CSS要設定的值
.menu ul li{ list-style-type: none; } .menu a{ color:#333333; text-decoration:none; font-size:12px; } .menu a:hover{ text-decoration:underline; } .menu .submenu{ margin-left:5px; color:#333333; display:none; list-style-type: none; } .menu .lastmenu{ margin-left:10px; color:#333333; display:none; list-style-type: none; }
就完成了JQuery實作的三層垂直主選單喔~!! 效果如下:
有問題歡迎留言喔~^O^
祝大家成功~>////<
祝大家成功~>////<
留言
張貼留言