手机js导航菜单滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Sliding Menu</title>
    <style>
        .menu-container {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
        }
        .menu-item {
            display: inline-block;
            padding: 10px 20px;
            border: 1px solid #ccc;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="menu-container">
        <div class="menu-item">Home</div>
        <div class="menu-item">About</div>
        <div class="menu-item">Services</div>
        <div class="menu-item">Contact</div>
        <!-- Add more menu items as needed -->
    </div>

    <script>
        // Optional: Add touch event listeners for better control on mobile devices
        const menuContainer = document.querySelector('.menu-container');
        let startX, scrollLeft;

        menuContainer.addEventListener('touchstart', (e) => {
            startX = e.pageX - menuContainer.offsetLeft;
            scrollLeft = menuContainer.scrollLeft;
        });

        menuContainer.addEventListener('touchmove', (e) => {
            const x = e.pageX - menuContainer.offsetLeft;
            const walk = (x - startX) * 3; // Adjust scroll speed
            menuContainer.scrollLeft = scrollLeft - walk;
        });
    </script>
</body>
</html>