HTML+CSS3+JS 实现的下拉菜单
副标题[/!--empirenews.page--]
html <div class="container"> <h1 class="title">Dropdown Menu</h1> <ul> <li class="dropdown"> <a href="#" data-toggle="dropdown">First Menu <i class="icon-arrow"></i></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Second Menu <i class="icon-arrow"></i></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> <li class="dropdown"> <a href="#" data-toggle="dropdown">Third Menu <i class="icon-arrow"></i></a> <ul class="dropdown-menu"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </li> </ul> <p class="text-center"> See this same menu only with CSS3: <a href=http://www.jb51.net/css/"https:/codepen.io/pedronauck/pen/jaluz" target="_blank">https://codepen.io/pedronauck/pen/jaluz</a> </p> </div> css @import "compass/css3"; @import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900"); @import url(https://fonts.googleapis.com/css?family=Pacifico); body { font-family: "Lato", Helvetica, Arial; font-size: 16px; } .text-center { text-align: center; } *, *:before, *:after { -webkit-border-sizing: border-box; -moz-border-sizing: border-box; border-sizing: border-box; } .container { width: 350px; margin: 50px auto; & > ul { list-style: none; padding: 0; margin: 0 0 20px 0; } } // ============================================================================= // Mixins and Variables // ============================================================================= $blue: #2980B9; $gray: #EEE; @mixin ul-nostyle { list-style: none; padding: 0; margin: 0; } @mixin double-shadow($color) { @include box-shadow(0 1px 0 lighten($color, 10%) inset, 0 -1px 0 darken($color, 10%) inset); } @mixin hover-style($color) { &:hover { background: lighten($color, 3%); } } @mixin animation($content) { animation: $content; -moz-animation: $content; -webkit-animation: $content; } @mixin keyframes($name) { @keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-webkit-keyframes #{$name} { @content; } } // ============================================================================= // Classes // ============================================================================= .title { font-family: 'Pacifico'; font-weight: norma; font-size: 40px; text-align: center; line-height: 1.4; color: $blue; } .dropdown { a { text-decoration: none; } [data-toggle="dropdown"] { position: relative; display: block; color: white; background: $blue; @include double-shadow($blue); @include hover-style($blue); @include text-shadow(0 -1px 0 rgba(0,0,0,0.3)); padding: 10px; } .icon-arrow { position: absolute; display: block; font-size: 0.7em; color: #fff; top: 14px; right: 10px; &.open { @include transform(rotate(-180deg)); @include transition(transform .6s); } &.close { @include transform(rotate(0deg)); @include transition(transform .6s); } &:before { content: '25BC'; } } .dropdown-menu { max-height: 0; overflow: hidden; @include ul-nostyle; li { padding: 0; a { display: block; color: darken($gray, 50%); background: $gray; @include double-shadow($gray); @include hover-style($gray); @include text-shadow(0 -1px 0 rgba(255,255,255,0.3)); padding: 10px 10px; } } } .show, .hide { @include transform-origin(50%, 0%); } .show { display: block; max-height: 9999px; @include transform(scaleY(1)); @include animation(showAnimation .5s ease-in-out); @include transition(max-height 1s ease-in-out); } .hide { max-height: 0; @include transform(scaleY(0)); @include animation(hideAnimation .4s ease-out); @include transition(max-height .6s ease-out); } } @include keyframes(showAnimation) { 0% { @include transform(scaleY(0.1)); } 40% { @include transform(scaleY(1.04)); } 60% { @include transform(scaleY(0.98)); } 80% { @include transform(scaleY(1.04)); } 100% { @include transform(scaleY(0.98)); } 80% { @include transform(scaleY(1.02)); } 100% { @include transform(scaleY(1)); } } @include keyframes(hideAnimation) { 0% { @include transform(scaleY(1)); } 60% { @include transform(scaleY(0.98)); } 80% { @include transform(scaleY(1.02)); } 100% { @include transform(scaleY(0)); } } js (编辑:长春站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 解决display:flex属性 justify-content: space-between换行
- Gitlab CI 在 Kubernetes 里的 Docker 缓存
- 建议重庆加大集成电路设计领域的结构
- Firefox和IE通用的三则网站重构实用技巧
- .net – Windows操作系统和内存管理 – 应用程序最小化后会
- Win11开发版22458.1000升级 包含了多项改进和Bug修复
- 2020年Fabless供应商占据全球IC销售额的32.8%,再创辉煌!
- 分析 Vue 中的 computed 和 watch 的差别
- 谈谈 Tomcat 请求处理流程
- 数据中心运维管理培训新模式二------ 经验萃取技术的应用