二级菜单的实现

来源：互联网发布：jqplot 动态数据编辑：程序博客网时间：2024/04/30 07:22

css实现：

<!DOCTYPE html><html><head><title>二级菜单-css实现</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}#menu{background: #eee;width: 400px;height: 40px;margin: 0 auto;}ul{list-style:none;}ul li{float: left;line-height: 40px;text-align: center;position: relative;}a{text-decoration: none;color: #000;display: block;width: 90px;}a:hover{color: #FFF;background-color: #666;} ul li ul{display: none;width: 90px;position: absolute;}ul li:hover ul{display: block;} ul li ul li{float: none;margin-top: 2px;background-color: #eee;}</style></head><body><div id="menu"><ul><li><a href="#">首页</a></li><li><a href="#">美食</a><ul><li><a href="#">重庆火锅</a></li><li><a href="#">水煎包</a></li><li><a href="#">烤羊腿</a></li></ul></li><li><a href="#">美景</a><ul><li><a href="#">九寨沟</a></li><li><a href="#">苏州园林</a></li></ul></li><li><a href="#"> 美人</a></li></ul></div></body></html>

原生javascript实现：

<!DOCTYPE html><html><head><title>js实现二级菜单</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}#main{background-color: #eee;width: 400px;height: 40px;margin: 0 auto;}ul{list-style:none;}ul li{float: left;line-height: 40px;text-align: center;width: 90px;}a{text-decoration: none;color: #000;display: block;}a:hover{color: #fff;background-color: #666;}ul li ul{display: none;}ul li ul li{float: none;background-color: #eee;margin: 2px 0;}</style></head><body><div id="main"><ul><li><a href="#">首页</a></li><li onmouseover="showMenu(this)" onmouseout="hideMenu(this)"><a href="#">美食</a><ul><li><a href="#">重庆火锅</a></li><li><a href="#">水煎包</a></li><li><a href="#">烤羊腿</a></li></ul></li><li onmouseover="showMenu(this)" onmouseout="hideMenu(this)"><a href="#">美景</a><ul><li><a href="#">九寨沟</a></li><li><a href="#">苏州园林</a></li></ul></li><li><a href="#">美人</a></li></ul></div><script type="text/javascript">function showMenu(li){var ul = li.getElementsByTagName("ul")[0];ul.style.display = "block";}function hideMenu(li){var ul = li.getElementsByTagName("ul")[0];ul.style.display = "none";}</script></body></html>

jQuery实现：

<!DOCTYPE html><html><head><title>jQuery实现二级菜单</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}#main{background-color: #eee;width: 400px;height: 40px;margin: 0 auto;}ul{list-style: none;}ul li{float: left;line-height: 40px;text-align: center;position: relative;}a{text-decoration: none;color: #000;display: block;width: 90px;}a:hover{color: #fff;background-color: #666;}ul li ul{position: absolute;width: 90px;left: 0;top: 40px;display: none;}ul li ul li{float: none;margin-top: 2px;background-color: #eee;}</style></head><body><div id="main"><ul><li><a href="#">首页</a></li><li class="navOn"><a href="#">美食</a><ul><li><a href="#">重庆火锅</a></li><li><a href="#">水煎包</a></li><li><a href="#">烤羊腿</a></li></ul></li><li class="navOn"><a href="#">美景</a><ul><li><a href="#">九寨沟</a></li><li><a href="#">苏州园林</a></li></ul></li><li><a href="#">美人</a></li></ul></div><script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script><script type="text/javascript">$(function(){$(".navOn").mouseover(function(){$(this).children("ul").show();});$(".navOn").mouseout(function(){$(this).children("ul").hide();});});</script></body></html>

引用的jquery.js的地址：http://jquery.com/；下载的版本不同的话，将项目里引用的版本进行改变

0 0