css 左侧菜单点击展开 |css3 scale兼容性

/* CSS */
.menu {
background-color: #f1f1f1;
width: 200px;
height: 100%;
position: fixed;
top: 0;
left: -200px;
transition: left 0.3s ease-in-out;
}
.menu.show {
left: 0;
}
/* JavaScript */
const menuBtn = document.querySelector('.menu-btn');
const menu = document.querySelector('.menu');
menuBtn.addEventListener('click', () =>{
menu.classList.toggle('show');
});

以上代码中，CSS 部分定义了菜单的样式，并利用position: fixed和left: -200px将菜单隐藏。使用transition属性实现菜单展开时的动画效果。

JavaScript 部分则使用事件监听器为菜单按钮添加点击事件，当点击按钮时，show类会被添加或移除，使菜单展开或隐藏。

使用 CSS 左侧菜单的点击展开功能可以帮助网站提高用户体验和导航性，让网站更加人性化。