CSS3應用（1）-二級導航的製做

時間 2019-11-09

標籤 css3 css 應用二級導航製做欄目 CSS 简体版

原文原文鏈接

若是想要實現網頁的二級導航，咱們能夠使用JS技術，動態的顯示和隱藏二級菜單，固然也能夠使用CSS技術來實現。而且這裏推薦使用CSS，由於其效率更高，更流暢。這裏將介紹二級菜單的動態顯示與隱藏。

1 結構

通常導航的主體咱們主要是使用ul li標籤css

<body>
    <header>
        <!-- 一級導航開始 -->
        <nav>
            <ul class="menu">
                <li>
                    <a href="#">首頁</a>
                </li>
                <li>
                    <a href="#">產品</a>
                    <!-- 二級導航開始 -->
                    <ul class="submenu">
                        <li><a href="#">小程序</a></li>
                        <li><a href="#">微信</a></li>
                        <li><a href="#">企業站</a></li>
                    </ul>
                    <!-- 二級導航結束 -->
                </li>
                <li>
                    <a href="#">服務</a>
                    <!-- 二級導航開始 -->
                    <ul class="submenu">
                        <li><a href="#">技術支持</a></li>
                        <li><a href="#">產品外包</a></li>
                    </ul>
                    <!-- 二級導航結束 -->
                </li>
                <li><a href="#">關於咱們</a></li>
                <li><a href="#">人才招聘</a></li>
            </ul>
        </nav>
        <!-- 一級導航結束 -->
    </header>
</body>

2 佈局

導航的佈局，因爲子元素要隨着父元素，因此對二級菜單選取定位佈局。要想讓多個li在一行中顯示，那麼就須要讓li進行浮動。小程序

body{margin: 0; font-size: 14px; color: #666}
        ul,ol{margin: 0;padding: 0; list-style: none;}
        a {text-decoration: none; color: #666;}
        /*一級導航*/
        /*背景色*/
        ul.menu,ul.submenu {
            background-color: #ededed;
        }
        /*一級導航浮動*/
        ul.menu::after {
            content: '';
            display: block;
            clear: both;
        }
        ul.menu > li {
            float: left;
            width: 120px;
            line-height: 3em;
            height: 3em;
            text-align: center;
            cursor:pointer;
        }
    
        /*二級導航項分割線*/
        ul.submenu {
            /*默認隱藏*/
            display: none;
        }
        ul.submenu > li {
            border-bottom: 1px solid #fff;
        }
        
        /*內容區*/
        .content {
            min-height: 800px;
            background-color: #fff;
        }

3. 二級菜單顯示特效

光標放到導航上，當前元素背景色變深，字體顏色變淡。
若是有二級菜單，顯示二級菜單

爲了實現上述兩個特效，咱們能夠利用僞類選擇器（:hover）來捕捉光標懸浮的操做。而且使用僞類選擇器（:hover）來選擇到當前菜單對應的二級菜單微信

利用以下CSS能夠快速實現該特效。佈局

/*選中特效*/
        ul.menu > li:hover {
            background-color: #666;
        }
        ul.menu > li:hover > a {
            color: #fff;
        }
        ul.menu > li:hover > ul.submenu {
            display: block;
        }

4. 動畫

上述代碼中二級菜單的顯示是瞬間的。可否提供一個緩慢動畫過渡的效果，固然也是沒問題。這裏須要使用animation來進行動畫的配置，那麼動畫幀能夠本身寫或者是尋求第三方代碼庫（animate.css）的支持。這裏我將使用透明度來實現這個淡入效果字體

/*動畫幀*/
        @keyframes fade {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        /*基礎動畫樣式*/
        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }
        .fadeIn {
            animation-name: fade;
            animation-direction: normal;
        }

動畫定義好後，能夠直接將動畫樣式引用到ul.submenu上，注意，若是使用的是animate.css，那麼上述步驟將省略，直接用其提供好的動畫樣式便可。動畫

<!-- 二級導航開始 -->
        <ul class="submenu animated fadeIn">
            <li><a href="#">小程序</a></li>
            <li><a href="#">微信</a></li>
            <li><a href="#">企業站</a></li>
        </ul>
        <!-- 二級導航結束 -->

相關標籤/搜索

每日一句

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