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 clip-path 用法介绍详解
Mar 01 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
一款纯css3实现的动画加载导航
Oct 08 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 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
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
浅析Ajax语法
2016/12/05 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
对python模块中多个类的用法详解
2019/01/10 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
门卫岗位职责
2013/11/15 职场文书
自我鉴定四大框架
2014/01/17 职场文书
给女儿的表扬信
2014/01/18 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
质检员岗位职责范本
2015/04/07 职场文书
资金申请报告范文
2015/05/14 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android