javascript实现下拉菜单效果

Z时代
2024-01-10
分类：IT

用Javascript实现下拉菜单，供大家参考，具体内容如下

正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教

下拉菜单，或者侧拉菜单在实际开发当中非常的实用

代码：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 padding: 0;
 margin: 0;
 border: 0;
 }
 .menu{
 width: 100%;
 height: 50px;
 border: 1px solid lightyellow;
 box-shadow: 0 2px 5px black;
 }
 .menu div{
 /*margin-top: 10px;*/
 float: left;
 width: 19.82%;
 height: 50px;
 /* border: 1px solid red;*/
 text-align: center;
 }
 button{
 margin-top: 15px;
 cursor: pointer;
 width: 25px;
 height: 15px;
 background-color: pink;
 }
 .show1{
 display: none;
 width: 19.82%;
 height: 250px;
 /*border: 1px solid black;*/
 }
 .show1 div{
 border: 1px solid pink;
 width: 247px;
 height: 48px;
 text-align: center;
 }
 a{
 text-decoration: none;
 display: block;
 margin-top: 10px;
 }
 a:hover{
 color: #ff242d;
 font-size: 25px;
 }
 </style>
</head>
<body>
 <div class="menu">
 <div>下拉1
 <button>^</button>
 </div>
 <div>下拉2
 <button>^</button>
 </div>
 <div>下拉3
 <button>^</button>
 </div>
 <div>下拉4
 <button>^</button>
 </div>
 <div>下拉5
 <button>^</button>
 </div>
 </div>
 <div class="show1">
 <div><a href="#" >4654tyyut</a></div>
 <div><a href="#" >4654</a></div>
 <div><a href="#" >sdf</a></div>
 <div><a href="#" >sdf</a></div>
 <div><a href="#" >tert</a></div>
 </div>
 <script>
 var btn=document.querySelector('button')
 var show1=document.querySelector('.show1')
 var flag=0
 btn.onclick=function () {
 if (flag === 0) {
 show1.style.display = 'block'
 flag=1
 }else {
 show1.style.display='none'
 flag=0
 }
 }
 </script>
</body>
</html>