这是一个纯CSS3制作的工具提示下拉菜单,当你鼠标悬浮在工具条上时,会自动的向下弹出下拉菜单项。整个工具条是通过@font-face来制作的icon,并使用了gradient给每个下拉菜单块制作了一个不同的渐变色,而下拉菜单的隐藏和显示并不是按照我们传统的制作方法,此处是控制下拉菜单的高度来实现显示与隐藏的效果。当你加载页面时,整个下拉菜单的高度为0,但当你的鼠标悬浮在对应的工具图标上时,此时下拉菜单的高度为180px,当然这个值是一个固定例的值,要完美一点的方法最好不要控制死他的高度,具体如何实现,大家自己想想,前面有讲过这样的案例哟。(^_^)。
HTML CODE
<ul> <li> <a href="#" class="icon-user"></a> <div> <ul> <li><a href="#">messages</a></li> <li><a href="#">friends</a></li> <li><a href="#">comments</a></li> <li><a href="#">logout</a></li> </ul> </div> </li> <li> <a href="#" class="icon-clock"></a> <div> <ul> <li><a href="#">messages</a></li> <li><a href="#">friends</a></li> <li><a href="#">comments</a></li> <li><a href="#">logout</a></li> </ul> </div> </li> <li> <a href="#" class="icon-setup"></a> <div> <ul> <li><a href="#">messages</a></li> <li><a href="#">friends</a></li> <li><a href="#">comments</a></li> <li><a href="#">logout</a></li> </ul> </div> </li> </ul>
CSS CODE
body { background-color: #323232; } .demo { width: 180px; margin: 40px auto 0; } .demo > ul > li { float: left; width: 60px; text-align: center; position: relative; } .demo > ul > li a { display: block; color: #fff; } .demo > ul > li a:after { display: inline-block; font-family: 'icomoon'; font-style: normal; speak: none; font-weight: normal; -webkit-font-smoothing: antialiased; font-size: 30px; color: #a1a1a1; } .demo > ul > li:nth-child(1) > a:after { content: "\2c"; } .demo > ul > li:nth-child(2) > a:after { content: "\21"; } .demo > ul > li:nth-child(3) > a:after { content: "\2f"; } .demo > ul > li div { position: relative; margin-left: -40px; width: 180px; height: 0px; overflow: hidden; -webkit-transition: height 0.4s linear; -moz-transition: height 0.4s linear; -o-transition: height 0.4s linear; -ms-transition: height 0.4s linear; transition: height 0.4s linear; } .demo > ul > li:hover div { height: 180px; z-index: 2; } .demo > ul > li ul { position: absolute; margin-top: 10px; font-size: 16px; text-shadow: 0 1px 1px rgba(0,0,0,.4); text-align: left; width: 140px; line-height: 30px; padding: 10px 0; border-radius: 3px; } .demo > ul > li:nth-child(1) ul { box-shadow: 0 1px 0 #db7777 inset,0 0 1px #c70000; background: -webkit-linear-gradient(top,#d80000 10%,#8b0000); background: -moz-linear-gradient(top,#d80000 10%,#8b0000); background: -o-linear-gradient(top,#d80000 10%,#8b0000); background: -ms-linear-gradient(top,#d80000 10%,#8b0000); background: linear-gradient(top,#d80000 10%,#8b0000); } .demo > ul > li:nth-child(2) ul { box-shadow: 0 1px 0 #85ff7c inset,0 0 1px #4bd940 inset; background: -webkit-linear-gradient(top,#31db17 10%,#0b9200); background: -moz-linear-gradient(top,#31db17 10%,#0b9200); background: -o-linear-gradient(top,#31db17 10%,#0b9200); background: -ms-linear-gradient(top,#31db17 10%,#0b9200); background: linear-gradient(top,#31db17 10%,#0b9200); } .demo > ul > li:nth-child(3) ul { box-shadow: 0 1px 0 #77d4da inset,0 0 1px #0077b0 inset; background: -webkit-linear-gradient(top,#00c3db 10%,#005e91); background: -moz-linear-gradient(top,#00c3db 10%,#005e91); background: -ms-linear-gradient(top,#00c3db 10%,#005e91); background: -o-linear-gradient(top,#00c3db 10%,#005e91); background: linear-gradient(top,#00c3db 10%,#005e91); } .demo > ul > li ul li a { position: relative; padding: 0 20px; } .demo > ul > li:nth-child(1) ul li a:hover { text-decoration: none; background-color: #800000; } .demo > ul > li:nth-child(2) ul li a:hover { text-decoration: none; background-color: #0a6602; } .demo > ul > li:nth-child(3) ul li a:hover { text-decoration: none; background-color: #0a5278; } .demo > ul > li:nth-child(1) ul li a { border-bottom: 1px solid #d33030; } .demo > ul > li:nth-child(2) ul li a { border-bottom: 1px solid #60dd57; } .demo > ul > li:nth-child(3) ul li a { border-bottom: 1px solid #30bcd6; } .demo > ul > li ul li:first-child a:first-child:before { position: absolute; content: ''; width: 1px; height: 1px; border: 5px solid transparent; left: 50%; top: -20px; margin-left: -5px; z-index: 99; } .demo > ul > li:nth-child(1) ul li a:first-child:before { border-bottom-color: #d80000; } .demo > ul > li:nth-child(2) ul li a:first-child:before { border-bottom-color: #25ec17; } .demo > ul > li:nth-child(3) ul li a:first-child:before { border-bottom-color: #00c3db; } @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.svg#icomoon') format('svg'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'); font-weight: normal; font-style: normal; }
如需转载,烦请注明出处:http://www.w3cplus.com/demo/css3-dropdown-menu-2.html