问题描述:

function transition() {

var divtran = document.getElementById('mobile_menu');

if (divtran.style.height == '100vh')

divtran.style.height = '0vh'

else

divtran.style.height = '100vh'

}

/*mobile Menu */

.mobilemenu{z-index: 21;margin-top: -80px;margin-right: -7px;position:relative;width:50px;height:40px;border: 0px;-webkit-transition:background .3s;transition:background .3s

}

.mobilemenu span{height:-2px;top:20px;left:10px;right:10px;position:absolute;

}

.mobilemenu span::after,.mobilemenu span::before{position:absolute;left:0;height: 3px;width:100%;border-radius: 50px;background-color: #232323;content:"";

}

.mobilemenu_transition {background-color: transparent;

}

/*transition code persec*/

.mobilemenu_transition span{-webkit-transition:background 0s .3s;transition:background 0s .3s;

}

.mobilemenu_transition span::after,.mobilemenu_transition span::before{-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s;

}

.mobilemenu_transition span::before{-webkit-transition-property:top,-webkit-transform;transition-property:top,transform;

}

.mobilemenu_transition span::after{-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform;

}

.mobilemenu_transition.act{background-color: transparent;

}

.mobilemenu_transition.act span::before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);

}

.mobilemenu_transition.act span::after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);

}

#mobile_menu {width: 100%;height: 0vh;position: absolute;z-index: 18;background-color: orange;overflow: hidden;position: fixed;background-color: #f3f3f3;-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s;

}

<!DOCTYPE html>

<html lang="en">

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>

<body><div id="mobile_menu"><br /><br /><br /><a href="#" onclick="transition()">bottom</a></div><a href="#"><div class="_menu"><button onClick = "transition()" class="mobilemenu mobilemenu_transition"><span></span></button></div></a>

<script>

(function() {

"use strict";

var toggles = document.querySelectorAll(".mobilemenu");

for (var i = toggles.length - 1; i >= 0; i--) {

var toggle = toggles[i];

toggleHandler(toggle);

};

function toggleHandler(toggle) {

toggle.addEventListener( "click", function(e) {

e.preventDefault();

(this.classList.contains("act") === true) ? this.classList.remove("act") : this.classList.add("act");

});

}

})();

</script>

</body>

</html>

网友答案:

function transition() {
       var divtran = document.getElementById('mobile_menu');
       var mobileMenu = document.querySelectorAll(".mobilemenu");
       var menuOpen = false;
       if (divtran.style.height == '100vh') {
           divtran.style.height = '0vh';
           menuOpen = false;
       }
       else {
           divtran.style.height = '100vh'
           menuOpen = true;
       }
       for(var i=0;i<mobileMenu.length;i++){
          if(menuOpen) {
            mobileMenu[i].classList.add("act");
          }
          else {
            mobileMenu[i].classList.remove("act");
          }

       }
}
/*mobile Menu */

.mobilemenu{z-index: 21;margin-top: -80px;margin-right: -7px;position:relative;width:50px;height:40px;border: 0px;-webkit-transition:background .3s;transition:background .3s
}


.mobilemenu span{height:-2px;top:20px;left:10px;right:10px;position:absolute;
}

.mobilemenu span::after,.mobilemenu span::before{position:absolute;left:0;height: 3px;width:100%;border-radius: 50px;background-color: #232323;content:"";
}


.mobilemenu_transition {background-color: transparent;
}

/*transition code persec*/
.mobilemenu_transition span{-webkit-transition:background 0s .3s;transition:background 0s .3s;
}

.mobilemenu_transition span::after,.mobilemenu_transition span::before{-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s;
}

.mobilemenu_transition span::before{-webkit-transition-property:top,-webkit-transform;transition-property:top,transform;
}

.mobilemenu_transition span::after{-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform;
}

.mobilemenu_transition.act{background-color: transparent;
}

.mobilemenu_transition.act span::before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);
}

.mobilemenu_transition.act span::after{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);
}


#mobile_menu {width: 100%;height: 0vh;position: absolute;z-index: 18;background-color: orange;overflow: hidden;position: fixed;background-color: #f3f3f3;-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s;
}
<!DOCTYPE html>
<html lang="en">
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

</head>
<body><div id="mobile_menu"><br /><br /><br /><a href="#" onclick="transition()">bottom</a></div><a href="#"><div class="_menu"><button onClick = "transition()" class="mobilemenu mobilemenu_transition"><span></span></button></div></a>
</body>
</html>
相关阅读:
Top