要实现手机站点击后显示菜单的功能，通常需要结合HTML、CSS和JavaScript来编写代码。下面是一个简单的例子，展示了如何实现这一功能：
HTML结构：
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* CSS样式将放在这里 */
</style>
</head>
<body>
<div>
<!-- 触发菜单显示的按钮或图标 -->
<button>显示菜单</button>
</div>
<div id="mobileMenu">
<!-- 菜单内容 -->
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<script>
// JavaScript代码将放在这里
</script>
</body>
</html>
CSS样式：
css
<style>
/* 隐藏菜单，直到点击触发按钮 */
.menu {
display: none;
background-color: #f9f9f9;
padding: 10px;
position: absolute;
width: 100%; /* 或者想要的宽度 */
z-index: 999; /* 确保菜单显示在内容之上 */
}
/* 菜单列表样式 */
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu ul li {
padding: 10px;
}
.menu ul li a {
text-decoration: none;
color: #333;
}
/* 触发按钮样式 */
.menu-trigger {
text-align: center;
margin-bottom: 20px; /* 或者想要的间距 */
}
.menu-trigger button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
</style>
JavaScript代码：
javascript
<script>
document.querySelector('.menu-trigger button').addEventListener('click', function() {
var menu = document.getElementById('mobileMenu');
menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
});
</script>
在这个例子中，我们有一个触发菜单显示的按钮（.menu-trigger button），以及一个隐藏的菜单（.menu）。CSS样式中的.menu设置了display: none;来隐藏菜单。当点击按钮时，JavaScript代码会检查菜单的当前显示状态，如果它是隐藏的（display: none），则将其更改为显示（display: block），反之亦然。
请注意，这个例子是基本的，并没有考虑一些高级功能，如动画效果、菜单项的响应式设计等。此外，你可能还需要调整CSS样式以适应网站设计和布局。
支付宝打赏 
微信打赏 如果文章对你有帮助，欢迎点击上方按钮打赏作者
版权声明：若无特殊注明，本文皆为( FFan )原创，转载请保留文章出处。
