2015
02
25

before實例 (以下拉選單為例)

關鍵字:before偽元素純CSS下拉選單

不知道大家記不記得之前有寫過的,純CSS下拉選單、以及純CSS三角形,這次要結合這兩種方法,還有:before偽元素的效果,做一個範例,如下圖:

以前下拉選單想要有三角形的效果,需要額外再設定一個div,還要切圖,相當麻煩,現在只要設定:before就可以輕輕鬆鬆把三角形放在想要的地方囉!

HTML:
<body>
<div id="menuBox">
<div id="menu">
<!----------------------------第一層---------------------------->
<ul class="nav"><li><a href="#">最新訊息</a></li></ul>

<!----------------------------第一層---------------------------->
<ul class="nav">
<li><a href="#">關於公司</a>
<!--第二層////三角形放置的地方////-->
<ul>
<li><a href="#">公司介紹</a></li>
<li><a href="#">公司理念</a> </li>
<li><a href="#">公業活動</a></li>
<li><a href="#">來台介紹</a></li>
</ul>
</li>
</ul>

<!----------------------------第一層---------------------------->
<ul class="nav"><li><a href="#">公司架構</a> </li></ul>

<!----------------------------第一層---------------------------->
<ul class="nav"><li><a href="#">css語法</a></li></ul>

</div>
<!--END--menu-->
</div>
<!--END--menuBox-->
</body>

CSS設定:
* {
margin:0;
padding:0;
}

#menuBox {
background-color:#B09784;
background-repeat:repeat-x;
height:40px;
}

#menu {
width:800px;
height:40px;
margin:0 auto;
}

/*--第一層--*/
ul.nav {
list-style:none;
}

ul.nav li {
height:40px;
float:left;
margin:0 15px;
line-height:40px;
}

ul.nav li a {
font-size:15px;
color:#ffffff;
text-decoration:none;
}

ul.nav li a:hover {
color:#5e4326;
}


/*--第一層觸發時,第二層狀態--*/
ul.nav li ul {
position:absolute;
visibility:hidden;
list-style:none;
}

ul.nav li:hover ul {
visibility:visible;
background-color:#77624C;
margin-top:-1px;
}

/*--第二層--*/
ul.nav li ul li {
clear:both;
height:32px;
line-height:32px;
margin:0;
}

ul.nav li ul li:hover {
background-color:#e0d0b8;
}

/*--第二層文字連結--*/
ul.nav li ul li a {
display:block;
min-width:130px;
height:32px;
padding:0 18px;

font-size:15px;
color:#ffffff;
text-decoration:none;
}

ul.nav li ul li a:hover {
color:#5e4326;
background-color:#e0d0b8;
}

/*--●●●重點在這裡●●●下拉三角形設定--*/
ul.nav li ul:before {
content:"";

/*三角形定位*/
position:absolute;
top:-10px;
left:20px;
bottom:auto;

/*三角形樣式*/
border:10px solid transparent;
border-top:0;
border-bottom-color:#77624C;
}
:before表示在第二層的ul前面,再插入一個元素,然後再去設定三角形的樣式、定位,就可以不用額外給三角形一個div,輕輕鬆鬆的完成囉~不僅是使用在下拉選單上面,一些不是很主要,裝飾為主的元素,都可以用這樣的方法來製作,就可以省下很多時間喔~


如果需要下拉選單和三角形的範例,可以找之前的文章:
2014-07-08(超實用純CSS無限階層下拉選單)
2014-09-15(不需圖片,純css也能做出三角形ICON)
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所