HTML+CSS3+JS如何实现下拉菜单
这篇文章给大家分享的是有关HTML+CSS3+JS如何实现下拉菜单的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联专注于企业成都营销网站建设、网站重做改版、青秀网站定制设计、自适应品牌网站建设、H5开发、成都商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为青秀等各大城市提供网站开发制作服务。
实现效果
html
Dropdown Menu
See this same menu only with CSS3: https://codepen.io/pedronauck/pen/jaluz
css
@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; } .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; top: 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如何实现下拉菜单
浏览地址:http://scyanting.com/article/ppdpcj.html