HTML+CSS3+JS 实现的下拉菜单
建站知识 2021-07-02 23:04www.168986.cn长沙网站建设
实现效果
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="https://codepen.io/pedronauck/pen/jaluz" target="_blank">https://codepen.io/pedronauck/pen/jaluz</a> </p> </div>
css
@import url("https://fonts.googleapis./css?family=Lato:300,400,700,900"); @import url(https://fonts.googleapis./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; } .container > ul { list-style: none; padding: 0; margin: 0 0 20px 0; } .title { font-family: 'Pacifico'; font-weight: norma; font-size: 40px; text-align: center; line-height: 1.4; color: #2980B9; } .dropdown a { text-decoration: none; } .dropdown [data-toggle="dropdown"] { position: relative; display: block; color: white; background: #2980B9; -moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; -webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); padding: 10px; } .dropdown [data-toggle="dropdown"]:hover { background: #2c89c6; } .dropdown .icon-arrow { position: absolute; display: block; font-size: 0.7em; color: #fff; : 14px; right: 10px; } .dropdown .icon-arrow.open { -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; } .dropdown .icon-arrow.close { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; } .dropdown .icon-arrow:before { content: '\25BC'; } .dropdown .dropdown-menu { max-height: 0; overflow: hidden; list-style: none; padding: 0; margin: 0; } .dropdown .dropdown-menu li { padding: 0; } .dropdown .dropdown-menu li a { display: block; color: #6f6f6f; background: #EEE; -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3); padding: 10px 10px; } .dropdown .dropdown-menu li a:hover { background: #f6f6f6; } .dropdown .show, .dropdown .hide { -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .dropdown .show { display: block; max-height: 9999px; -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); animation: showAnimation 0.5s ease-in-out; -moz-animation: showAnimation 0.5s ease-in-out; -webkit-animation: showAnimation 0.5s ease-in-out; -moz-transition: max-height 1s ease-in-out; -o-transition: max-height 1s ease-in-out; -webkit-transition: max-height 1s ease-in-out; transition: max-height 1s ease-in-out; } .dropdown .hide { max-height: 0; -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); animation: hideAnimation 0.4s ease-out; -moz-animation: hideAnimation 0.4s ease-out; -webkit-animation: hideAnimation 0.4s ease-out; -moz-transition: max-height 0.6s ease-out; -o-transition: max-height 0.6s ease-out; -webkit-transition: max-height 0.6s ease-out; transition: max-height 0.6s ease-out; } @keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-moz-keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-webkit-keyframes showAnimation { 0% { -moz-transform: scaleY(0.1); -ms-transform: scaleY(0.1); -webkit-transform: scaleY(0.1); transform: scaleY(0.1); } 40% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -webkit-transform: scaleY(1.04); transform: scaleY(1.04); } 100% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } } @-moz-keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } } @-webkit-keyframes hideAnimation { 0% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } 60% { -moz-transform: scaleY(0.98); -ms-transform: scaleY(0.98); -webkit-transform: scaleY(0.98); transform: scaleY(0.98); } 80% { -moz-transform: scaleY(1.02); -ms-transform: scaleY(1.02); -webkit-transform: scaleY(1.02); transform: scaleY(1.02); } 100% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } }
js
// Dropdown Menu var dropdown = document.querySelectorAll('.dropdown'); var dropdownArray = Array.prototype.slice.call(dropdown,0); dropdownArray.forEach(function(el){ var button = el.querySelector('a[data-toggle="dropdown"]'), menu = el.querySelector('.dropdown-menu'), arrow = button.querySelector('i.icon-arrow'); button.onclick = function(event) { if(!menu.hasClass('show')) { menu.classList.add('show'); menu.classList.remove('hide'); arrow.classList.add('open'); arrow.classList.remove('close'); event.preventDefault(); } else { menu.classList.remove('show'); menu.classList.add('hide'); arrow.classList.remove('open'); arrow.classList.add('close'); event.preventDefault(); } }; }) Element.prototype.hasClass = function(className) { return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className); };
以上就是HTML+CSS3+JS 实现的下拉菜单的详细内容,更多关于HTML+CSS3+JS 下拉菜单的资料请关注狼蚁SEO其它相关文章!
上一篇:纯CSS3实现的井字棋游戏
下一篇:CSS3 实现倒计时效果
长沙网站设计
- 如何自己建一个网站 自己想建个网站,怎么建
- 如何制作网站免费建站 创建网站免费注册
- html简单网页代码 html简单网页代码超链接
- dreamweaver网页制作 dreamweaver网页制作模板
- 上海网站建设 上海网站建设制作微信
- 如何制作网站和网页 如何制作一个网页
- html网页制作代码大全 端午节html网页制作代码大
- app开发公司 app开发公司前十名
- html网页制作 html网页制作文字居中
- app制作一个需要多少钱 请人制作一个app多少钱
- 成都网站制作 成都网站制作维护
- 百度建一个网站多少钱 百度做个公司网站要多少
- html+css网页制作成品 web网页制作成品css+javascrip
- html网页制作案例 html网页设计案例
- html+css网页制作成品 web网页制作成品css+javascrip
- 个人网站模板 个人网站模板HTML