JQ实现动画导航实例代码-js教程-PHP中文网

JQ实现动画导航实例代码

零下一度

发布： 2017-07-20 15:00:22

原创

1277人浏览过

1.手风琴式导航，既可以适用于移动端也可使用与pc端

nbsp;html&gt;

    
        <meta>
        <title></title>
        <style>
            *{
                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></script>
        <script>//            通过jq的滑入滑出动画可作出手风琴式的导航栏$(document).ready(function(){//jq准备函数$("h3").on("click",function(){
                    $("h3").next().slideUp();//当前元素之下的节点$(this).next().stop(true).slideToggle();//使用间歇                })
            })</script>
    
    
        <h3>语文</h3>

登录后复制

语文1
语文2
语文3
语文4

数学

数学1
数学2
数学3

英语

英语1
英语2
英语3

地理

地理1
地理2
地理3

政治

政治1
政治2
政治3

2.下拉式导航适用于pc端

nbsp;html&gt;

    
        <meta>
        <title></title>
        <style>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></script>
        <script>$(document).ready(function(){
                $("#ul>li").hover(function(){//通过hover效果对该元素进行动画$(this).find("ul").stop().slideDown();//找到当前目标元素下的所有子节点下滑                },function(){
                    $(this).find("ul").stop().slideUp();//找到当前目标元素下的所有子节点上滑                })
            })</script>

登录后复制