CSS3 二级菜单
2017-02-18 20:21
302 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF8"> <style> body { margin: 0; } nav { font-size: 14px; /* 由于其下的菜单元素都是float的,如果不设置其width和position:relative,当宽度不够时,会变到下一行去 */ min-width: 1415px; width: 100%; position: relative; /* 由于其子元素全是absolute或float,所以其检测不到子元素高度,因此它的高度将被设为0,所以需要手动设置其height */ height: 41.5px; background-color: #444; } nav dl { /* 去掉列表的上边界 */ margin: 0; } /* 所有导航栏 */ nav dd { /* dd或者li的左边距都是margin造成的*/ margin: 0; width: 200px; text-align: center; background-color: #444; } nav a { /* inline-block不会换行,block会自动换行,但是后面接了一个float所以都一样 另外没有display:block或者display:inline-block的话padding不会生效; */ display: inline-block; /* 设置父元素的高度无法使其垂直居中,所以只能通过line-height或padding或margin来实现 */ line-height: 40px; color: white; text-decoration: none; } nav>dl { position: absolute; } nav>dl>dd { /* float和position:absolute的作用一样*/ float: left; border-left: 1px solid black; } nav>dl>dd:last-child { border-right: 1px solid black; } /* '>'表示前一个元素是后一个元素的父元素 */ nav>dl>dd:hover { background-color: black; } nav>dl>dd:hover>a { font-weight: bold; } /* 二级导航栏 */ nav>dl>dd>dl>dd { background-color: #555; /*border: none;*/ } nav>dl>dd>dl>dd:hover { background-color: #600; font-weight: bold; } nav>dl>dd>dl { display: none; /* 这里不能做height的动画,因为并不能用height:100%,只能用具体的height像素值 transition: height 5s; height: 0px; overflow: hidden; */ } nav>dl>dd:hover>dl { /* 只有当鼠标移到该列表项时,该项的子列表才显示 */ display: block; } main { /* 这里要清空float属性,否则正文部分会还是环绕布局 */ clear: left; padding: 20px; } </style> </head> <body> <header> <nav> <dl> <dd><a href="#">网页前端编程语言</a> <dl> <dd><a href="#">HTML5</a></dd> <dd><a href="#">CSS3</a></dd> <dd><a href="#">Javascript</a></dd> </dl> </dd> <dd><a href="#">网页前端编程框架</a> <dl> <dd><a href="#">Less</a></dd> <dd><a href="#">Sass</a></dd> <dd><a href="#">Bootstrap</a></dd> <dd><a href="#">jQuery</a></dd> <dd><a href="#">jQuery UI</a></dd> <dd><a href="#">jQuery EasyUI</a></dd> <dd><a href="#">AngularJS</a></dd> <dd><a href="#">Vue.js</a></dd> </dl> </dd> <dd><a href="#">网页后端编程语言</a> <dl> <dd><a href="#">PHP</a></dd> <dd><a href="#">ASP.NET</a></dd> <dd><a href="#">JSP</a></dd> <dd><a href="#">Ruby</a></dd> <dd><a href="#">Node.js</a></dd> <dd><a href="#">Dart</a></dd> <dd><a href="#">Django</a></dd> <dd><a href="#">Docker</a></dd> </dl> </dd> <dd><a href="#">手机编程语言</a> <dl> <dd><a href="#">Objective-C</a></dd> <dd><a href="#">Swift</a></dd> <dd><a href="#">Android</a></dd> <dd><a href="#">jQuery Mobile</a></dd> <dd><a href="#">ionic</a></dd> <dd><a href="#">PhoneGap</a></dd> </dl> </dd> <dd><a href="#">PC端编程语言</a> <dl> <dd><a href="#">Java</a></dd> <dd><a href="#">C</a></dd> <dd><a href="#">C++</a></dd> <dd><a href="#">C#</a></dd> <dd><a href="#">Visual Basic .NET</a></dd> <dd><a href="#">Assembly language</a></dd> <dd><a href="#">Qt</a></dd> <dd><a href="#">Go</a></dd> <dd><a href="#">Delphi</a></dd> <dd><a href="#">Visual Basic</a></dd> </dl> </dd> <dd><a href="#">数据库编程语言</a> <dl> <dd><a href="#">Oracle</a></dd> <dd><a href="#">MySQL</a></dd> <dd><a href="#">mariadb</a></dd> <dd><a href="#">SQLite</a></dd> <dd><a href="#">MongoDB</a></dd> <dd><a href="#">IndexDB</a></dd> </dl> </dd> <dd><a href="#">统计分析语言</a> <dl> <dd><a href="#">Python</a></dd> <dd><a href="#">Perl</a></dd> <dd><a href="#">R</a></dd> <dd><a href="#">MATLAB</a></dd> </dl> </dd> </dl> </nav> </header> <main> <article> <p>导航栏是指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用。</p> <h4>应用范围:</h4> <p>通常情况下,<a href="http://baike.baidu.com/view/23618.htm" target="_blank">wordpress<sup>[1]</sup></a> 平台主题里的导航栏是不允许将其链接任意定制成其它链接的,但是每当你撰写了一个新页面,导航栏就会自动多出一个链接指向该页面的按钮。 一般都是使用在WEB网站中,例如百度眉页上面的一些选项"新闻,网页,MP3,知道…"等就是导航栏的一种范例。 网站使用导航栏是为了让访问者更清晰明朗的找到所需要的资源区域,寻找资源。</p> </article> </main> </body> </html>
要想添加下拉动画,只需要在CSS的最后添加如下代码
/* 要想制作拉下动画由于不知道dl的高度,那么就只能变换dd的高度了 */ nav>dl>dd>dl { display: block; } nav>dl>dd>dl>dd { transition: height 1s; height: 0px; } nav>dl>dd:hover>dl>dd { height: 40px; }
相关文章推荐
- 实列教程 一款基于jquery和css3的响应式二级导航菜单
- 二级菜单----css3特效,无jQuery
- 一款基于jquery和css3的响应式二级导航菜单
- CSS3实现二级菜单
- 一款基于jquery和css3的响应式二级导航菜单
- 一款基于jquery和css3的响应式二级导航菜单
- 一款基于jquery和css3的响应式二级导航菜单
- 第十八篇——JDBC操作数据库之二级菜单联动
- 原生js实现二级联动下拉列表菜单
- Menu组件显示二级菜单时seperate间距太大问题。
- 代码示例展现PHP二级联动菜单的实现
- Jquery css div弹出二级菜单代码
- JS+CSS实现TreeMenu二级树形菜单完整实例
- css3立体旋转菜单
- JS+CSS实现简单的二级下拉导航菜单效果
- Android Laucher3 去掉二级菜单
- CSS3多颜色风格切换的菜单
- Ajax实现动态的二级级联菜单
- jquery实现带二级菜单的导航示例
- CSS3 翻滚吧 菜单