css3创建一个下拉菜单
难度:中级,预计完成时间:1小时
先看下效果图:
在学习本教程之前请做先阅读以下关于css3的文章:
1.编写html代码(dom结构)
<ul class="nav"> <li> <a href="#">What's new</a> <div> Mega Menu Content... </div> </li> <li><a href="#">Top rated</a></li> <li> <a href="#">Earnings</a> <div> Mega Menu Content... </div> </li> <li><a href="#">Rings</a></li> <li><a href="#">Bracelets</a></li> <li><a href="#">All Categories</a></li> <li class="nav-search"> <form action="#"> <input type="text" placeholder="Search..."> <input type="submit" value=""> </form> </li> </ul>
2.重置下无序列表样式
由于浏览器默认的样式不统一,这里我们需要复位下样式
/* Reset */ .nav, .nav a, .nav ul, .nav li, .nav div, .nav form, .nav input { margin: 0; padding: 0; border: none; outline: none; } .nav a { text-decoration: none; } .nav li { list-style: none; }
然后要设置菜单容器及子标签li基本样式
/* Menu Container */ .nav { display: inline-block; position: relative; cursor: default; z-index: 500; } /* Menu List */ .nav > li { display: block; float: left; }
菜单的超链接样式
这里要菜单项的字体、大小、文字阴影等基本样式。为了让其达到平滑的过渡效果,这里引用了css3的属性transition.
/* Menu Links */ .nav > li > a { position: relative; display: block; z-index: 510; height: 54px; padding: 0 20px; line-height: 54px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #fcfcfc; text-shadow: 0 0 1px rgba(0,0,0,.35); background: #372f2b; border-left: 1px solid #4b4441; border-right: 1px solid #312a27; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; }
设置下鼠标悬停状态,以及第一个菜单项的边框样式:
.nav > li:hover > a { background: #4b4441; } .nav > li:first-child > a { border-radius: 3px 0 0 3px; border-left: none; }
3.搜索表单样式
设置表单与外围容器的位置为相对,设置宽度为继承
.nav > li.nav-search > form { position: relative; width: inherit; height: 54px; z-index: 510; border-left: 1px solid #4b4441; }
设置文本输入框的样式,并添加获得焦点、失去焦点的样式。
.nav > li.nav-search input[type="text"] { display: block; float: left; width: 1px; height: 24px; padding: 15px 0; line-height: 24px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #999999; text-shadow: 0 0 1px rgba(0,0,0,.35); background: #372f2b; -webkit-transition: all .3s ease 1s; -moz-transition: all .3s ease 1s; -o-transition: all .3s ease 1s; -ms-transition: all .3s ease 1s; transition: all .3s ease 1s; } .nav > li.nav-search input[type="text"]:focus { color: #fcfcfc; } .nav > li.nav-search input[type="text"]:focus, .nav > li.nav-search:hover input[type="text"] { width: 110px; padding: 15px 20px; -webkit-transition: all .3s ease .1s; -moz-transition: all .3s ease .1s; -o-transition: all .3s ease .1s; -ms-transition: all .3s ease .1s; transition: all .3s ease .1s; }
设置提交按钮的样式
.nav > li.nav-search input[type="submit"] { display: block; float: left; width: 20px; height: 54px; padding: 0 25px; cursor: pointer; background: #372f2b url(../img/search-icon.png) no-repeat center center; border-radius: 0 3px 3px 0; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease; } .nav > li.nav-search input[type="submit"]:hover { background-color: #4b4441; }
5.二级下拉菜单项
这里是整个教程中重要组成部分,这里显示的菜单项下拉内容,这里我们设置下拉项的容器为相对浮动位置,然后添加一些圆角样式、背景、平滑滚动效果。更重要的地方设置它的透明度为:0;
.nav > li > div { position: absolute; display: block; width: 100%; top: 50px; left: 0; opacity: 0; visibility: hidden; overflow: hidden; background: #ffffff; border-radius: 0 0 3px 3px; -webkit-transition: all .3s ease .15s; -moz-transition: all .3s ease .15s; -o-transition: all .3s ease .15s; -ms-transition: all .3s ease .15s; transition: all .3s ease .15s; }
一级菜单悬停状态下下拉菜单显示
.nav > li:hover > div { opacity: 1; visibility: visible; overflow: visible; }
6.丰富下拉菜单排版
这个例子没有使用任何js代码,效果在谷歌、火狐下效果非常好。
我们感觉下拉菜单的排版过于单调了,我们就为其添加下以下样式:
<div class="nav-column"> <h3>Home</h3> <ul> <li><a href="#">Pampers Diapers</a></li> <li><a href="#">Huggies Diapers</a></li> <li><a href="#">Seventh Generation</a></li> <li><a href="#">Diapers</a></li> <li><a href="#">Derbies</a></li> <li><a href="#">Driving shoes</a></li> <li><a href="#">Espadrilles</a></li> <li><a href="#">Loafers</a></li> </ul> </div> <div class="nav-column"> <h3>Home</h3> <ul> <li><a href="#">Driving shoes</a></li> <li><a href="#">Espadrilles</a></li> <li><a href="#">Loafers</a></li> </ul> <h3>Home</h3> <ul> <li><a href="#">Driving shoes</a></li> <li><a href="#">Espadrilles</a></li> <li><a href="#">Loafers</a></li> </ul> </div> <div class="nav-column"> <h3>Home</h3> <ul> <li><a href="#">Pampers Diapers</a></li> <li><a href="#">Huggies Diapers</a></li> <li><a href="#">Seventh Generation</a></li> <li><a href="#">Diapers</a></li> <li><a href="#">Derbies</a></li> <li><a href="#">Driving shoes</a></li> <li><a href="#">Espadrilles</a></li> <li><a href="#">Loafers</a></li> </ul> </div> <div class="nav-column"> <h3 class="orange">Related Categories</h3> <ul> <li><a href="#">Pampers Diapers</a></li> <li><a href="#">Huggies Diapers</a></li> <li><a href="#">Diapers</a></li> </ul> <h3 class="orange">Brands</h3> <ul> <li><a href="#">Driving shoes</a></li> <li><a href="#">Espadrilles</a></li> </ul> </div> .nav .nav-column { float: left; width: 20%; padding: 2.5%; } .nav .nav-column h3 { margin: 20px 0 10px 0; line-height: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 14px; color: #372f2b; text-transform: uppercase; } .nav .nav-column h3.orange { color: #ff722b; } .nav .nav-column li a { display: block; line-height: 26px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #888888; } .nav .nav-column li a:hover { color: #666666; }
总结: 熟悉并掌握css3的属性transition,通过本教程,希望能够为大家起到抛砖引玉的作用。