HTML+CSS3+JS 实现的下拉菜单

网站建设 itxz 1周前 (11-20) 16次浏览 0个评论

首先我们看一下实现后的效果,如下图:

HTML+CSS3+JS 实现的下拉菜单

<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" rel="noopener noreferrer">https://codepen.io/pedronauck/pen/jaluz</a>
  </p>
</div>

@import "compass/css3";
 
@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;
   
  & > ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
  }
}
 
// =============================================================================
//  Mixins and Variables
// =============================================================================
 
$blue: #2980B9;
$gray: #EEE;
 
@mixin ul-nostyle {
    list-style: none;
    padding: 0;
    margin: 0;
}
 
@mixin double-shadow($color) {
    @include box-shadow(0 1px 0 lighten($color, 10%) inset, 0 -1px 0 darken($color, 10%) inset);
}
 
@mixin hover-style($color) {
    &:hover {
        background: lighten($color, 3%);
    }
}
 
@mixin animation($content) {
  animation: $content;
  -moz-animation: $content;
  -webkit-animation: $content;
}
 
@mixin keyframes($name) {
  @keyframes #{$name} { @content; }
  @-moz-keyframes #{$name} { @content; }
  @-webkit-keyframes #{$name} { @content; }
}
 
// =============================================================================
//  Classes
// =============================================================================
 
.title {
  font-family: 'Pacifico';
  font-weight: norma;
  font-size: 40px;
  text-align: center;
  line-height: 1.4;
  color: $blue;
}
 
.dropdown {
    a {
        text-decoration: none;
    }
 
    [data-toggle="dropdown"] {
        position: relative;
        display: block;
        color: white;
        background: $blue;
        @include double-shadow($blue);
        @include hover-style($blue);
        @include text-shadow(0 -1px 0 rgba(0,0,0,0.3));
        padding: 10px;
 
    }
    .icon-arrow {
        position: absolute;
        display: block;
        font-size: 0.7em;
        color: #fff;
        top: 14px;
        right: 10px;
 
        &.open {
            @include transform(rotate(-180deg));
            @include transition(transform .6s);
        }
        &.close {
            @include transform(rotate(0deg));
            @include transition(transform .6s);
        }
 
        &:before {
            content: '\25BC';
        }
    }
 
    .dropdown-menu {
        max-height: 0;
        overflow: hidden;
        @include ul-nostyle;
 
        li {
            padding: 0;
 
            a {
                display: block;
                color: darken($gray, 50%);
                background: $gray;
                @include double-shadow($gray);
                @include hover-style($gray);
                @include text-shadow(0 -1px 0 rgba(255,255,255,0.3));
                padding: 10px 10px;
            }
        }
    }
 
    .show, .hide {
        @include transform-origin(50%, 0%);
    }
 
    .show {
        display: block;
        max-height: 9999px;
        @include transform(scaleY(1));
        @include animation(showAnimation .5s ease-in-out);
        @include transition(max-height 1s ease-in-out);
    }
 
    .hide {
        max-height: 0;
        @include transform(scaleY(0));
        @include animation(hideAnimation .4s ease-out);
        @include transition(max-height .6s ease-out);
    }
}
 
@include keyframes(showAnimation) {
    0% {
        @include transform(scaleY(0.1));
    }
    40% {
        @include transform(scaleY(1.04));
    }
    60% {
        @include transform(scaleY(0.98));
    }
    80% {
        @include transform(scaleY(1.04));
    }
    100% {
        @include transform(scaleY(0.98));
    }               
    80% {
        @include transform(scaleY(1.02));
    }
    100% {
        @include transform(scaleY(1));
    }
}
 
@include keyframes(hideAnimation) {
  0% {
    @include transform(scaleY(1));
  }
  60% {
    @include transform(scaleY(0.98));
  }
  80% {
    @include transform(scaleY(1.02));
  }
  100% {
    @include transform(scaleY(0));
  }
}
// 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);
};

IT学者 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML+CSS3+JS 实现的下拉菜单
喜欢 (0)

您必须 登录 才能发表评论!