響應式選單設計 menu範例

Html語法

<span class="toggle">Menu</span>

<nav class="nav">

    <ul>

        <li>

            <a href="#">產品分類</a>

            <ul>

                <li><a href="#">產品分類1</a></li>

                <li><a href="#">產品分類2</a></li>

                <li><a href="#">產品分類3</a></li>

            </ul>

        </li>

        <li><a href="#">關於我們</a></li>

        <li><a href="#">聯絡我們</a></li>

        <li><a href="#">相關連結</a></li>

        <li><a href="#">部落格</a></li>

        <li><a href="#">服務項目</a></li>              

    </ul>

</nav>

Jquery語法

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    $(".toggle").click(function() {

        $(this).toggleClass("active");

        $(".nav").slideToggle();

    });

    $(".nav > ul > li:has(ul) > a").append('<div class="arrow-bottom"></div>');

});

</script>

Css語法

<style>

            body {

                margin: 0;

                padding: 10px;

                font-family: 'Open Sans', sans-serif;

                font-size: 18px;

            }

            nav {

                display: block;

                float: left;

                width: 100%;

                margin-bottom: 30px;

             

            }

            .nav ul{

                margin: 0;

                padding: 0;

            }

            .nav li{

                position: relative;

                float: left;

                color: #FFF;

                list-style: none;

                background: #E77C40;

            }

            .nav li a {

                display: block;      

                padding: 15px 30px;

                color: #FFF;

                text-decoration: none;

            }

            .nav li:hover {

                background: #E9905E;

            }

            .nav li ul {

                background-color: rgba(231, 124, 64, 1);

                display: none;

                position: absolute;

                top: 100%;

            }

            .nav li:hover ul {

                display: block;

                right: 0;

                left: 0;

                top: 100%;

            }

            .toggle {

                display: none;

            }

            .arrow-bottom {

                position: absolute;

                top: 25px;

                right: 13px;

                margin-left: 5px;

                border-top: 4px solid #FFF;

                border-right: 4px solid transparent;  

                border-left: 4px solid transparent;      

                width: 1px;

                height: 1px;

            }

            @media (max-width: 640px) {

                .nav {

                    display: none;

                }

                .toggle {

                    display: inline-block;

                    background: #D8540A;

                    padding: 10px 15px;

                    color: #FFF;

                }

                .nav li{

                    float: none;

                }

                .nav li a{

                    padding: 10px 15px;

                }

                .nav li:hover ul {

                    position: relative;

                    display: block;

                    background: transparent;

                }

                .nav li:hover ul li{

                    background: transparent;

                }

                .nav li:hover ul li a{

                    padding-left: 30px;

                }

                .arrow-bottom {

                    top: 20px;

                }

            }              

        </style>

響應式網頁架站只要6,888元起|[RWD]響應式網站，自適應網頁，讓SEO搜尋引擎最佳化你的網站

"你是獵人還是獵物？"