JQ实现动画导航实例代码

来源：动视网责编：小采时间：2020-11-27 20:17:02

JQ实现动画导航实例代码

JQ实现动画导航实例代码:1.手风琴式导航，既可以适用于移动端也可使用与PC端<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/cs

推荐度：

点击下载本文 文档为doc格式

导读JQ实现动画导航实例代码:1.手风琴式导航，既可以适用于移动端也可使用与PC端<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/cs

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实现动画导航实例代码

JQ实现动画导航实例代码:1.手风琴式导航，既可以适用于移动端也可使用与PC端<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/cs

推荐度：

点击下载本文 文档为doc格式

标签：导航动画实现

热门焦点

JQ实现动画导航实例代码

JQ实现动画导航实例代码

JQ实现动画导航实例代码

最新推荐

猜你喜欢

热门推荐