CSS 語法教學 – 製作下拉式選單 – 簡易版

先前曾有不少朋友問梅干,CSS 語法 能製作出滑鼠碰的下拉式選單嗎?

CSS 語法 - 網頁設計  - CSS 語法教學 - 製作下拉式選單 - 簡易版 - selectMenu

感覺好像可以又好像不行,因此便回答可利用hover的方式,讓區塊顯示與關閉,應該是可以實作出來,因此今天整理了一下手邊的資料,與當初的想法,製作了一個小範例,只需純 CSS就可實作出滑鼠觸碰的下拉選單,完全不用任何 javascript的語法,經梅干測試,可在IE6、IE7、Firefox2、Firefox3、GoogleChrome、Safari、 Operausb….等瀏覽器下運行。

範例預覽  http://photo.minwt.com/file/sampleView/javascript/selectMenu.htm

使用 CSS 語法只能做出很陽春的下拉式選單,如果想要設計功能完整的下拉式選單,最好還是要使用 JavaScript 語法喔!

網頁 HTML 部份,使用 ul li 項目清單

 

 

 

CSS 語法部份

/* 整體設置*/
.navigation {
    margin:0;
    padding:0;
    width:610px;
    list-style-type:none;
    font:12px Arial;
}
.navigation li {
    float:left;
    padding:0;
    margin:0 10px 0 0;
    _margin:0 2px 0 0;
    width:150px;
}

/* 設置選單區塊*/
.navigation li dl {
    width:150px;/*ie6*/
    margin:0;
    padding:0;
    background-color:#fff;
    border:solid 2px #666;
}
.navigation li dt a , .navigation li dd a{
    display:block;
}

/* 設置主選單dt */
.navigation li dt {
    margin:0;
    padding: 5px;
    text-align:center;
    background-color:#fff;
    font-size: 12px;
    font-weight: bold;
    height:15px;
    overflow:hidden;
}
.navigation li dt a ,.navigation  li dt a:visited {
    display:block;
    color:#333;
    text-decoration:none;
}

/* 設置子選單dd */
.navigation li dd {
    margin:0;
    padding:0;
    color: #333;
    background-color:#efefef;
    border-bottom:dotted 1px #666;
}
.navigation li dd.last {
    border-bottom:0;
}
.navigation li dd a, .navigation  li dd a:visited {
    display:block;
    color:#333;
    text-decoration:none;
    padding:4px 5px 4px 20px;
}

/*隱藏子選單*/
.navigation li dd { 
    display:none;
}

/* 滑鼠滑入顯示子選單 */
.navigation li:hover dd, .navigation li a:hover dd {
    display:block;
}

/*ie6 hack*/
.navigation li:hover,.navigation li a:hover {
    border:0;
}
.navigation table {
    border-collapse:collapse;
    padding:0;
    text-align:left;
} 
by
梅干桑
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , .

迴響已被關閉。