首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

css3实现的多级渐变下拉菜单导航效果代码

Posted in HTML / CSS onAugust 31, 2015

本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码。分享给大家供大家参考。具体如下：

这是一款基于css3实现的下拉菜单导航，是非常漂亮的动画菜单，而且是多级菜单的形式，测试时发现可支持5级，估计还可以支持更多的子菜单项，只有你想这么增加下去，CSS3实现的效果真的很棒，期待朋友们现在就赶快学习一下CSS3吧，这些Demo肯定会对你帮助很大。

运行效果截图如下：

css3实现的多级渐变下拉菜单导航效果代码

在线演示地址如下：

具体代码如下：

复制代码
代码如下:
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<meta charset=utf-8>
<title>css3下拉菜单导航</title>
<style>
*{margin:0px;padding:0px;}
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
.tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
#menu {width:700px;text-align:center;height:38px;background:#069;margin:50px auto 300px auto;padding:3px 6px;border-radius:6px;box-shadow:0 15px 10px -15px rgba(0,0,0,0.5);}
#menu ul {margin:0;padding:0;list-style:none;white-space:nowrap;text-align:left;background:#069;}
#menu ul {display:inline-block;}
#menu li {margin:0;padding:0;list-style:none;}
#menu li {display:inline-block;display:inline;}
#menu ul ul {position:absolute;left:-9999px;opacity:0;padding:3px 6px;border-radius:6px;box-shadow:0 15px 10px -15px rgba(0,0,0,0.5);
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
#menu ul.level1 {margin:0 auto;}
#menu ul.level1 li.level1-li {float:left;display:block;position:relative;}
#menu a {display:block;font:normal 12px tahoma, arial, 宋体b8b\4f53, sans-serif;color:#fff;line-height:30px;text-decoration:none;padding:0 20px 0 10px;margin:3px;background:#069;border:1px solid #09c;border-radius:3px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
#menu input {display:none;}
#menu label {display:block;font:normal 12px tahoma, arial, 宋体b8b\4f53, sans-serif;color:#fff;line-height:30px;padding:0 20px 0 10px;margin:3px;position:relative;background:#069;border:1px solid #09c;border-radius:3px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}
#menu label img {position:absolute;left:0;top:0;width:100%;height:100%;}
#menu label b {color:#ff0;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu input#tab1:checked ~ ul.level1 ul.ul1,
#menu input#tab2:checked ~ ul.level1 ul.ul2,
#menu input#tab3:checked ~ ul.level1 ul.ul3 {opacity:1;left:-6px;top:50px;}
#menu input#tab4:checked ~ ul.level1 ul.ul4 {opacity:1;left:auto;right:0;top:50px;}
#menu input#tab2a:checked ~ ul.level1 ul.ul2,
#menu input#tab2b:checked ~ ul.level1 ul.ul2,
#menu input#tab2c:checked ~ ul.level1 ul.ul2,
#menu input#tab2aa:checked ~ ul.level1 ul.ul2 {opacity:1;left:-6px;top:50px;}
#menu input#tab2a:checked ~ ul.level1 ul.ul2 ul.ul2a,
#menu input#tab2b:checked ~ ul.level1 ul.ul2 ul.ul2b,
#menu input#tab2c:checked ~ ul.level1 ul.ul2 ul.ul2c,
#menu input#tab2aa:checked ~ ul.level1 ul.ul2 ul.ul2a,
#menu input#tab2aa:checked ~ ul.level1 ul.ul2 ul.ul2a ul.ul2aa {opacity:1;left:100%;top:auto;margin-top:-40px;margin-left: 5px;}
#menu input#tab4a:checked ~ ul.level1 ul.ul4,
#menu input#tab4b:checked ~ ul.level1 ul.ul4,
#menu input#tab4aa:checked ~ ul.level1 ul.ul4 {opacity:1;left:auto;right:0;top:50px;}
#menu input#tab4a:checked ~ ul.level1 ul.ul4 ul.ul4a,
#menu input#tab4b:checked ~ ul.level1 ul.ul4 ul.ul4b,
#menu input#tab4aa:checked ~ ul.level1 ul.ul4 ul.ul4a,
#menu input#tab4aa:checked ~ ul.level1 ul.ul4 ul.ul4a ul.ul4aa {opacity:1;left:auto;right:100%;top:auto;margin-top:-40px;margin-right:5px;}
#menu li a:hover {border-color:#fff;}
#menu label.close {position:absolute;width:100%;height:30px;display:none;padding:0;left:0;top:0;border:0;background:transparent;}
#menu input#tab1:checked ~ ul.level1 label.lab1,
#menu input#tab2:checked ~ ul.level1 label.lab2,
#menu input#tab2a:checked ~ ul.level1 label.lab2,
#menu input#tab2b:checked ~ ul.level1 label.lab2,
#menu input#tab2c:checked ~ ul.level1 label.lab2,
#menu input#tab2aa:checked ~ ul.level1 label.lab2,
#menu input#tab3:checked ~ ul.level1 label.lab3,
#menu input#tab4:checked ~ ul.level1 label.lab4,
#menu input#tab4a:checked ~ ul.level1 label.lab4,
#menu input#tab4b:checked ~ ul.level1 label.lab4,
#menu input#tab4aa:checked ~ ul.level1 label.lab4 {display:block;}
</style>
</head>
<body>
<div id="menu">
<input type="radio" name="tab" id="tab1" class="tabs">
<input type="radio" name="tab" id="tab2" class="tabs">
<input type="radio" name="tab" id="tab2a" class="tabs">
<input type="radio" name="tab" id="tab2aa" class="tabs">
<input type="radio" name="tab" id="tab2ab" class="tabs">
<input type="radio" name="tab" id="tab2b" class="tabs">
<input type="radio" name="tab" id="tab2c" class="tabs">
<input type="radio" name="tab" id="tab3" class="tabs">
<input type="radio" name="tab" id="tab4" class="tabs">
<input type="radio" name="tab" id="tab4a" class="tabs">
<input type="radio" name="tab" id="tab4aa" class="tabs">
<input type="radio" name="tab" id="tab4b" class="tabs">
<input type="radio" name="tab" id="tabclose" class="tabs">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="#">首 页</a></li>
<li class="level1-li"><label for="tab1" class="open"><img src="images/trans.gif" alt="">关于我 <b>↓</b></label><label for="tabclose" class="close lab1"><img src="images/trans.gif" alt=""></label>
<ul class="ul1">
<li><a href="#">邮 箱</a></li>
<li><a href="#">电 话</a></li>
<li><a href="#">地 址</a></li>
</ul>
</li>
<li class="level1-li"><label for="tab2"><img src="images/trans.gif" alt="">度 假 <b>↓</b></label><label for="tabclose" class="close lab2"><img src="images/trans.gif" alt=""></label>
<ul class="ul2">
<li><a href="#">度假图片</a></li>
<li><label for="tab2a"><img src="images/trans.gif" alt="">度假商店 <b>→</b></label>
<ul class="ul2a">
<li><a href="#">买东西</a></li>
<li><a href="#">互联网销售</a></li>
<li><label for="tab2aa"><img src="images/trans.gif" alt="">买东西圣地 <b>→</b></label>
<ul class="ul2aa">
<li><a href="#">考 验</a></li>
<li><a href="#">附近的</a></li>
<li><a href="#">指导书</a></li>
<li><a href="#">滑 板</a></li>
</ul>
</li>
<li><a href="#">专家介绍</a></li>
</ul>
</li>
<li><a href="#">有趣生活</a></li>
<li><label for="tab2b"><img src="images/trans.gif" alt="">餐 厅 <b>→</b></label>
<ul class="ul2b">
<li><a href="#">冬季旅馆</a></li>
<li><a href="#">夏季旅馆</a></li>
<li><a href="#">秋季旅馆</a></li>
<li><a href="#">冬季旅馆</a></li>
</ul>
</li>
<li><label for="tab2c"><img src="images/trans.gif" alt="">篝火晚会 <b>→</b></label>
<ul class="ul2c">
<li><a href="#">主题晚会</a></li>
<li><a href="#">报导晚会</a></li>
<li><a href="#">野外晚会</a></li>
</ul>
</li>
</ul>
</li>
<li class="level1-li"><label for="tab3"><img src="images/trans.gif" alt="">景区周围环境 <b>↓</b></label><label for="tabclose" class="close lab3"><img src="images/trans.gif" alt=""></label>
<ul class="ul3">
<li><a href="#">为什么去那</a></li>
<li><a href="#">我们做什么</a></li>
<li><a href="#">风 景</a></li>
<li><a href="#">生活卡品</a></li>
</ul>
</li>
<li class="level1-li"><label for="tab4"><img src="images/trans.gif" alt="">动态信息 <b>↓</b></label><label for="tabclose" class="close lab4"><img src="images/trans.gif" alt=""></label>
<ul class="ul4">
<li><a href="#">支付方法</a></li>
<li><label for="tab4a"><img src="images/trans.gif" alt=""><b>←</b> 了解度假村</label>
<ul class="ul4a">
<li><a href="#">本质生活</a></li>
<li><a href="#">保 险</a></li>
<li><label for="tab4aa"><img src="images/trans.gif" alt=""><b>←</b> 廉价房租</label>
<ul class="ul4aa">
<li><a href="#">客 厅</a></li>
<li><a href="#">卧 室</a></li>
<li><a href="#">阳 台</a></li>
</ul>
</li><li><a href="#">附近学校</a></li>
<li><a href="#">学世界</a></li>
<li><a href="#">附近学校</a></li>
</ul>
</li>
<li><label for="tab4b"><img src="images/trans.gif" alt=""><b>←</b> 语 言</label>
<ul class="ul4b">
<li><a href="#">英 语</a></li>
<li><a href="#">中 文</a></li>
<li><a href="#">法 语</a></li>
</ul>
</li>
<li><a href="#">厉害啊</a></li>
</ul>
</li>
<li class="level1-li"><a class="level1-a" href="#">世界观</a></li>
</ul>
</div>
</body>
</html>

希望本文所述对大家的css3网页设计有所帮助。

css3实现的多级渐变下拉菜单导航效果代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比（史上最全版）
Aug 18 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
使用phonegap进行提示操作的具体方法
Mar 30 HTML / CSS
HTML5的postMessage的使用手册
Dec 19 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
table不让td文字溢出操作方法
Dec 24 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 #HTML / CSS
CSS3区域模块region相关编写示例
Aug 28 #HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 #HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 #HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 #HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 #HTML / CSS
全方位了解CSS3的Regions扩展
Aug 07 #HTML / CSS
频率(1) ICF-7600(1) 高放电路(1) SONY(15) TOSHIBA(1) 数调机(1) RP-F11(1) 东芝(1) 手调机(1) 德劲(5)
You might like
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP中动态显示签名和ip原理
2007/03/28 PHP
PHP 手机归属地查询 api
2010/02/08 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
从零开始学习Node.js系列教程四：多页面实现的数学运算示例
2017/04/13 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
ionic3 懒加载
2017/08/16 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
matplotlib设置颜色、标记、线条,让你的图像更加丰富(推荐)
2020/09/25 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
美国儿童运动鞋和服装零售商：Kids Foot Locker
2017/08/05 全球购物
NIHAOMARKET官方海外旗舰店：意大利你好华人超市
2018/01/27 全球购物
Omio荷兰：预订火车、巴士和机票
2018/11/04 全球购物
财务会计毕业生个人求职信
2014/02/03 职场文书
岗位明星事迹材料
2014/05/18 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
对公司的意见和建议
2015/06/04 职场文书
小学同学聚会感言
2015/07/30 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
服务器SVN搭建图文安装过程
2022/06/21 Servers