JQ implements animation navigation example code-JS Tutorial-php.cn

JQ implements animation navigation example code

零下一度

Release： 2017-07-20 15:00:22

Original

1454 people have browsed it

1. Accordion navigation can be used on both mobile and PC terminals

<!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>

Copy after login

2. Drop-down navigation is suitable for PC terminals

<!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>

Copy after login

There are more styles of navigation. Using C3 new attributes and animation, various styles of navigation will be realized.

The above is the detailed content of JQ implements animation navigation example code. For more information, please follow other related articles on the PHP Chinese website!