純css制作的的傾斜導航菜單

2024-09-05 12:20:41

字體：大中小

來源：轉載

供稿：網友

純css制作的的傾斜導航菜單，更個性一些，給人耳目一新的感覺，顏色不喜歡的朋友可自己換下顏色，試著修改一些屬性，會有更多效果。

<!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">#pad {height:150px;}#menu {padding:0 0 0 30px; margin:0; list-style:none;}#menu li {float:left; position:relative; margin-right:2px; display:block; height:0; width:60px; border-bottom:30px solid #069; border-left:30px dashed transparent;}#menu li a {position:absolute; left:60px; top:0; border-top:30px solid #069; border-right:30px dotted transparent; text-decoration:none; font-family:arial, sans-serif; font-size:12px; color:#fff;}#menu li a b {display:block; background:#069; position:absolute; top:-30px; left:-60px; width:60px; height:30px; line-height:30px; text-align:center; cursor:pointer; font-weight:normal;}#menu li#single {width:80px;}#menu li#single a {left:80px;}#menu li#single a b {left:-80px; width:80px;}#menu li a:hover {color:#000;}.home #menu li#home,.single #menu li#single,.dropdown #menu li#dropdown,.dropline #menu li#dropline,.flyout #menu li#flyout,.support #menu li#support,.contact #menu li#contact{border-bottom-color:#e70;}.home #menu li#home a,.single #menu li#single a,.dropdown #menu li#dropdown a,.dropline #menu li#dropline a,.flyout #menu li#flyout a,.support #menu li#support a,.contact #menu li#contact a{color:#000; border-top-color:#e70;}.home #menu li#home a b,.single #menu li#single a b,.dropdown #menu li#dropdown a b,.dropline #menu li#dropline a b,.flyout #menu li#flyout a b,.support #menu li#support a b,.contact #menu li#contact a b{background:#e70;}</style></head><body>	<ul id="menu">	<li id="home">Home</li>	<li id="single">Menu1</li>	<li id="dropdown">Menu2</li>	<li id="dropline">Menu3</li>	<li id="flyout">Menu4</li>	<li id="support">About</li>	<li id="contact">Contact</li>	</ul></body></html>

上一篇：單張背景圖實現自適應寬度的CSS圓角菜單

下一篇：代碼經過精簡后的仿QQ折疊菜單