技術提供:Blogger.

創意網頁設計,響應式網頁,部落格版型,資料庫,購物車,Bootstrap,RWD,html,css,php,jquery,MySQL,專營綠茶,紅茶,高山凍頂烏龍,阿里山杉林溪梨山大禹嶺茶及茶葉罐杯壺禮盒批發零售,兼營艋舺快遞,汽機車外送,中央果菜市場,環南市場,迪化街等地代購採買及各項代理服務! 孟甲服務專線:0952-916626
E-mail:roberchen3@gmail.com


響應式選單menu

<!DOCTYPE html>
<html lang="zh-TW">
    <head>
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--[if IE 7]>
        <link rel="stylesheet" href="/stylesheets/font-awesome-ie7.min.css">
        <![endif]-->
        <!--[if lt IE 9]>
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/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>
        <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>
    </head>
    <body>
<span class="toggle">Menu</span>
<nav class="nav">
    <ul>
        <li>
            <a href="#">Works</a>
            <ul>
                <li><a href="#">Work1</a></li>
                <li><a href="#">Work2</a></li>
                <li><a href="#">Work3</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Service</a></li>              
    </ul>
</nav>
    </body>
</html>
~歡迎轉載,但請註明來源網站名稱和網址,文章若有侵權,請來信告知,我們會盡快處理~

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

"你是獵人還是獵物?"

Related Posts Plugin for WordPress, Blogger...

0 comments :

張貼留言

1.猛甲茶道,歡迎多留言,可以幫自己網站打廣告~
2.需要 猛甲茶道 回覆,請勿使用匿名留言[可使用名稱/網址,名稱填自己名字,若無網址,請填E-mail]。
3.匿名攻訐、不相干之廣告適用於無條件刪去法,望請海涵:)
4.您可以使用一些 HTML 標記,如:
 <b>粗體</b>, <i>斜體</i>, <a href='網址'>描述文字</a>