网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

HTML+CSS3+JS如何实现下拉菜单

这篇文章给大家分享的是有关HTML+CSS3+JS如何实现下拉菜单的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联专注于企业成都营销网站建设、网站重做改版、青秀网站定制设计、自适应品牌网站建设、H5开发成都商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为青秀等各大城市提供网站开发制作服务。

实现效果

HTML+CSS3+JS如何实现下拉菜单

html


  Dropdown Menu
  
               First Menu                 
  • Home
  •         
  • About Us
  •         
  • Services
  •         
  • Contact
  •       
                Second Menu                 
  • Home
  •         
  • About Us
  •         
  • Services
  •         
  • Contact
  •                        Third Menu                 
  • Home
  •         
  • About Us
  •         
  • Services
  •         
  • Contact
  •                       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://bjjierui.cn/article/ppdpcj.html

    其他资讯