php 菜单 实现

PHP 菜单实现方法

静态菜单实现

静态菜单适合内容固定的网站，直接在HTML中编写菜单结构。PHP文件可以包含菜单部分，便于统一管理。

<nav>
    <ul>
        <li><a href="index.php">首页</a></li>
        <li><a href="about.php">关于我们</a></li>
        <li><a href="services.php">服务</a></li>
        <li><a href="contact.php">联系我们</a></li>
    </ul>
</nav>

动态菜单实现

动态菜单适合需要从数据库获取菜单项的场景，例如CMS系统。

// 假设从数据库获取菜单项
$menuItems = [
    ['title' => '首页', 'url' => 'index.php'],
    ['title' => '产品', 'url' => 'products.php'],
    ['title' => '博客', 'url' => 'blog.php']
];

echo '<ul>';
foreach ($menuItems as $item) {
    echo '<li><a href="' . $item['url'] . '">' . $item['title'] . '</a></li>';
}
echo '</ul>';

多级菜单实现

对于复杂的网站结构，可能需要实现多级下拉菜单。

$menuItems = [
    ['title' => '首页', 'url' => 'index.php'],
    ['title' => '产品', 'url' => '#', 'submenu' => [
        ['title' => '产品1', 'url' => 'product1.php'],
        ['title' => '产品2', 'url' => 'product2.php']
    ]],
    ['title' => '服务', 'url' => 'services.php']
];

function renderMenu($items) {
    echo '<ul>';
    foreach ($items as $item) {
        echo '<li>';
        echo '<a href="' . $item['url'] . '">' . $item['title'] . '</a>';
        if (isset($item['submenu'])) {
            renderMenu($item['submenu']);
        }
        echo '</li>';
    }
    echo '</ul>';
}

renderMenu($menuItems);

当前菜单项高亮

通过比较当前URL与菜单项URL，为当前页面菜单项添加active类。

$currentPage = basename($_SERVER['PHP_SELF']);

foreach ($menuItems as $item) {
    $active = ($currentPage == basename($item['url'])) ? 'active' : '';
    echo '<li class="' . $active . '"><a href="' . $item['url'] . '">' . $item['title'] . '</a></li>';
}

使用CSS美化菜单

配合CSS可以创建各种风格的菜单，以下是一个水平导航栏样式示例。

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

nav li {
    float: left;
}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav li a:hover {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

响应式菜单实现

对于移动设备，可以使用媒体查询和JavaScript创建响应式菜单。

<button class="menu-toggle">菜单</button>
<nav class="main-nav">
    <ul>
        <!-- 菜单项 -->
    </ul>
</nav>

<style>
@media (max-width: 768px) {
    .main-nav {
        display: none;
    }
    .main-nav.active {
        display: block;
    }
}
</style>

<script>
document.querySelector('.menu-toggle').addEventListener('click', function() {
    document.querySelector('.main-nav').classList.toggle('active');
});
</script>