一、实现效果
1.初始化效果：未添加样式和特效
2、添加CSS样式
3、最终效果
二、JQuery代码
<!--编写JQuery代码-->
<script type="text/javascript">
$(document).ready(function(){
$(".level>a").click(function(){
$(this).addClass("current") //给当前元素添加current样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除“current”样式
.next().hide(); //他们的下一个元素隐藏
return false;
})
})
</script>
三、完整代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-">
<title>JQuery制作导航栏</title>
<script type="text/javascript" src="../JQuery库文件/jquery-...min.js"></script> <!--引入JQuery库文件-->
<style type="text/css">
/*设置通用样式*/
*{
padding: ;
margin: ;
}
.box{
margin: auto;
border: solid #BEBEBE px;
width: px;
}
ul{
list-style: none;
}
a {
color:#F;
text-decoration:none;
line-height: px;
}
/*level*/
.level a{
display: block; /*!!!转换为块状元素*/
height: px;
width: px;
background-color: #EBFF;
padding-left: px;
border: solid px #BEBEBE;
}
.level a.current{
background-color:#BDEF;
}
/*level*/
.level a{
background: #ffffff;
color: #EEE;
border: none;
}
.level a:hover {
color:red;
}
.level{
display: none;
}
</style>
<!--编写JQuery代码-->
<script type="text/javascript">
$(document).ready(function(){
$(".level>a").click(function(){
$(this).addClass("current") //给当前元素添加current样式
.next().show() //下一个元素显示
.parent().siblings().children("a").removeClass("current") //父元素的同辈元素的子元素<a>移除“current”样式
.next().hide(); //他们的下一个元素隐藏
return false;
})
})
</script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level">
<a href="#">衬衫</a>
<ul class="level">
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">短袖T恤</a></li>
<li><a href="#">长袖T恤</a></li>
</ul>
</li>
<li class="level">
<a href="#">卫衣</a>
<ul class="level">
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
<li><a href="#">运动卫衣</a></li>
<li><a href="#">童装卫衣</a></li>
</ul>
</li>
<li class="level">
<a href="#">裤子</a>
<ul class="level">
<li><a href="#">短裤</a></li>
<li><a href="#">休闲裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">免烫卡其裤</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
您可能感兴趣的文章:
- jquery 导航条的效果(css选择器控制)
- Jquery实现带动画效果的经典二级导航菜单
- jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
- jquery 面包屑导航 具体实现
- 用jQuery实现一些导航条切换,显示隐藏的实例代码
- jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
- 用jquery的方法制作一个简单的导航栏
- 简单的jquery左侧导航栏和页面选中效果
- jQuery 实现侧边浮动导航菜单效果
- jquery实现点击变换导航样式的方法
- jQuery实现气球弹出框式的侧边导航菜单效果
