web前端，html+css+jquery實現水平選單
阿新 • • 發佈：2019-02-03
用到的知識點：
1 列表,常用屬性
2 a元素，常用屬性
3 顯示隱藏
4 jquery點選事件，劃過事件
html:
<!DOCTYPE html> <!--水平選單--> <html> <head lang="en"> <meta charset="UTF-8"> <title>選單</title> <!--引入所有的檔案--> <link href="menu02.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript" src="menu02.js"></script> </head> <body> <ul> <li class="hmain"> <a class="mya" href="#">選單1</a> <ul> <li><a href="#">子選單1</a></li> <li><a href="#">子選單2</a></li> </ul> </li> <li class="hmain"> <a class="mya" href="#">選單2</a> <ul> <li><a href="#">子選單1</a></li> <li><a href="#">子選單2</a></li> </ul> </li> <li class="hmain"> <a class="mya" href="#">選單3</a> <ul> <li><a href="#">子選單1</a></li> <li><a href="#">子選單2</a></li> </ul> </li> <li class="hmain"> <a class="mya" href="#">選單4</a> <ul> <li><a href="#">子選單1</a></li> <li><a href="#">子選單2</a></li> </ul> </li> </ul> </body> </html>
css:
ul,li{ /*去掉選單前面的點*/ list-style: none; } ul{ /*去掉縮排*/ padding: 0; margin: 0; } .mya{ background-image: url("images/bg.jpg"); /*規定只能在x軸方向重複，否則會給子選單也加上背景*/ background-repeat: repeat-x; } a{ /*去掉a的下劃線*/ text-decoration: none; /*居左20*/ padding-left: 20px; /*設定為塊級元素*/ display: block; /*寬度80*/ width: 80px; padding-top: 3px; padding-bottom: 3px; } .hmain a{ color: darkgreen; /*加上向右的箭頭圖示*/ /*圖示太大覆蓋了背景*/ background-image: url("images/right.jpg" ); /*不允許重複*/ background-repeat: no-repeat; } .hmain li a{ color: #000000; /*去掉子選單的向右圖示*/ background-image: none; /*居左3px,垂直居中*/ background-position: 3px center; } .hmain ul{ /*隱藏子選單*/ display: none; } .hmain{ float: left; }jquery:
/** * Created by hao on 2015/9/27. */ $(document).ready(function(){ //.main下面的直接子元素a //滑鼠劃過時的效果 $(".hmain").hover(function(){ //自動判斷是否展開 $(this).children("ul").slideToggle(); changeIcon($(this).children("a")); }); }); // 改變右邊小圖示 function changeIcon(mainNode){ if(mainNode.css("background-image").indexOf("right.jpg")>=0){ mainNode.css("background-image","url('images/bottom.jpg')"); }else{ mainNode.css("background-image","url('images/right.jpg')"); } }
參考視訊：