純css製作導航下拉選單

iceggy發表於2018-05-01


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


 <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屬性的定義中有一點很重要,如果不給新增定位後的元素寬度,那麼此元素會以一個字元的寬度來顯示,從中文文字中可以看出,它就是這麼顯示的,一箇中文字代表一個字元;而英文文字中,一個單詞代表一個字元,注意是一個單詞,不是一個字母。
 所以給此元素新增一個寬度就可以使文字橫向顯示出來。

相關文章