CSS3实现动态多级菜单效果

以下是用CSS3的新特性做的三级菜单系列的效果，在不考虑兼容性的情况下，IE9以上的浏览器，火狐谷歌都可以流畅显示。
对应IE6，7，8来说，动态效果会没有，还需要再做一些HACK处理才行。
代码复制粘贴，即可使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS3实现动态菜单</title>
</head>
<style type="text/css">
/*公共样式*/
*{margin: 0;padding: 0;
}
ul{list-style: none;
}
a{text-decoration: none;color: #fff;display: block;
}
.clearfix{zoom: 1;
}
.clearfix:after{content: " ";display: block;clear: both;height: 0;visibility:hidden;
}
/*主要样式*/
#nav{width: 550px;margin: 20px auto;overflow: hidden;
}
#menu{width: 550px;height: 150px;
}
#menu li{float: left;width: 100px;height: 36px;margin-right: 2px;border-radius: 4px;color:#fff;text-align: center;line-height: 36px;box-shadow: 0 2px 1px #333,0 2px 1px #666;background-color: #ddd;background-image: linear-gradient(#33a6b8,#0089a7);
}
#menu li:hover{border-radius: 4px;background-color: #456;background-image: linear-gradient(#346,#135);
}
/*这边利用CSS3的transition过渡效果，配合hover一起使用*/
#menu li ul{position: relative;visibility: hidden;box-shadow: 0 2px 1px rgba(255,255,255,.3);opacity: 0;margin-top: 8px;transition:all .3s;
}
#menu li:hover>ul{opacity: 1;margin-top: 0;visibility: visible;
}
#menu li ul li ul{position: absolute;left: 102px;top: 0px;
}
#menu li ul li{margin-top:1px;box-shadow: 0 2px 1px #0d5661,0 2px 1px #0c4842;
}
/*制作一个小的三角形效果*/
#menu li ul li:first-child:before{content: "";width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #456;position: absolute;top: -6px;left: 44px;
}
#menu li ul li ul li:first-child:before{content: "";width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid #456;border-top: 6px solid transparent;border-bottom: 6px solid transparent;position: absolute;left: -12px;top:12px;
}
</style>
<body><div id="nav"><ul id="menu" class="clearfix"><li><a href="">博客首页</a><ul><li>个人资料 +<ul><li>小明同学</li><li>小红同学</li><li>小绿同学</li></ul></li><li>发布博文</li><li>最近动态</li></ul></li><li><a href="">内容管理</a><ul><li>新手日记 +<ul><li>今日记录</li><li>活动内容</li><li>心情感悟</li></ul></li><li>项目资源</li><li>资源库</li></ul></li><li><a href="">类别管理</a><ul><li>HTML5 +<ul><li>标签</li><li>属性</li><li>表单操作</li></ul></li><li>CSS3  +<ul><li>选择器</li><li>伪元素</li><li>动态效果</li></ul></li><li>Javascript</li></ul></li><li><a href="">评论管理</a><ul><li>大神评论</li><li>网友点评</li><li>我的粉丝</li></ul></li><li><a href="">草稿箱</a><ul><li>昨天记录</li><li>今天活动</li><li>明天展望</li></ul></li></ul></div>
</body>
</html>

CSS3实现动态多级菜单效果相关推荐

java web动态菜单设计_spring-boot与模板引擎：使用metisMenu实现动态多级菜单
系列传送门在web开发中,特别是后台管理工具的开发,经常用到纵向的多级菜单. 但是常用的Bootstrap仅能支持到2级菜单,对于3级及3级以上的菜单的显示,却无能为力. 下面我将使用另一个jQue ...
html与js二级菜单横排,JavaScript实现横向滑出的多级菜单效果
本文实例讲述了JavaScript实现横向滑出的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JavaScript横向滑出的多级菜单,只用鼠标放上就可以动画出现二级菜单,整体设计精美,大气, ...
c# mvc5 view 多层_MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...
10 个非常酷的基于jQuery的菜单效果插件
除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件. 1. 右击菜单一个创建右击菜单的插件,简洁且易用. 源 ...
Angular 实现树形菜单（多级菜单）功能模块
前言本文要分享的是一个多级菜单效果,也就是传说中的树形结构菜单,理论上支持无限级菜单,当然数据结构要一定的要求,但这都不是什么难事,因为我们可以把数据组装成所需要的结构.下面这个例子虽然不是很完美好 ...
动态导航多级下拉菜单 html,css3实现的多级渐变下拉菜单导航效果代码
本文实例讲述了css3实现的多级渐变下拉菜单导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于css3实现的下拉菜单导航,是非常漂亮的动画菜单,而且是多级菜单的形式,测试时发现可支持5级,估 ...
带心形的CSS3动态菜单效果~花哨、个性！
源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf ...
Qt动态多级导航菜单
该控件使用QScrollArea.QPushButton.QWidget和QVboxLayout模拟树结构. /** 动态多级导航菜单* 内置5种皮肤.两种折叠/展开图标.顶层节点分割线显隐的功能* ...
mysql vue 菜谱_vue+ java 实现多级菜单递归效果
效果如图: 大概思路:树形视图使用的是vue官方事例代码,java负责封装数据,按照vue官方事例的数据结构封装数据即可.有两个需要关注的点: 1.官方事例的数据结构是一个对象里面包含着集合,而不是一 ...

CSS3实现动态多级菜单效果

CSS3实现动态多级菜单效果相关推荐

最新文章

热门文章