用JQ幫你實現動畫導航手風琴是導航與下拉導航

時間 2019-11-11

原文原文鏈接

1.手風琴式導航，既能夠適用於移動端也可以使用與PC端javascript

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

<!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新屬性，使用動畫，就會實現各類樣式導航。html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

用JQ幫你實現動畫導航 手風琴是導航與下拉導航

用JQ幫你實現動畫導航手風琴是導航與下拉導航