首页 > 代码库 > 下拉菜单实现方式一
下拉菜单实现方式一
实现一个最简单的下拉菜单
由于例子比较简单，所以用文本编辑器写了，nodepad++是个不错的选择，有颜色标注还有智能提示，很好用。
先写一个html标签基本结构
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head><style></style><script src="jquery-1.7.2.js" type="text/javascript" ></script><script></script></head><body></body></html>
接下来写一个列表
<body><ul class="menu"> <li><a href="#">一级菜单</a> <ul> <li><a href="#">二级菜单A</a></li> <li><a href="#">二级菜单B</a></li> </ul> </li></ul></body>
然后接下来写css清除一些无用的东西
*{margin:0; padding:0;border:0}li{list-style-type:none}
加上一些边框之类
.menu li{ border:1px solid #cccccc; width:180px; height:30px; line-height:30px; background-color:#f8f8f8 }
然后让二级菜单隐藏掉
.menu li ul{ position:absolute; left:-999em}
再写一个二级菜单显示的样式
.menu li.on ul{ left:auto}
这样用js来控制on就可以实现下拉菜单了
$(function(){ $(".menu li").mouseover(function(){ $(this).addClass("on"); }) $(".menu li").mouseout(function(){ $(this).removeClass("on"); })})
下拉菜单实现方式一
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。