JQ はアニメーションナビゲーションのサンプルコードを実装します-jsチュートリアル-php.cn

JQ はアニメーションナビゲーションのサンプルコードを実装します

零下一度

リリース： 2017-07-20 15:00:22

オリジナル

1455 人が閲覧しました

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 中国語 Web サイトの他の関連記事を参照してください。