php实现左边栏

2026-02-16 17:35:41PHP

实现左侧边栏的基本结构

使用HTML和CSS创建左侧边栏的基础框架，通常采用<div>元素并固定定位。以下是一个简单示例：

<div class="sidebar">
    <ul>
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
        <li><a href="#">菜单项3</a></li>
    </ul>
</div>

.sidebar {
    width: 250px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #f4f4f4;
    border-right: 1px solid #ddd;
}
.sidebar ul {
    list-style: none;
    padding: 0;
}
.sidebar li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
}
.sidebar li a:hover {
    background-color: #ddd;
}

动态生成侧边栏内容

通过PHP从数据库或配置文件中动态加载菜单项，实现灵活管理。

<?php
$menuItems = [
    ['title' => '首页', 'url' => 'index.php'],
    ['title' => '产品', 'url' => 'products.php'],
    ['title' => '关于我们', 'url' => 'about.php']
];
?>
<div class="sidebar">
    <ul>
        <?php foreach ($menuItems as $item): ?>
            <li><a href="<?php echo $item['url']; ?>"><?php echo $item['title']; ?></a></li>
        <?php endforeach; ?>
    </ul>
</div>

响应式侧边栏设计

通过CSS媒体查询实现侧边栏在小屏幕设备上的折叠效果：

@media (max-width: 768px) {
    .sidebar {
        width: 60px;
        overflow: hidden;
    }
    .sidebar:hover {
        width: 250px;
    }
}

结合Session控制权限菜单

根据用户权限动态显示菜单项，例如管理员与普通用户的不同视图：

<?php
session_start();
$adminItems = [['title' => '管理面板', 'url' => 'admin.php']];
?>
<div class="sidebar">
    <ul>
        <?php foreach ($menuItems as $item): ?>
            <li><a href="<?php echo $item['url']; ?>"><?php echo $item['title']; ?></a></li>
        <?php endforeach; ?>
        <?php if ($_SESSION['role'] === 'admin'): ?>
            <?php foreach ($adminItems as $item): ?>
                <li><a href="<?php echo $item['url']; ?>"><?php echo $item['title']; ?></a></li>
            <?php endforeach; ?>
        <?php endif; ?>
    </ul>
</div>

使用PHP包含文件模块化

将侧边栏代码分离为独立文件（如sidebar.php），通过include或require在多个页面复用：

<?php include 'sidebar.php'; ?>

侧边栏交互增强

添加JavaScript实现折叠/展开功能，并保存状态到本地存储：

document.querySelector('.sidebar-toggle').addEventListener('click', function() {
    document.querySelector('.sidebar').classList.toggle('collapsed');
    localStorage.setItem('sidebarCollapsed', 'true');
});

对应的CSS类：