JQ实现动画导航实例代码
- 零下一度原创
- 2017-07-20 15:00:221469浏览
1.手风琴式导航，既可以适用于移动端也可使用与PC端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
list-style: none;
padding: 0;
margin: 0;
}
ul{
display: none;
}
h3{
background-color: blue;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid chartreuse;
margin: 0 auto;
}
ul>li{
background-color: chartreuse;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid red;
margin: 0 auto;
}</style>
<script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">// 通过jq的滑入滑出动画可作出手风琴式的导航栏$(document).ready(function(){//jq准备函数$("h3").on("click",function(){
$("h3").next().slideUp();//当前元素之下的节点$(this).next().stop(true).slideToggle();//使用间歇 })
})</script>
</head>
<body>
<h3>语文</h3>
<ul>
<li>语文1</li>
<li>语文2</li>
<li>语文3</li>
<li>语文4</li>
</ul>
<h3>数学</h3>
<ul>
<li>数学1</li>
<li>数学2</li>
<li>数学3</li>
</ul>
<h3>英语</h3>
<ul>
<li>英语1</li>
<li>英语2</li>
<li>英语3</li>
</ul>
<h3>地理</h3>
<ul>
<li>地理1</li>
<li>地理2</li>
<li>地理3</li>
</ul>
<h3>政治</h3>
<ul>
<li>政治1</li>
<li>政治2</li>
<li>政治3</li>
</ul>
</body>
</html>2.下拉式导航 适用于pc端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">ul{
list-style: none;
margin-left: 35%;
}
ul li{float: left;
width: 100px;
height: 30px;
background-color: deeppink;
line-height: 30px;
text-align: center;
margin-left: 5px;
}
ul li>ul{
margin-left: -45px;
margin-top: 5px;
display: none;
}</style>
<script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(document).ready(function(){
$("#ul>li").hover(function(){//通过hover效果对该元素进行动画$(this).find("ul").stop().slideDown();//找到当前目标元素下的所有子节点下滑 },function(){
$(this).find("ul").stop().slideUp();//找到当前目标元素下的所有子节点上滑 })
})</script>
</head>
<body>
<ul id="ul">
<li>去岁一别<ul>
<li>一年</li>
<li>两年</li>
<li>三年</li>
<li>四年</li>
<li>五年</li>
</ul>
</li>
<li>救赎问候<ul>
<li>一次</li>
<li>两次</li>
<li>三次</li>
<li>四次</li>
<li>五次</li>
</ul>
</li>
<li>深感愧疚<ul>
<li>一句</li>
<li>两句</li>
<li>三句</li>
<li>四句</li>
<li>五句</li>
</ul>
</li>
</ul>
</body>
</html>还有更多样式的导航，使用C3新属性，使用动画，就会实现各种样式导航。
以上是JQ实现动画导航实例代码的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：实现简单的代理服务器功能实例下一篇：分享Ajax与jsonp的实例教程