HTML+CSS3+JS如何实现下拉菜单-创新互联

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

成都创新互联公司是一家集网站建设,永嘉企业网站建设,永嘉品牌网站建设,网站定制,永嘉网站建设报价,网络营销,网络优化,永嘉网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

实现效果

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://scyanting.com/article/cejjpo.html

    其他资讯