购物导航，下拉菜单

wyb_lxy

已于 2023-12-28 16:24:37 修改

阅读量847

点赞数 21

文章标签： javascript 前端 css

于 2023-12-28 16:13:03 首次发布

本文链接：https://blog.csdn.net/wyb_lxy/article/details/135272305

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <div class="dropdown">
       <button οnclick="myFunction()" class="dropbtn">购物特权</button>
       <div id="myDropdown" class="dropdown-content">
       <a href="#home"><img src="gouwu.gif">全额兑换</a>
       <a href="#home"><img src="meiri.gif">俱乐部包邮卡</a>
       <a href="#home"><img src="zhe.gif">购物领金币</a>
           <a href="#home"><img src="you.gif">每日领金币</a>
           <a href="#home"><img src="huan.gif">VIP阶梯价</a>
       </div>
       </div>
       <script>
       /* 点击按钮，下拉菜单在显示/隐藏之间切换 */
       function myFunction() {
       document.getElementById("myDropdown").classList.toggle("show");
       }
       // 点击下拉菜单意外区域隐藏
       window.onclick = function(event) {
       if (!event.target.matches('.dropbtn')) {

       var dropdowns = document.getElementsByClassName("dropdown-content");
       var i;
       for (i = 0; i < dropdowns.length; i++) {
       var openDropdown = dropdowns[i];
       if (openDropdown.classList.contains('show')) {
       openDropdown.classList.remove('show');
       }
       }
       }
       }
       </script>
           <style>
               .dropbtn {
               background-color: whitesmoke;
               color: black;
               padding: 16px;
               font-size: 16px;
                   width:160px;
               border: none;
               cursor: pointer;
               }
               .dropbtn:hover, .dropbtn:focus {
               background-color: whitesmoke;
               }
               .dropdown {
               position: relative;
               display: inline-block;
               }
               .dropdown-content {
               display: none;
               position: absolute;
               background-color: white;
               min-width: 160px;
               overflow: auto;
               box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
               z-index: 1;
               }
               .dropdown-content a {
               color: black;
               padding: 12px 16px;
               text-decoration: none;
               display: block;
               }
               .dropdown a:hover {
                   background-color: #f1f1f1;
                   color: green;
               }
               .show {display:block;}
           </style>
   </body>
</html>