純css製作導航下拉選單

iceggy發表於2018-05-01
CSS


轉載文章，覺得作者思路很好


 <nav>
        <ul>
            <li><a href="#">導航一</a>
                <ul>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                </ul>
            </li>
            <li><a href="#">導航二</a></li>
            <li><a href="#">導航三</a>
                <ul>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a>
                        <ul>
                            <li><a href="#">三級導航</a></li>
                            <li><a href="#">三級導航</a></li>
                            <li><a href="#">三級導航</a></li>
                        </ul>
                    </li>
                    <li><a href="#">二級導航</a></li>
                </ul>
            </li>
            <li><a href="#">導航四</a>
                <ul>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                </ul>
            </li>
            <li><a href="#">導航五</a>
                <ul>
                    <li><a href="#">二級導航</a></li>
                    <li><a href="#">二級導航</a></li>
                </ul>
            </li>
            <li><a href="#">導航六</a></li>
        </ul>
    </nav>   1234567891011121314151617181920212223242526272829303132333435363738394041


nav {
    margin:100px auto;
    text-align:center;
}
nav ul {
    border-radius:10px;
    background:linear-gradient(to bottom,#efefef,#bbbbbb);
    padding:0 20px;
    display:inline-table;
    position:relative; 
    box-shadow:1px 1px 3px #666;
}
nav ul ul {
    display:none;
}
nav ul li {
    float:left;
}
nav ul::after {
    content:"";
    display:block;
    clear:both;
}
nav ul li a {
    display:block;
    padding:25px 40px;
    color:#000;
    text-decoration:none;
    font-family:"微軟雅黑";
}
nav ul li:hover > ul {
    display:block;
}
nav ul li:hover {
    background:linear-gradient(to bottom,#4f5964,#5f6975);
}
nav ul li:hover a {
    color:#FFF;
}
nav ul ul {
    background:#5f6975;
    border-radius:0;
    position:absolute;
    top:100%;
    padding:0;
}
nav ul ul li {
    float:none;
    border-top:1px solid #6b727c;
    border-bottom:1px solid #575f6a;
}
nav ul ul li a {
    color:#FFF;
}  
nav ul ul li a:hover {
    background:#4b545f;
}
nav ul ul ul {
    width:100%;
    position:absolute;
    left:100%;
    top:50%;
}
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364


思路：


做一個下拉選單，腦海裡第一個閃過的效果就是：滑鼠觸及-下拉選單出現-滑鼠移開-下拉選單隱藏  
既然是純css實現。首先需要了解display屬性的特性，使用none、block值來實現下拉選單的出現和隱藏。 
搭配html結構，利用<ul><li></li></ul>對選單進行分級 
熟悉偽類選擇器，:hover不止在文字中使用
利用::after偽元素選擇器來清除浮動
使用position定位來控制下拉選單的位置
考慮美觀 


以上案例用到了一些css3的新特性，如：圓角、背景陰影、背景色漸變、偽元素 


圓角 border-radius
當值為四個數值時，按順序分別表示左上角、右上角、右下角、左下角。
當值為兩個數值時，前者表示左上角、右下角；後者表示右上角、左下角；兩者是對立關係。
當值為一個數值時，說明元素的四個角都使用這一數值。
border-radius還可以用來製作半圓，以及四分之一圓 




div {
    width:100px;
    height:50px;
    border-radius:50px 50px 0 0;
    background-color:#F00;
}123456


背景陰影 box-shadow
語法：box-shadow：【水平陰影】 【垂直陰影】【陰影模糊距離】 【陰影模糊程度】【陰影顏色】【內部陰影】/【外部陰影】
其中，水平陰影、垂直陰影是必須項，其他為可選項，陰影位置預設為外部陰影（outset）。 
背景顏色漸變
線性漸變語法  background：linear-gradient（方向，起始顏色，終止顏色）；
方向也稱角度，線性漸變的角度是以圓心為起點的發散型角度。例如：想要一個由上往下的紅白漸變  background:linear-gradient(to bottom,red,white);
關於顏色漸變這一特性其實需要講述的有很多，會單開一篇博文來做詳細講解 
偽元素
上一篇博文中提到的利用偽元素選擇器來清除浮動，在這個案例中就運用到了，詳情請翻上一篇。 



遇到的問題及解決辦法 


display：inline-table不設定寬度時，寬度由內容撐開
在案例中，並沒有給任何父元素或者子元素新增寬、高，而是使用padding值和內容本身將元素撐開。在未設定display：inline-table的情況下，元素的寬就是整個瀏覽器的寬度，是隨著瀏覽器的大小來改變的。設定後，元素的寬=padding-left+內容+padding-right 
給元素設定定位時，需要給一個寬度
當第三級選單出現時，文字是以單個豎排的方式來顯示(中、英文文字的排列不同)，如下圖：
 

 

在上圖的三級導航中，中、英文排序方式完全不同，position屬性的定義中有一點很重要，如果不給新增定位後的元素寬度，那麼此元素會以一個字元的寬度來顯示，從中文文字中可以看出，它就是這麼顯示的，一箇中文字代表一個字元；而英文文字中，一個單詞代表一個字元，注意是一個單詞，不是一個字母。
 所以給此元素新增一個寬度就可以使文字橫向顯示出來。

相關文章