纯HTML+CSS3制作导航菜单(附源码)


Posted in HTML / CSS onApril 24, 2013

浏览器支持 IE9/GoogleChrome/FireFox/Safari
效果图:
纯HTML+CSS3制作导航菜单(附源码)
代码下载
html代码

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>纯html+css3导航</title>
<!-- mulder -->
<!-- qq:10221408 -->
<!-- 只支持 chrome firefox -->
<style>
*{
margin:0;
padding:0;
}
.clear:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
nav{
display:inline-block;
border:1px solid #505255;
border-bottom: 1px solid #282C2F;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:50px;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
}
li{
list-style:none;
float:left;
border-right: 1px solid #2E3235;
position: relative;
/*background: -moz-linear-gradient(top, #fff, #555D5F 2% ,#555D5F 50%,#3E4245 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #555D5F), color-stop(50%, #555D5F),to(#3E4245));*/
background:#555D5F;
}
li:hover{
/*background: -moz-linear-gradient(top, #fff, #3E4245 2% ,#555D5F 80%,#555D5F 100%);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), color-stop(2%, #3E4245), color-stop(80%, #3E4245),to(#555D5F));*/
background:#3E4245;
-moz-transition: background 1s ease-out;
-webkit-transition: background 1s ease-out;
}
li a{
display:block;
height:40px;
line-height:40px;
padding:0 30px;
font-size:12px;
color:#fff;
text-shadow: 0px -1px 0px #000;
text-decoration:none;
white-space:nowrap;
border-left: 1px solid #999E9F;
border-top: 1px solid #999E9F;
-moz-border-top-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
z-index:100;
}
li > a{
position:relative;
}
li.first a{
-moz-border-radius-topleft: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
}
li.last{
border-right: 0 none;
}
dl{
position:absolute;
display:block;
top:40px;
left: -25px;
width:165px;
background:#222222;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow:1px 1px 3px #292929;
-moz-box-shadow:1px 1px 3px #292929;
z-index:10;
}
li:hover dl{
top:50px;
display:block;
width:145px;
padding:10px;
}
dl a{
background:transparent;
border:0 none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-transition: background 0.5s ease-out;
-webkit-transition: background 0.5s ease-out;
z-index:50;
}
dl a:hover{
color:#FFF;
background:#999E9F;
-moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
dd{
margin-top:-40px;
opacity:0;
width:145px;
-webkit-transition-property:all;
/*-webkit-transition-timing-function: cubic-bezier(5,0,5,0);*/
-moz-transition-property: all;
/*-moz-transition-timing-function: cubic-bezier(5,0,5,0);*/
/*-webkit-transition-delay:5s;
-moz-transition-delay:5s;*/
}
li:hover dd{
margin-top:0;
opacity:1;
}
li dd:nth-child(1){
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
}
li dd:nth-child(2){
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
}
li dd:nth-child(3){
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
}
li dd:nth-child(4){
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
}
dt{
display:none;
margin-top:-25px;
padding-top:15px;
height:10px;
}
li:hover dt{
display:block;
}
.Darrow{
float:right;
margin:18px 10px 0 0;
border-width:5px;
border-color:#FFF transparent transparent transparent;
border-style:solid;
width:0;
height:0;
line-height:0;
overflow:hidden;
cursor:pointer;
text-shadow: 0px -1px 0px #000;
-webkit-box-shadow:0px -1px 0px #000;
-moz-box-shadow:0px -1px 0px #000;
}
.arrow{
margin:0 auto;
margin-top:-5px;
display:block;
width:10px;
height:10px;
background:#222222;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
}
</style>
</head>
<body>
<nav>
<ul class="clear">
<li class="first"><a href="#">菜单一</a></li> _fcksavedurl=""#">菜单一</a></li>"
<li>
<span class="Darrow"></span>
<a href="#">菜单二</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三子菜单三</a></dd>
</dl>
</li>
<li>
<span class="Darrow"></span>
<a href="#">菜单三</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三子菜单三</a></dd>
</dl>
</li>
<li>
<span class="Darrow"></span>
<a href="#">菜单四</a>
<dl>
<dt><span class="arrow"></span></dt>
<dd><a href="#">子菜单一</a></dd>
<dd><a href="#">子菜单二</a></dd>
<dd><a href="#">子菜单三</a></dd>
<dd><a href="#">子菜单四</a></dd>
</dl>
</li>
<li><a href="#">菜单五</a></li>
<li><a href="#">菜单六</a></li>
<li><a href="#">菜单七</a></li>
<li class="last"><a href="#">菜单八</a></li>
</ul>
</nav>
</body>
</html>
HTML / CSS 相关文章推荐
用CSS3将你的设计带入下个高度
Aug 08 HTML / CSS
css3教程之倾斜页面
Jan 27 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
检测浏览器是否支持html5视频的代码
Mar 28 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
Jun 02 HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 #HTML / CSS
CSS3盒子模型详解
Apr 24 #HTML / CSS
CSS3盒子模型详解
Apr 24 #HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 #HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 #HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 #HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 #HTML / CSS
You might like
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
PHP SOCKET编程详解
2015/05/22 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
Python中使用SAX解析xml实例
2014/11/21 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python3.6中anaconda安装sklearn踩坑实录
2020/07/28 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
校运会入场式解说词
2014/02/10 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
呐喊读书笔记
2015/06/30 职场文书
大学生读书笔记大全
2015/07/01 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
 Python 中 logging 模块使用详情
2022/03/03 Python
实现GO语言对数组切片去重
2022/04/20 Golang