立即注册
 登录
切换到宽版
开阔云»论坛 › 群组 › 行业交流 › Web技术教程 › HTML+CSS3+JS 实现的下拉菜单
Web技术教程
群主admin 天启
网页技术交流
 
发新帖
楼主: 零五零八
查看: 901|回复: 0

[使用教程] HTML+CSS3+JS 实现的下拉菜单

[复制链接]
零五零八 发表于 2020-12-3 19:26:02 | 显示全部楼层
效果

1.gif


HTML

  1. <div class="container">
  2.   <h1 class="title">Dropdown Menu</h1>
  3.   <ul>
  4.     <li class="dropdown">
  5.       <a href="#" data-toggle="dropdown">First Menu <i class="icon-arrow"></i></a>
  6.       <ul class="dropdown-menu">
  7.         <li><a href="#">Home</a></li>
  8.         <li><a href="#">About Us</a></li>
  9.         <li><a href="#">Services</a></li>
  10.         <li><a href="#">Contact</a></li>
  11.       </ul>
  12.     </li>
  13.     <li class="dropdown">
  14.       <a href="#" data-toggle="dropdown">Second Menu <i class="icon-arrow"></i></a>
  15.       <ul class="dropdown-menu">
  16.         <li><a href="#">Home</a></li>
  17.         <li><a href="#">About Us</a></li>
  18.         <li><a href="#">Services</a></li>
  19.         <li><a href="#">Contact</a></li>
  20.       </ul>
  21.     </li>
  22.     <li class="dropdown">
  23.       <a href="#" data-toggle="dropdown">Third Menu <i class="icon-arrow"></i></a>
  24.       <ul class="dropdown-menu">
  25.         <li><a href="#">Home</a></li>
  26.         <li><a href="#">About Us</a></li>
  27.         <li><a href="#">Services</a></li>
  28.         <li><a href="#">Contact</a></li>
  29.       </ul>
  30.     </li>
  31.   </ul>
  32.   <p class="text-center">
  33.     See this same menu only with CSS3: <a  target="_blank">https://codepen.io/pedronauck/pen/jaluz</a>
  34.   </p>
  35. </div>
复制代码




