介面組件--導覽功能表

標籤：

首先把整個導覽功能表放在一個DIV裡，好定位它在頁面的位置（也方便管理li的長度）。li用來設定各功能表項目之間的距離，將a的display屬性設定為block，使整個li都可以點擊，然後設定padding留空白。這是自己看著書上的圖片做的，下拉式功能表因為改成絕對位置使父元素的長度變短，繼承長度後也變短了，使內容換行，給下拉式功能表li添加足夠寬度後，暫時解決了這個問題。

上面寫的這個代碼有很多冗長的地方，比如：

.nav1 ul li:hover ul li ul{display:none;}
.nav1 ul li ul li:hover ul{display:block; position:absolute; left:100%; top:0;width:12em;}

書上的講解如下：

<nav class="multi_drop_menu">    <ul>        <li><a href="#">Power</a></li>        <li><a href="#">Money</a></li>        <li><a href="#">Love</a></li>        <li><a href="#">Fame</a>            <!--二級菜單-->            <ul>            <li><a href="#">Sports Star</a></li>            <li><a href="#">Movie Star</a></li>            <li><a href="#">Rock Star</a>                <!--三級菜單-->                <ul>                <li><a href="#">Bruce Springsteen</a></li>                <li><a href="#">Bono</a></li>                <li><a href="#">Mick Jagger</a></li>                <li><a href="#">Bob Dylan</a></li>                </ul>                <!--三級菜單介紹-->            </li>            <li><a href="#">Web Designer</a></li>            </ul>            <!--二級菜單結束-->        </li>    </ul></nav>

提倡把視覺樣式與功能樣式分開

.multi_drop_menu a{    display:block;  /*讓連結充滿清單項目*/    padding:.2em 1em;    color:#555;    background-color:#eee;    border-width:3px;  /*作為清單項目之間的分隔寬度*/    border-color:transparent;}.multi_drop_menu a:hover{    color:#fff;    background-color:#aaa;}/*添加功能樣式*/.multi_drop_menu ul{float:left;} /*強制ul包圍li*/.multi_drop_menu li{    float:left;    list-style:none;    position:relative; /*為子功能表提供定位上下文*/}.multi_drop_menu li a{    display:block;        border-right-style:solid; /*給每一個連結添加一個右邊框*/        /*背景只出現在內邊距地區後面*/        background-clip:padding-box;        text-decoration:none;}.multi_drop_menu li;last-child a{boder-right-style:none;}
.multi_drop_menu li ul{display:none;}/*臨時隱藏低級菜單*/

為了保證使用者體驗，所有視覺樣式--內邊距、背景、邊框，等等，都要應用給連結a，而不要應用給ul或li，以便熱區（可點擊地區）最大化，讓使用者滑鼠經過時不會產生滑鼠狀態切換。為達到這個目的，同時還要從視覺上分隔連結，這裡使用了background-clip:padding-box聲明，這樣就可以阻止連結的背景延伸到邊框後面。然後，讓邊框透明，在連結之間產生間隙，讓後面的頁面能夠透過邊框被看到。如此一來，不用外邊距也能分隔連結，而且滑鼠從一個功能表項目移動到另一個功能表項目時，也不會出現游標切換，功能表項目之間從視覺上是分開，但實際上卻是緊緊挨在一塊的。

.multi_drop_menu li ul{width:9em;}.multi_drop_menu li li a{    border-right-style:none;/*去掉繼承的右邊框*/    border-top-style:solid;/*添加上邊框*/}.multi_drop_menu li ul{    display:none;    position:absolute;    left:0;    top:100%;}.multi_drop_menu li li{    float:none;  /*停止浮動，恢複堆疊，由於ul寬度為9em，這裡不設定，它們也是堆疊的*/}.multi_drop_menu li li ul{display:none;}

頂邊會與父元素底邊恰好對齊。它與父元素之間的間隙，實際上是下拉式功能表中第一個連結的邊框

.multi_drop_menu li:hover>ul{display:block;}.multi_drop_menu li li ul{    position:absolute;    left:100%;    top:0;}.multi_drop_menu li:hover>a{    color:#fff;    background-color:#aaa;}

上面第二行的意思是：當滑鼠移動到清單項目上時，就顯示它的子列表。這裡的:hover觸發器是設定在li元素而非連結自身上的。這樣做是因為我們想要顯示li的子項目ul，而它不是想連結的子項目。此外，為了只顯示其子項目，懸停清單項目與子列表之間還有一個字選擇符>,如果沒有這個子選擇符，當頂級功能表項目處於懸停狀態時，會同時顯示二級和三級菜單

最後一行的效果：

:hover事件會沿著元素的結構層次“向上冒泡”。所以，把:hover設定在li元素，就相當於也把它設定給了所有祖先li元素。然後，只要再給其子項目（連結）設定樣式即可。這個改進能夠極大地提高菜單的易用性。

 

代碼重用

<nav class="multi_drop_menu vertical">.multi_drop_menu.vertical{width:8em;}.multi_drop_menu.vertical li a{    border-right-style:none;    border-top-style:solid;  }.multi_drop_menu.vertical li li a{border-left-style:solid;}.multi_drop_menu.vertical ul,.multi_drop_menu.vertical li{    float:none;}.multi_drop_menu.vertical li ul{    left:100%;   top:0;}

為側欄設定垂直菜單

只在導航容器有vertical類的情況下才起作用

這裡為nav容器設定了寬度。如果不設定導航容器寬度，那麼nav及其包含的頂級功能表項目都會儘可能延伸。最後，我們把二級菜單與頂級菜單的位置關係，設定成了前面三級菜單和二級菜單之間的關係，即讓子功能表頂邊與父功能表項目頂邊對齊。還去掉了頂級功能表項目的右邊框，代之以上邊框

介面組件--導覽功能表