下拉菜单如何成功实现？简易下拉菜单代码分享

发布时间：2023-07-22 14:49:18 所属栏目：语言来源：

导读：这篇文章给大家分享的实现一个简易下拉菜单的代码，会使用到HTML、css3以及JS，小编觉得挺实用的，因此分享给大家做个参考，下图是实现效果，感兴趣的朋友就继续往下看吧。

html

<div class="containe

这篇文章给大家分享的实现一个简易下拉菜单的代码，会使用到HTML、css3以及JS，小编觉得挺实用的，因此分享给大家做个参考，下图是实现效果，感兴趣的朋友就继续往下看吧。

       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.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);

};

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!