用JQ帮你实现动画导航 手风琴是导航与下拉导航
Posted 信尔奕骄
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用JQ帮你实现动画导航 手风琴是导航与下拉导航相关的知识,希望对你有一定的参考价值。
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帮你实现动画导航 手风琴是导航与下拉导航的主要内容,如果未能解决你的问题,请参考以下文章
带有下拉图标-chevron 的 Bootstrap Accordion 导航