纯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折叠菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注