Question

我想为一个页面网站创建一个菜单但是我不擅长JavaScript而且我有这个代码用于打开和关闭菜单但我希望它打开就像一个简单的过渡，因为它只是出现。

如何添加淡入淡出或类似内容：

＆＃13;

<field 
  name="mynumbervalue" 
  type="number" 
  default="0" 
  label="Choose an number" 
  description="" 
  min="0" 
  max="10" 
  step="0.01" />

＆＃13;

 <script>
        function w3_open() {
            document.getElementById("mySidebar").style.visibility = "visible";
        }
        function w3_close() {
            document.getElementById("mySidebar").style.visibility = "hidden";
        }
        </script>

＆＃13;

w3-button{
		position:fixed; 
	    width: 42px;
	    height: 42px;
	    -moz-border-radius: 50%;
     	-webkit-border-radius: 50%;
     	border-radius: 50%;
	    line-height:1.1;
	    text-align:center;
	    top:6.5px; 
	    left: 8px; 
	    background-color: #f2bd66;
	    z-index:11;
	    background-position:center;
	    cursor: pointer;
	    color: white;
	    margin-top: 0.7%;
	    margin-left: 0.7%;
	}

	.w3-button{
	    width: 42px;
	    height: 42px;
	    margin-top: 0.7%;
	    margin-left: 0.7%;
	    
	}

	.w3-button::before {
	      content:"☰";
	      font-size:32px;
	      color:white;
	      text-align: center;
	    }

	.w3-button:hover{
	    opacity: 0.6;
	    }


	 .w3-sidebar {
	 	position: absolute;
	     z-index:12;
	     width:188px;
	     left: -188px;
	     line-height:2;
	     position:fixed; 
	     border-bottom:.5px solid rgba(204, 158, 90, 1);
	     border-top:.5px solid rgba(204, 158, 90, 1);
	     background-color:#f2bd66;
	     font-family: 'Libre Baskerville', serif;		
		 font-weight: 400;
	     text-align:center;
	     color: #5b5f5e;
	     height: 100vh;
	     border-right:4px solid #af874b; 	
	     
	   }

	   
	   	
		
		.w3-bar-item {
		width: 188px;
	     margin:0 auto;
	     line-height:2;
	     border-bottom:.5px solid rgba(204, 158, 90, 1);
	     border-top:.5px solid rgba(204, 158, 90, 1);
	     background-color:transparent;
	     font-family: 'Libre Baskerville', serif;		
		 font-weight: 400;
	     text-align:center;
	     color: #5b5f5e;
	     float: left;
	   }

	   #close-menu{
	   	background-color: #5b5f5e;
	   	color: white;
	   }
	   #close-menu:hover{
	   	opacity: 0.7;
	   }




	   .nav a:hover {

	   	background-color: #292446;opacity: 0.9;
	   	color: white;

	   }

＆＃13;

Answer 1

如果您不知道如何在js中执行此操作，则可以使用纯css： Toggle class on HTML element without jQuery

如果您仍想使用js来实现，则可以在单击按钮时切换菜单容器上的类，并根据切换的类使用css进行转换。如果使用jquery，可以使用简单的jquery淡入淡出或滑动功能来执行此操作：

<script>
  $('#my-menu-button').click(function(){
    $('#my-menu').slideToggle();
  })
</script>

Answer 2

我为你写了一个演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>

    <style>
        .test {
            width: 100px;
            height: 100px;
            background: #000;
            display: block; 
            transition: 1s;
            opacity: 0
        }
        .active {
            opacity: 1
        }
    </style>
</head>
<body>

    <div class="test"></div>

    <button onclick="show()">show</button>
    <button onclick="hide()">hide</button>

    <script>

        var test = document.querySelector('.test')
        function show () {
            test.className = 'test active'
        }

        function hide () {
            test.className = 'test'
        }


    </script>
</body>
</html>

菜单触发器点击

2 个答案: