2012年2月8日 星期三

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

先前曾有不少朋友問梅干，CSS 語法 能製作出滑鼠碰的下拉式選單嗎？
CSS 語法教學 - 製作下拉式選單 - 簡易版
感覺好像可以又好像不行，因此便回答可利用hover的方式，讓區塊顯示與關閉，應該是可以實作出來，因此今天整理了一下手邊的資料，與當初的想法，製作了一個小範例，只需純 CSS就可實作出滑鼠觸碰的下拉選單，完全不用任何 javascript的語法，經梅干測試，可在IE6、IE7、Firefox2、Firefox3、GoogleChrome、Safari、 Operausb….等瀏覽器下運行。
使用 CSS 語法只能做出很陽春的下拉式選單，如果想要設計功能完整的下拉式選單，最好還是要使用 JavaScript 語法喔！

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<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>


CSS 語法部份

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

/* 整體設置*/
.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;
}
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)