导航栏,菜单栏下拉简单实现
先看看效果图
<!–
jQuery Drop-down Menu/Navigation bar
Copyright 2017-9-21, Jachin
QQ: 381558301
Email: 381558301@qq.com
需脚本语言:jQuery
纯静态页面
功能的关键点:
父元素需要hover函数触发
子元素必须在父元素里面并且需要绝对定位(绝对定位不影响布局)
兼容ie全家族 over~~~
tip:ie8(包含)以下浏览器需要去除头部的注释,否则样式会出错.
–>
<!DOCTYPE html>
<html lang=”ZH-CN”>
<head>
<meta charset=”utf-8″>
<title>导航栏,菜单栏下拉简单实现</title>
<script src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
<style type=”text/css”>
/样式初始化/
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form,ul,ol{margin:0; padding:0;}
ol,ul { list-style:none; }
.nav span{
display: inline-block;
height:36px;
width:120px;
background: #ff9900;
line-height: 36px;
text-align: center;
position: relative;
}
.nav ul{
position: absolute;
width:120px;
display: none;
background: #f90
}
</style>
</head>
<body>
<div class=”nav”>
<span>导航栏-1
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</span>
<span>导航栏-2
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</span>
<span>导航栏-3
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</span>
</div>
</body>
</html>
<script type=”text/javascript”>
//hover接收2个参数,第一个是经过,第二个是离开;
$(‘.nav span’).hover(function(){
$(this).find(‘ul’).show();
},function(){
$(this).find(‘ul’).hide();
});
</script>
转载于:https://blog.51cto.com/13947669/2318006
今天的文章导航栏下拉菜单效果代码分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/31488.html
