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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

Jul 20, 2017 pm 03:00 PM

アニメーションナビゲーションアコーディオン

1. アコーディオンスタイルのナビゲーションはモバイル側と PC 側の両方で使用できます

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;
            *{
                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&gt;li{
                background-color: chartreuse;
                width: 100px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid red;
                margin: 0 auto;
            }&lt;/style&gt;
        &lt;script src=&quot;../js/jquery-3.1.1.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;//            通过jq的滑入滑出动画可作出手风琴式的导航栏$(document).ready(function(){//jq准备函数$("h3").on("click",function(){
                    $("h3").next().slideUp();//当前元素之下的节点$(this).next().stop(true).slideToggle();//使用间歇                })
            })&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;h3&gt;语文&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;语文1&lt;/li&gt;
            &lt;li&gt;语文2&lt;/li&gt;
            &lt;li&gt;语文3&lt;/li&gt;
            &lt;li&gt;语文4&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3&gt;数学&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;数学1&lt;/li&gt;
            &lt;li&gt;数学2&lt;/li&gt;
            &lt;li&gt;数学3&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3&gt;英语&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;英语1&lt;/li&gt;
            &lt;li&gt;英语2&lt;/li&gt;
            &lt;li&gt;英语3&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3&gt;地理&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;地理1&lt;/li&gt;
            &lt;li&gt;地理2&lt;/li&gt;
            &lt;li&gt;地理3&lt;/li&gt;
        &lt;/ul&gt;
        &lt;h3&gt;政治&lt;/h3&gt;
        &lt;ul&gt;
            &lt;li&gt;政治1&lt;/li&gt;
            &lt;li&gt;政治2&lt;/li&gt;
            &lt;li&gt;政治3&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

2. ドロップダウンナビゲーションは PC 側に適しています

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;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&gt;ul{
                margin-left: -45px;
                margin-top: 5px;
                display: none;
            }&lt;/style&gt;
        &lt;script src=&quot;../js/jquery-3.1.1.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;$(document).ready(function(){
                $("#ul&gt;li").hover(function(){//通过hover效果对该元素进行动画$(this).find("ul").stop().slideDown();//找到当前目标元素下的所有子节点下滑                },function(){
                    $(this).find("ul").stop().slideUp();//找到当前目标元素下的所有子节点上滑                })
            })&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;ul id=&quot;ul&quot;&gt;
            &lt;li&gt;去岁一别&lt;ul&gt;
                    &lt;li&gt;一年&lt;/li&gt;
                    &lt;li&gt;两年&lt;/li&gt;
                    &lt;li&gt;三年&lt;/li&gt;
                    &lt;li&gt;四年&lt;/li&gt;
                    &lt;li&gt;五年&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;救赎问候&lt;ul&gt;
                    &lt;li&gt;一次&lt;/li&gt;
                    &lt;li&gt;两次&lt;/li&gt;
                    &lt;li&gt;三次&lt;/li&gt;
                    &lt;li&gt;四次&lt;/li&gt;
                    &lt;li&gt;五次&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;深感愧疚&lt;ul&gt;
                    &lt;li&gt;一句&lt;/li&gt;
                    &lt;li&gt;两句&lt;/li&gt;
                    &lt;li&gt;三句&lt;/li&gt;
                    &lt;li&gt;四句&lt;/li&gt;
                    &lt;li&gt;五句&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

C3 の新しい属性を使用した、より多くのナビゲーションスタイルがあります。アニメーションを活用することで、さまざまなスタイルのナビゲーションを実現します。

以上がJQ はアニメーションナビゲーションのサンプルコードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。