Flycan 飛肯設計學苑:教學網站


【CSS 語法】文章精華區


【教學】 【CSS語法】純CSS實作觸碰下拉式選單



【CSS語法】純CSS實作觸碰下拉式選單
飛肯老師
註冊日期:
2008/2/24 18:28
留言: 1330
離線
先前曾有不少朋友問梅干,CSS能製作出滑鼠碰的下拉式選單嗎?感覺好像可以又好像不行,因此便回答可利用hover的方式,讓區塊顯示與關閉,應該是可以實作出來,因此今天整理了一下手邊的資料,與當初的想法,製作了一個小範例,只需純CSS就可實作出滑鼠觸碰的下拉選單,完全不用任何javascript的語法,經梅干測試,可在IE6、IE7、Firefox2、Firefox3、GoogleChrome、Safari、Operausb….等瀏覽器下運行。

Open in new window


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



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<
title>【梅問題教學網】 CSS觸碰式下拉式選單</title>
<
style type="text/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;
    }
</
style>
</
head>
<
body>
<
ul class="navigation">
    <
li>
    <!--[if
lte IE 6]><a href="#"><table><tr><td><![endif]-->
        <
dl>
            <
dt><a href="#">PC電腦不求人</a></dt>
            <
dd><a href="#">系統</a></dd>
            <
dd><a href="#">網路</a></dd>
            <
dd><a href="#">USB</a></dd>
            <
dd class="last"><a href="#">防毒</a></dd>
        </
dl>
    <!--[if
lte IE 6]></td></tr></table></a><![endif]-->
    </
li>
    <
li>
    <!--[if
lte IE 6]><a href="#"><table><tr><td><![endif]-->
        <
dl>
            <
dt><a href="#">Photoshop</a></dt>
            <
dd><a href="#">疑難雜症</a></dd>
            <
dd class="last"><a href="#">實用範例</a></dd>
        </
dl>
     </
li>
     <!--[if
lte IE 6]></td></tr></table></a><![endif]-->
     <
li>
     <!--[if
lte IE 6]><a href="#"><table><tr><td><![endif]-->
        <
dl>
            <
dt><a href="#">css</a></dt>
            <
dd><a href="#">實用案例</a></dd>
            <
dd class="last"><a href="#">輔助工具</a></dd>
        </
dl>
    <!--[if
lte IE 6]></td></tr></table></a><![endif]-->    
    </
li>
</
ul>
</
body>
</
html>


本文原作「梅干桑老師

2009/3/16 16:40
 


回覆: 【CSS語法】純CSS實作觸碰下拉式選單
會員一級
註冊日期:
2009/4/26 23:47
留言: 4
離線
不過把這一串加到Blogger裡面
彈出的選單
會把下方的側邊欄和本文都往下擠耶∼

是沒有設定z-index的關係嗎?

2009/4/26 23:50
 


回覆: 【CSS語法】純CSS實作觸碰下拉式選單
會員一級
註冊日期:
2009/7/10 8:41
留言: 3
離線
請問是否有什麼地方需要更改的部分
因為我寫到第四個按鈕時就會開始錯誤

2009/7/14 13:15
 


回覆: 【CSS語法】純CSS實作觸碰下拉式選單
會員二級
註冊日期:
2009/2/11 21:58
留言: 6
離線
請問這種選單方式的選單名稱
能夠使用資料庫方式直接叫出來嗎?

2012/9/19 18:33
 




正在瀏覽:   1 名訪客






[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 1 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

http://www.flycan.com.tw/ 電腦設計教學中心

【 Flycan.com 】 Powered by XOOPS