CSS可以實現各種各樣的效果，其中之一是仿手機菜單。下面將介紹如何使用CSS實現仿手機菜單效果。

html,body{
height:100%;
}
.menu{
position:fixed;
top:0;
left:0;
z-index:999;
width:100%;
height:50px;
background:#333;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 20px;
box-sizing:border-box;
}
.logo{
color:#fff;
font-size:20px;
}
.icon{
color:#fff;
font-size:26px;
}
.nav{
position:fixed;
top:50px;
left:-200px;
z-index:999;
width:200px;
height:calc(100% - 50px);
background:#333;
padding:20px;
box-sizing:border-box;
transition:all .3s ease-in-out;
}
.nav.show{
left:0;
}
.nav ul{
list-style:none;
padding:0;
margin:0;
}
.nav li{
margin:10px 0;
}
.nav li a{
color:#fff;
font-size:18px;
text-decoration:none;
}

代碼解釋：

首先設置了html和body的高度為100%，以保證在瀏覽器窗口大小變化時菜單樣式仍然能夠適應。然后定義了菜單樣式，采用flex布局，使得logo和icon能夠在菜單上居中對齊。接著定義了菜單下拉部分的樣式，采用了position:fixed屬性和left:-200px的負值，使得該部分始終在菜單下方但不可見，當需要展示時通過添加.show類來實現left:0的平移。最后定義了菜單項的樣式，包括a標簽的字體顏色和大小等。