仿flash的css3面包屑导航

时间：2013-04-01 22:21 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>仿flash的css3面包屑导航</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
#info{width:750px;margin:100px auto;}
.menu {width:149px; height:149px; padding:0; margin:0; list-style:none; position:relative; background:#aaa; font-family:arial, sans-serif; float:left; margin-right:1px;
	background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
	background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
.menu li.image {width:0; height:0; position:absolute; left:75px; bottom:0; z-index:10;
}
.menu li.image b {display:block; width:100%; height:100%;
}
.menu li.image b img {display:block; width:100%; height:100%;}

.menu li.list {position:absolute; left:0; top:0; width:149px; height:150px; text-align:center; background:#222; z-index:20;
	background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
	background-image: -ms-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}

.menu li.list b {display:block; margin-top:0; color:#fff; font-weight:normal; font-size:14px; line-height:150px; 
}

.menu li.sub {position:absolute; left:0; top:0; height:150px; z-index:-1;
}
.menu li.sub ul {padding:0; margin:0; list-style:none; width:149px; height:100%; background:#222;
}
.menu li.sub ul li {width:100%;}
.menu li.sub ul li:first-child {padding-top:0px;}
.menu li.sub ul li a {display:block; padding:2px 10px; color:#fff; text-decoration:none; font-size:14px;
}
.menu li.sub ul li a:hover {background:#09c;}
.menu li.sub ul.subRight li a {text-align:right;}

.menu:hover li.list {top:150px; height:200px;border-top:1px solid #fff; border-right:1px solid #fff; border-left:1px solid #fff; margin-left:-1px;
	-moz-transition: 0.5s 0.25s;
	-ms-transition: 0.5s 0.25s;
	-o-transition: 0.5s 0.25s;
	-webkit-transition: 0.5s 0.25s;
	transition: 0.5s 0.25s;
}
.menu:hover li.image {width:180px; height:270px; left:-15px; bottom:-1px;
	-moz-transition: 0.2s 0.5s;
	-ms-transition: 0.2s 0.5s;
	-o-transition: 0.2s 0.5s;
	-webkit-transition: 0.2s 0.5s;
	transition: 0.2s 0.5s;
}
.menu:hover li.image b {margin:46px 0 0 15px; width:83%; height:83%;
	-moz-transition: 0.15s 0.7s;
	-ms-transition: 0.15s 0.7s;
	-o-transition: 0.15s 0.7s;
	-webkit-transition: 0.15s 0.7s;
	transition: 0.15s 0.7s;
}
.menu:hover li.sub {top:151px; height:200px;
	-moz-transition: 0.5s 0.25s;
	-ms-transition: 0.5s 0.25s;
	-o-transition: 0.5s 0.25s;
	-webkit-transition: 0.5s 0.25s;
	transition: 0.5s 0.25s;
}
.menu:hover li.sub ul li:first-child {padding-top:40px;}

.menu:hover li.sub ul.subLeft {margin-left:150px;
	-moz-transition: 0.25s 0.75s;
	-ms-transition: 0.25s 0.75s;
	-o-transition: 0.25s 0.75s;
	-webkit-transition: 0.25s 0.75s;
	transition: 0.25s 0.75s;
}
.menu:hover li.sub ul.subRight {margin-left:-150px;
	-moz-transition: 0.25s 0.75s;
	-ms-transition: 0.25s 0.75s;
	-o-transition: 0.25s 0.75s;
	-webkit-transition: 0.25s 0.75s;
	transition: 0.25s 0.75s;
}
.clear {clear:left;}

</style>
</head>
<body>
<div id="info">
<ul class="menu">
	<li class="image"><img src="http://www.codefans.net/jscss/demoimg/201209/bedroom.jpg" alt=""></li>
	<li class="list">BEDROOM</li>
	<li class="sub">
		<ul class="subLeft">
			<li><a href="/">Item one</a></li>
			<li><a href="/">Item two</a></li>
			<li><a href="/">Item three</a></li>
			<li><a href="/">Item four</a></li>
			<li><a href="/">Item five</a></li>
		</ul>
	</li>
</ul>
<ul class="menu">
	<li class="image"><img src="http://www.codefans.net/jscss/demoimg/201209/kitchen.jpg" alt=""></li>
	<li class="list">KITCHEN</li>
	<li class="sub">
		<ul class="subLeft">
			<li><a href="/">Item one</a></li>
			<li><a href="/">Item two</a></li>
			<li><a href="/">Item three</a></li>
			<li><a href="/">Item four</a></li>
			<li><a href="/">Item five</a></li>
		</ul>
	</li>
</ul>
<ul class="menu">
	<li class="image"><img src="http://www.codefans.net/jscss/demoimg/201209/living.jpg" alt=""></li>
	<li class="list">LIVING ROOM</li>
	<li class="sub">
		<ul class="subLeft">
			<li><a href="/">Item one</a></li>
			<li><a href="/">Item two</a></li>
			<li><a href="/">Item three</a></li>
			<li><a href="/">Item four</a></li>
			<li><a href="/">Item five</a></li>
		</ul>
	</li>
</ul>
<ul class="menu">
	<li class="image"><img src="http://www.codefans.net/jscss/demoimg/201209/play.jpg" alt=""></li>
	<li class="list">PLAY ROOM</li>
	<li class="sub">
		<ul class="subRight">
			<li><a href="/">Item one</a></li>
			<li><a href="/">Item two</a></li>
			<li><a href="/">Item three</a></li>
			<li><a href="/">Item four</a></li>
			<li><a href="/">Item five</a></li>
		</ul>
	</li>
</ul>
<ul class="menu">
	<li class="image"><img src="http://www.codefans.net/jscss/demoimg/201209/study.jpg" alt=""></li>
	<li class="list">STUDY</li>
	<li class="sub">
		<ul class="subRight">
			<li><a href="/">Item one</a></li>
			<li><a href="/">Item two</a></li>
			<li><a href="/">Item three</a></li>
			<li><a href="/">Item four</a></li>
			<li><a href="/">Item five</a></li>
		</ul>
	</li>
</ul>
 
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

仿flash平滑效果的css3面包屑导航，鼠标放在主菜单上，会像面包一样散开内嵌的二级子菜单，包括图片和菜单资源。运用的是CSS3技术，最好使用火狐浏览器。仿flash的css3面包屑导航由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/1036.html

仿flash的css3面包屑导航

网页特效