您的位置：首页 > 其它

三种方式实现下拉菜单效果

2016-09-02 00:05 246 查看

 

使用3种方式实现下拉菜单效果： html/css 、js方法实现下拉菜单显示隐藏、jquery方法实现下拉菜单显示隐藏

先看效果图

第一种：html/css方式实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下拉菜单的实现</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#nav{
background-color:#eee ;width: 600px;height: 48px;margin: 0 auto;
}
ul{list-style: none;}
ul li{
float: left;line-height: 48px;text-align: center;position: relative;
}
a{text-decoration: none;color: #666;display: block;padding: 0 10px;}
a:hover{color:#fff;background-color: #666666;}
ul li ul li{float: none;background-color: #eee;margin-top: 2px;}
/*使用absolute绝对定位   父类需设置position为relative*/
ul li ul{position: absolute;left: 0;top: 48px;display: none;}
ul li ul li a:hover{background-color: cornflowerblue;}
/*鼠标经过时显示二级菜单*/
ul li:hover ul{display: block;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">javasript</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">javasript</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>

</body>
</html>

 

 第二种：js方法实现下拉菜单显示隐藏

1、首先为菜单添加鼠标悬浮、移除事件

<li onmouseover="showsubmenu(this);" onmouseout="hidesubmenu(this);"><a href="#">课程大厅</a>
<ul>
<li><a href="#">javasript</a></li>
<li><a href="#">jquery</a></li>
</ul>
</li>

2、定义js方法

function showsubmenu(li){
//根据标签名获取对象集合
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidesubmenu(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}

 

 第三种：jquery方法实现下拉菜单显示隐藏

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航