php左右滑动菜单（php左侧导航栏）

作者：Haggard憔悴发布日期:2025-01-08 浏览:811

以下是一个使用PHP和HTML实现左右滑动菜单的示例：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    padding: 0;
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    background-color: #f1f1f1;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
}

#sidebar .menu-item {
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    transition: 0.3s;
}

#sidebar .menu-item:hover {
    background-color: #ddd;
}

#content {
    margin-left: 200px;
    padding: 16px;
    transition: 0.5s;
}

#menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    #sidebar {
        width: 0;
    }

    #content {
        margin-left: 0;
    }

    #menu-toggle:checked ~ #sidebar {
        width: 200px;
    }

    #menu-toggle:checked ~ #content {
        margin-left: 200px;
    }
}
</style>
</head>
<body>
    <input type="checkbox" id="menu-toggle">
    <label for="menu-toggle">&#9776; Toggle Menu</label>

    <div id="sidebar">
        <a class="menu-item" href="#">Home</a>
        <a class="menu-item" href="#">About</a>
        <a class="menu-item" href="#">Contact</a>
    </div>

    <div id="content">
        <h1>Welcome to my website</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id iaculis massa. Morbi euismod, ligula nec pulvinar pulvinar, quam dolor ultrices ex, sed pellentesque augue purus a tellus. Sed et mi nec lacus fringilla aliquet. Mauris a tellus euismod, lacinia odio eu, sodales lacus. Vivamus vestibulum, risus a lacinia dignissim, mauris libero faucibus neque, nec vestibulum ante orci nec nunc. Suspendisse potenti. Proin euismod, nisl a tincidunt suscipit, metus nunc facilisis augue, id maximus justo sapien et risus. Nulla facilisi.</p>
    </div>
</body>
</html>

上述代码中，我们使用了CSS的position: fixed属性将侧边栏固定在页面的左侧，并使用transition属性实现了平滑的过渡效果。在小屏幕设备上，通过媒体查询和复选框的选择器，可以实现点击按钮时显示或隐藏侧边栏。

你可以根据自己的需求修改侧边栏的内容和样式。

上一篇：php 多维数组重组（php数组重复）

下一篇：php 数组随机生成值