纯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垂直手风琴菜单
Jun 28 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
Feb 07 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5语音识别标签写法附图
Nov 18 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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技术开发技巧分享
2010/03/23 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
php和nginx交互实例讲解
2019/09/24 PHP
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
jquery 时间戳转日期过程详解
2019/10/12 jQuery
typescript编写微信小程序创建项目的方法
2021/01/29 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python yield 小结和实例
2014/04/25 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
婚礼证婚人证婚词
2014/01/08 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
金陵十三钗观后感
2015/06/04 职场文书
春季运动会加油词
2015/07/18 职场文书
创业计划书之花店
2019/09/20 职场文书
Python入门之基础语法详解
2021/05/11 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL