CSS3实现的炫酷菜单代码分享


Posted in HTML / CSS onMarch 12, 2015

index.html

复制代码
代码如下:

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#s1">Menu 1</a>
<ul class="submenu">
<li><a href="#">Submenu a</a></li>
<li><a href="#">Submenu b</a></li>
<li><a href="#">Submenu c</a></li>
<li><a href="#">Submenu d</a></li>
<li><a href="#">Submenu e</a></li>
<li><a href="#">Submenu f</a></li>
<li><a href="#">Submenu g</a></li>
<li><a href="#">Submenu h</a></li>
</ul>
</li>
<li class="active"><a href="#s2">Menu 2</a>
<ul class="submenu">
<li><a href="#">Submenu a</a></li>
<li><a href="#">Submenu b</a></li>
<li><a href="#">Submenu c</a></li>
<li><a href="#">Submenu d</a></li>
<li><a href="#">Submenu e</a></li>
<li><a href="#">Submenu f</a></li>
<li><a href="#">Submenu g</a></li>
<li><a href="#">Submenu h</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="submenu">
<li><a href="#">Submenu a</a></li>
<li><a href="#">Submenu b</a></li>
<li><a href="#">Submenu c</a></li>
<li><a href="#">Submenu d</a></li>
<li><a href="#">Submenu e</a></li>
<li><a href="#">Submenu f</a></li>
<li><a href="#">Submenu g</a></li>
<li><a href="#">Submenu h</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>

2. CSS

复制代码
代码如下:

.menu, .menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu {
height: 58px;
}
.menu li {
background: -moz-linear-gradient(#292929, #252525);
background: -ms-linear-gradient(#292929, #252525);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
background: -webkit-linear-gradient(#292929, #252525);
background: -o-linear-gradient(#292929, #252525);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
background: linear-gradient(#292929, #252525);

border-bottom: 2px solid #181818;
border-top: 2px solid #303030;
min-width: 160px;
}
.menu > li {
display: block;
float: left;
position: relative;
}
.menu > li:first-child {
border-radius: 5px 0 0;
}
.menu a {
border-left: 3px solid rgba(0, 0, 0, 0);
color: #808080;
display: block;
font-family: 'Lucida Console';
font-size: 18px;
line-height: 54px;
padding: 0 25px;
text-decoration: none;
text-transform: uppercase;
}

Hover代码段:

复制代码
代码如下:

.menu li:hover {
background-color: #1c1c1c;
background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
background: -o-linear-gradient(#1c1c1c, #1b1b1b);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
background: linear-gradient(#1c1c1c, #1b1b1b);

border-bottom: 2px solid #222222;
border-top: 2px solid #1B1B1B;
}
.menu li:hover > a {
border-radius: 5px 0 0 0;
border-left: 3px solid #C4302B;
color: #C4302B;
}

CSS

复制代码
代码如下:

/* submenu styles */
.submenu {
left: 0;
max-height: 0;
position: absolute;
top: 100%;
z-index: 0;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
}
.submenu li {
opacity: 0;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
-webkit-transition: opacity .4s, -webkit-transform .5s;
-moz-transition: opacity .4s, -moz-transform .5s;
-ms-transition: opacity .4s, -ms-transform .5s;
-o-transition: opacity .4s, -o-transform .5s;
transition: opacity .4s, transform .5s;
}
.menu .submenu li:hover a {
border-left: 3px solid #454545;
border-radius: 0;
color: #ffffff;
}
.menu > li:hover .submenu, .menu > li:focus .submenu {
max-height: 2000px;
z-index: 10;
}
.menu > li:hover .submenu li, .menu > li:focus .submenu li {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}

CSS

复制代码
代码如下:

/* CSS3 delays for transition effects */
.menu li:hover .submenu li:nth-child(1) {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.menu li:hover .submenu li:nth-child(2) {
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-ms-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms;
}
.menu li:hover .submenu li:nth-child(3) {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-ms-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.menu li:hover .submenu li:nth-child(4) {
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-ms-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
}
.menu li:hover .submenu li:nth-child(5) {
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.menu li:hover .submenu li:nth-child(6) {
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;
}
.menu li:hover .submenu li:nth-child(7) {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
.menu li:hover .submenu li:nth-child(8) {
-webkit-transition-delay: 350ms;
-moz-transition-delay: 350ms;
-ms-transition-delay: 350ms;
-o-transition-delay: 350ms;
transition-delay: 350ms;
}
.submenu li:nth-child(1) {
-webkit-transition-delay: 350ms;
-moz-transition-delay: 350ms;
-ms-transition-delay: 350ms;
-o-transition-delay: 350ms;
transition-delay: 350ms;
}
.submenu li:nth-child(2) {
-webkit-transition-delay: 300ms;
-moz-transition-delay: 300ms;
-ms-transition-delay: 300ms;
-o-transition-delay: 300ms;
transition-delay: 300ms;
}
.submenu li:nth-child(3) {
-webkit-transition-delay: 250ms;
-moz-transition-delay: 250ms;
-ms-transition-delay: 250ms;
-o-transition-delay: 250ms;
transition-delay: 250ms;
}
.submenu li:nth-child(4) {
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
.submenu li:nth-child(5) {
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-ms-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
}
.submenu li:nth-child(6) {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-ms-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.submenu li:nth-child(7) {
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-ms-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms;
}
.submenu li:nth-child(8) {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}

以上就是本文的全部内容了,希望大家能够喜欢。

HTML / CSS 相关文章推荐
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 HTML / CSS
css3实现3d旋转动画特效
Mar 10 #HTML / CSS
纯css3实现图片翻牌特效
Mar 10 #HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 #HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 #HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 #HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 #HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 #HTML / CSS
You might like
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
ThinkPHP表单自动验证实例
2014/10/13 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python实现购物程序思路及代码
2017/07/24 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python样条插值的实现代码
2018/12/17 Python
python实现合并两个排序的链表
2019/03/03 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
商场主管竞聘书
2014/03/31 职场文书
校庆活动策划方案
2014/06/05 职场文书
就业协议书样本
2014/08/20 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
卖房协议书样本
2014/10/30 职场文书
出差报告范文
2014/11/06 职场文书
大学军训的体会
2014/11/08 职场文书
商务邀请函
2015/01/30 职场文书
兵马俑导游词
2015/02/02 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
解除租赁合同协议书
2016/03/21 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL