一、垂直菜单的实现
<!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(); });});