CSS3


  1. @import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900");
  2. @import url(https://fonts.googleapis.com/css?family=Pacifico);
  3. body {
  4.   font-family: "Lato", Helvetica, Arial;
  5.   font-size: 16px;
  6. }

  8. .text-center {
  9.   text-align: center;
  10. }

  12. *, *:before, *:after {
  13.   -webkit-border-sizing: border-box;
  14.   -moz-border-sizing: border-box;
  15.   border-sizing: border-box;
  16. }

  18. .container {
  19.   width: 350px;
  20.   margin: 50px auto;
  21. }
  22. .container > ul {
  23.   list-style: none;
  24.   padding: 0;
  25.   margin: 0 0 20px 0;
  26. }

  28. .title {
  29.   font-family: 'Pacifico';
  30.   font-weight: norma;
  31.   font-size: 40px;
  32.   text-align: center;
  33.   line-height: 1.4;
  34.   color: #2980B9;
  35. }

  37. .dropdown a {
  38.   text-decoration: none;
  39. }
  40. .dropdown [data-toggle="dropdown"] {
  41.   position: relative;
  42.   display: block;
  43.   color: white;
  44.   background: #2980B9;
  45.   -moz-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
  46.   -webkit-box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
  47.   box-shadow: 0 1px 0 #409ad5 inset, 0 -1px 0 #20638f inset;
  48.   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  49.   padding: 10px;
  50. }
  51. .dropdown [data-toggle="dropdown"]:hover {
  52.   background: #2c89c6;
  53. }
  54. .dropdown .icon-arrow {
  55.   position: absolute;
  56.   display: block;
  57.   font-size: 0.7em;
  58.   color: #fff;
  59.   top: 14px;
  60.   right: 10px;
  61. }
  62. .dropdown .icon-arrow.open {
  63.   -moz-transform: rotate(-180deg);
  64.   -ms-transform: rotate(-180deg);
  65.   -webkit-transform: rotate(-180deg);
  66.   transform: rotate(-180deg);
  67.   -moz-transition: -moz-transform 0.6s;
  68.   -o-transition: -o-transform 0.6s;
  69.   -webkit-transition: -webkit-transform 0.6s;
  70.   transition: transform 0.6s;
  71. }
  72. .dropdown .icon-arrow.close {
  73.   -moz-transform: rotate(0deg);
  74.   -ms-transform: rotate(0deg);
  75.   -webkit-transform: rotate(0deg);
  76.   transform: rotate(0deg);
  77.   -moz-transition: -moz-transform 0.6s;
  78.   -o-transition: -o-transform 0.6s;
  79.   -webkit-transition: -webkit-transform 0.6s;
  80.   transition: transform 0.6s;
  81. }
  82. .dropdown .icon-arrow:before {
  83.   content: '\25BC';
  84. }
  85. .dropdown .dropdown-menu {
  86.   max-height: 0;
  87.   overflow: hidden;
  88.   list-style: none;
  89.   padding: 0;
  90.   margin: 0;
  91. }
  92. .dropdown .dropdown-menu li {
  93.   padding: 0;
  94. }
  95. .dropdown .dropdown-menu li a {
  96.   display: block;
  97.   color: #6f6f6f;
  98.   background: #EEE;
  99.   -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  100.   -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  101.   box-shadow: 0 1px 0 white inset, 0 -1px 0 #d5d5d5 inset;
  102.   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
  103.   padding: 10px 10px;
  104. }
  105. .dropdown .dropdown-menu li a:hover {
  106.   background: #f6f6f6;
  107. }
  108. .dropdown .show, .dropdown .hide {
  109.   -moz-transform-origin: 50% 0%;
  110.   -ms-transform-origin: 50% 0%;
  111.   -webkit-transform-origin: 50% 0%;
  112.   transform-origin: 50% 0%;
  113. }
  114. .dropdown .show {
  115.   display: block;
  116.   max-height: 9999px;
  117.   -moz-transform: scaleY(1);
  118.   -ms-transform: scaleY(1);
  119.   -webkit-transform: scaleY(1);
  120.   transform: scaleY(1);
  121.   animation: showAnimation 0.5s ease-in-out;
  122.   -moz-animation: showAnimation 0.5s ease-in-out;
  123.   -webkit-animation: showAnimation 0.5s ease-in-out;
  124.   -moz-transition: max-height 1s ease-in-out;
  125.   -o-transition: max-height 1s ease-in-out;
  126.   -webkit-transition: max-height 1s ease-in-out;
  127.   transition: max-height 1s ease-in-out;
  128. }
  129. .dropdown .hide {
  130.   max-height: 0;
  131.   -moz-transform: scaleY(0);
  132.   -ms-transform: scaleY(0);
  133.   -webkit-transform: scaleY(0);
  134.   transform: scaleY(0);
  135.   animation: hideAnimation 0.4s ease-out;
  136.   -moz-animation: hideAnimation 0.4s ease-out;
  137.   -webkit-animation: hideAnimation 0.4s ease-out;
  138.   -moz-transition: max-height 0.6s ease-out;
  139.   -o-transition: max-height 0.6s ease-out;
  140.   -webkit-transition: max-height 0.6s ease-out;
  141.   transition: max-height 0.6s ease-out;
  142. }

  144. @keyframes showAnimation {
  145.   0% {
  146.     -moz-transform: scaleY(0.1);
  147.     -ms-transform: scaleY(0.1);
  148.     -webkit-transform: scaleY(0.1);
  149.     transform: scaleY(0.1);
  150.   }
  151.   40% {
  152.     -moz-transform: scaleY(1.04);
  153.     -ms-transform: scaleY(1.04);
  154.     -webkit-transform: scaleY(1.04);
  155.     transform: scaleY(1.04);
  156.   }
  157.   60% {
  158.     -moz-transform: scaleY(0.98);
  159.     -ms-transform: scaleY(0.98);
  160.     -webkit-transform: scaleY(0.98);
  161.     transform: scaleY(0.98);
  162.   }
  163.   80% {
  164.     -moz-transform: scaleY(1.04);
  165.     -ms-transform: scaleY(1.04);
  166.     -webkit-transform: scaleY(1.04);
  167.     transform: scaleY(1.04);
  168.   }
  169.   100% {
  170.     -moz-transform: scaleY(0.98);
  171.     -ms-transform: scaleY(0.98);
  172.     -webkit-transform: scaleY(0.98);
  173.     transform: scaleY(0.98);
  174.   }
  175.   80% {
  176.     -moz-transform: scaleY(1.02);
  177.     -ms-transform: scaleY(1.02);
  178.     -webkit-transform: scaleY(1.02);
  179.     transform: scaleY(1.02);
  180.   }
  181.   100% {
  182.     -moz-transform: scaleY(1);
  183.     -ms-transform: scaleY(1);
  184.     -webkit-transform: scaleY(1);
  185.     transform: scaleY(1);
  186.   }
  187. }
  188. @-moz-keyframes showAnimation {
  189.   0% {
  190.     -moz-transform: scaleY(0.1);
  191.     -ms-transform: scaleY(0.1);
  192.     -webkit-transform: scaleY(0.1);
  193.     transform: scaleY(0.1);
  194.   }
  195.   40% {
  196.     -moz-transform: scaleY(1.04);
  197.     -ms-transform: scaleY(1.04);
  198.     -webkit-transform: scaleY(1.04);
  199.     transform: scaleY(1.04);
  200.   }
  201.   60% {
  202.     -moz-transform: scaleY(0.98);
  203.     -ms-transform: scaleY(0.98);
  204.     -webkit-transform: scaleY(0.98);
  205.     transform: scaleY(0.98);
  206.   }
  207.   80% {
  208.     -moz-transform: scaleY(1.04);
  209.     -ms-transform: scaleY(1.04);
  210.     -webkit-transform: scaleY(1.04);
  211.     transform: scaleY(1.04);
  212.   }
  213.   100% {
  214.     -moz-transform: scaleY(0.98);
  215.     -ms-transform: scaleY(0.98);
  216.     -webkit-transform: scaleY(0.98);
  217.     transform: scaleY(0.98);
  218.   }
  219.   80% {
  220.     -moz-transform: scaleY(1.02);
  221.     -ms-transform: scaleY(1.02);
  222.     -webkit-transform: scaleY(1.02);
  223.     transform: scaleY(1.02);
  224.   }
  225.   100% {
  226.     -moz-transform: scaleY(1);
  227.     -ms-transform: scaleY(1);
  228.     -webkit-transform: scaleY(1);
  229.     transform: scaleY(1);
  230.   }
  231. }
  232. @-webkit-keyframes showAnimation {
  233.   0% {
  234.     -moz-transform: scaleY(0.1);
  235.     -ms-transform: scaleY(0.1);
  236.     -webkit-transform: scaleY(0.1);
  237.     transform: scaleY(0.1);
  238.   }
  239.   40% {
  240.     -moz-transform: scaleY(1.04);
  241.     -ms-transform: scaleY(1.04);
  242.     -webkit-transform: scaleY(1.04);
  243.     transform: scaleY(1.04);
  244.   }
  245.   60% {
  246.     -moz-transform: scaleY(0.98);
  247.     -ms-transform: scaleY(0.98);
  248.     -webkit-transform: scaleY(0.98);
  249.     transform: scaleY(0.98);
  250.   }
  251.   80% {
  252.     -moz-transform: scaleY(1.04);
  253.     -ms-transform: scaleY(1.04);
  254.     -webkit-transform: scaleY(1.04);
  255.     transform: scaleY(1.04);
  256.   }
  257.   100% {
  258.     -moz-transform: scaleY(0.98);
  259.     -ms-transform: scaleY(0.98);
  260.     -webkit-transform: scaleY(0.98);
  261.     transform: scaleY(0.98);
  262.   }
  263.   80% {
  264.     -moz-transform: scaleY(1.02);
  265.     -ms-transform: scaleY(1.02);
  266.     -webkit-transform: scaleY(1.02);
  267.     transform: scaleY(1.02);
  268.   }
  269.   100% {
  270.     -moz-transform: scaleY(1);
  271.     -ms-transform: scaleY(1);
  272.     -webkit-transform: scaleY(1);
  273.     transform: scaleY(1);
  274.   }
  275. }
  276. @keyframes hideAnimation {
  277.   0% {
  278.     -moz-transform: scaleY(1);
  279.     -ms-transform: scaleY(1);
  280.     -webkit-transform: scaleY(1);
  281.     transform: scaleY(1);
  282.   }
  283.   60% {
  284.     -moz-transform: scaleY(0.98);
  285.     -ms-transform: scaleY(0.98);
  286.     -webkit-transform: scaleY(0.98);
  287.     transform: scaleY(0.98);
  288.   }
  289.   80% {
  290.     -moz-transform: scaleY(1.02);
  291.     -ms-transform: scaleY(1.02);
  292.     -webkit-transform: scaleY(1.02);
  293.     transform: scaleY(1.02);
  294.   }
  295.   100% {
  296.     -moz-transform: scaleY(0);
  297.     -ms-transform: scaleY(0);
  298.     -webkit-transform: scaleY(0);
  299.     transform: scaleY(0);
  300.   }
  301. }
  302. @-moz-keyframes hideAnimation {
  303.   0% {
  304.     -moz-transform: scaleY(1);
  305.     -ms-transform: scaleY(1);
  306.     -webkit-transform: scaleY(1);
  307.     transform: scaleY(1);
  308.   }
  309.   60% {
  310.     -moz-transform: scaleY(0.98);
  311.     -ms-transform: scaleY(0.98);
  312.     -webkit-transform: scaleY(0.98);
  313.     transform: scaleY(0.98);
  314.   }
  315.   80% {
  316.     -moz-transform: scaleY(1.02);
  317.     -ms-transform: scaleY(1.02);
  318.     -webkit-transform: scaleY(1.02);
  319.     transform: scaleY(1.02);
  320.   }
  321.   100% {
  322.     -moz-transform: scaleY(0);
  323.     -ms-transform: scaleY(0);
  324.     -webkit-transform: scaleY(0);
  325.     transform: scaleY(0);
  326.   }
  327. }
  328. @-webkit-keyframes hideAnimation {
  329.   0% {
  330.     -moz-transform: scaleY(1);
  331.     -ms-transform: scaleY(1);
  332.     -webkit-transform: scaleY(1);
  333.     transform: scaleY(1);
  334.   }
  335.   60% {
  336.     -moz-transform: scaleY(0.98);
  337.     -ms-transform: scaleY(0.98);
  338.     -webkit-transform: scaleY(0.98);
  339.     transform: scaleY(0.98);
  340.   }
  341.   80% {
  342.     -moz-transform: scaleY(1.02);
  343.     -ms-transform: scaleY(1.02);
  344.     -webkit-transform: scaleY(1.02);
  345.     transform: scaleY(1.02);
  346.   }
  347.   100% {
  348.     -moz-transform: scaleY(0);
  349.     -ms-transform: scaleY(0);
  350.     -webkit-transform: scaleY(0);
  351.     transform: scaleY(0);
  352.   }
  353. }
复制代码



js


  1. // Dropdown Menu
  2. var dropdown = document.querySelectorAll('.dropdown');
  3. var dropdownArray = Array.prototype.slice.call(dropdown,0);
  4. dropdownArray.forEach(function(el){
  5.     var button = el.querySelector('a[data-toggle="dropdown"]'),
  6.             menu = el.querySelector('.dropdown-menu'),
  7.             arrow = button.querySelector('i.icon-arrow');

  9.     button.onclick = function(event) {
  10.         if(!menu.hasClass('show')) {
  11.             menu.classList.add('show');
  12.             menu.classList.remove('hide');
  13.             arrow.classList.add('open');
  14.             arrow.classList.remove('close');
  15.             event.preventDefault();
  16.         }
  17.         else {
  18.             menu.classList.remove('show');
  19.             menu.classList.add('hide');
  20.             arrow.classList.remove('open');
  21.             arrow.classList.add('close');
  22.             event.preventDefault();
  23.         }
  24.     };
  25. })

  27. Element.prototype.hasClass = function(className) {
  28.     return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
  29. };
复制代码


回复

举报

返回列表
快速回复 返回顶部 返回列表