仿flash的css3面包屑导航
仿flash平滑效果的css3面包屑导航，鼠标放在主菜单上，会像面包一样散开内嵌的二级子菜单，包括图片和菜单资源。运用的是CSS3技术，最好使用火狐浏览器。
当前位置：编程学习 > JS >>
答案：<!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"><b><img src="/jscss/demoimg/201209/bedroom.jpg" alt=""></b></li>
<li class="list"><b>BEDROOM</b></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"><b><img src="/jscss/demoimg/201209/kitchen.jpg" alt=""></b></li>
<li class="list"><b>KITCHEN</b></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"><b><img src="/jscss/demoimg/201209/living.jpg" alt=""></b></li>
<li class="list"><b>LIVING ROOM</b></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"><b><img src="/jscss/demoimg/201209/play.jpg" alt=""></b></li>
<li class="list"><b>PLAY ROOM</b></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"><b><img src="/jscss/demoimg/201209/study.jpg" alt=""></b></li>
<li class="list"><b>STUDY</b></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>
<br class="clear">
</div>
</body>
</html>上一个：Expanding Image Menu jQuery点击图片可伸展的菜单
下一个：黑色简易的网页选项卡（实则滑动门）
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js把图片转换成 base64代码
- js把base代码转换成图片
- JS 将 base64编码的图片转化为图片文件
- js中的定时器
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。