您的位置：首页 > Web前端 > JQuery

用jquery制作一个简单的导航栏

2016-01-19 00:00 921 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习导航栏的制作</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
$(".li1").click(function() {
$(this).next().addClass("dlHover");//取得其下一个兄弟元素
});
$(".ul1").hover(function() {//第一个函数作为鼠标悬浮时执行的函数
$(this).children(".li1").addClass("bg");//取得子元素中class="li1"的元素
}, function() {//第二个函数作为鼠标离开时执行的函数
$(this).children(".li1").removeClass("bg");
$(this).children(".li2").removeClass("dlHover");
});
});
</script>
<style>
*{margin: 0px;padding: 0px;text-align: center;}
ul li{list-style: none;}
.nav_div{height: 20px;}
.li2{display:none;width: 100px;border: 1px solid gray;background: #00FFFF;}
.dlHover{position:absolute;z-index: 9999;display: block;}
.ul1{border: 1px solid gray;width: 100px;background-color: #999999;}
.bg{background-color: #1F9999;}
dl,dt,dd{border: 1px solid gray;width: 200px;}
.ul1{float: left;}
</style>
</head>
<body>
<div class="nav_div">
<!-- 导航开始 -->
<ul class="ul1">
<li class="li1">导航1</li>
<li class="li2">
<ul>
<li><a href="#">二级菜单1</a><li>
<li><a href="#">二级菜单1</a></li>
</ul>
</li>
</ul>
<ul class="ul1">
<li class="li1">导航2</li>
<li class="li2">
<ul>
<li><a href="#">二级菜单2</a><li>
<li><a href="#">二级菜单2</a></li>
</ul>
</li>
</ul>
<ul class="ul1">
<li class="li1">导航3</li>
<li class="li2">
<ul>
<li><a href="#">二级菜单3</a><li>
<li><a href="#">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
<!-- 导航开始 -->
<div>
<dl style="border: 1px solid gray;">
<dt>学习导航栏的制作</dt>
<dd>这是一个简单的导航栏</dd>
<dd>这是一个简单的导航栏</dd>
<dd>这是一个简单的导航栏</dd>
</dl>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航