純CSS3實現手風琴風格菜單具體步驟

2024-07-11 08:28:47

字體：大中小

來源：轉載

供稿：網友

今天分享一個如何使用純CSS3創建手風琴風格菜單教程，菜單主要通過使用:target偽類來實現。
:target使用介紹
CSS3 target偽類是眾多實用的CSS3特性中的一個。它用來匹配文檔(頁面)的URI中某個標志符的目標元素。具體來說，URI中的標志符通常會包含一個”#”字符，然后后面帶有一個標志符名稱，比如#respond，target就是用來匹配ID為respond的元素的。
現在在頁面中，點擊一個ID鏈接后，頁面只會跳轉到相應的位置，但是并不會有比較明顯的UI標識，使用:target偽類可以像:hover等偽類一樣對目標元素定義樣式。
第一步：HTML標簽結構
一個簡單的無序列表，每個li中包含一個超鏈接和span，同時為每一個li添加一個不同的id和一個連接到這個id的超鏈接。為了添加樣式和展開菜單項下面的內容，需要使用:target偽類。

復制代碼

代碼如下:
<ul class="accordion">
<li id="one" class="files"><a href="#one">我的文件<span>495</span></a></li>
<li id="two" class="mail"><a href="#two">郵件<span>26</span></a></li>
<li id="three" class="cloud"><a href="#three">網盤<span>58</span></a></li>
<li id="four" class="sign"><a href="#four">退出登錄</a></li>
</ul>

第二步：菜單布局基本樣式
首先修改一些瀏覽器默認樣式，清除margin padding等等。

復制代碼

代碼如下:
.accordion,
.accordion ul,
.accordion li,
.accordion a,
.accordion span {
margin: 0;
padding: 0;
border: none;
outline: none;
text-align:left;
}
.accordion li {
list-style: none;
}

定義菜單項鏈接樣式，添加漸變，陰影的效果，定義字體等。這里沒有指定固定的寬度，菜單的寬度100%填充它的父元素，如果你想把菜單設置成300px，你可以給它添加一個父div，指定寬度為300px就可以了。雖然沒有指定寬度，但是定義了最小寬度，保證菜單布局能夠正確的顯示。

復制代碼

代碼如下:
.accordion li > a {
display: block;
position: relative;
min-width: 110px;
padding: 0 10px 0 40px;
color: #fdfdfd;
font: bold 14px/32px 黑體,宋體;
text-decoration: none;
text-shadow: 0px 1px 0px rgba(0,0,0, .35);
background: #6c6e74;
background: -moz-linear-gradient(top, #6c6e74 0%, #4b4d51 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6c6e74), color-stop(100%,#4b4d51));
background: -webkit-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -o-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: -ms-linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
background: linear-gradient(top, #6c6e74 0%,#4b4d51 100%);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
-moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

上一篇：IE7浮層遮擋問題探討及解決

下一篇：font-family中文字體代碼示例

發表評論

共有條評論