php实现导航菜单

实现导航菜单的基本方法

在PHP中实现导航菜单可以通过多种方式完成，以下是一些常见的方法：

使用数组和循环生成菜单

定义一个包含菜单项的数组，然后通过循环输出HTML结构：

$menuItems = [
    ['title' => '首页', 'url' => 'index.php'],
    ['title' => '产品', 'url' => 'products.php'],
    ['title' => '关于我们', 'url' => 'about.php'],
    ['title' => '联系我们', 'url' => 'contact.php']
];

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

从数据库获取菜单项

如果菜单项存储在数据库中，可以使用数据库查询获取：

$db = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');
$stmt = $db->query("SELECT title, url FROM menu_items ORDER BY display_order");
$menuItems = $stmt->fetchAll(PDO::FETCH_ASSOC);

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

动态高亮当前菜单项

为当前页面高亮显示对应的菜单项：

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

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

多级菜单实现

对于多级导航菜单，可以使用递归函数：

function buildMenu(array $items, $parentId = 0) {
    $html = '<ul>';
    foreach ($items as $item) {
        if ($item['parent_id'] == $parentId) {
            $html .= '<li>';
            $html .= '<a href="'.$item['url'].'">'.$item['title'].'</a>';
            $html .= buildMenu($items, $item['id']);
            $html .= '</li>';
        }
    }
    $html .= '</ul>';
    return $html;
}

echo buildMenu($menuItems);

使用CSS美化菜单

配合CSS可以创建美观的导航菜单：

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

nav li {
    display: inline-block;
}

nav a {
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
}

nav a:hover, nav li.active a {
    background: #555;
}

响应式导航菜单

创建适应移动设备的响应式菜单：

echo '<nav class="navbar">
        <div class="menu-toggle">☰</div>
        <ul class="menu">';
foreach ($menuItems as $item) {
    echo '<li><a href="'.$item['url'].'">'.$item['title'].'</a></li>';
}
echo '</ul></nav>';

配合CSS媒体查询和JavaScript实现响应式效果：

@media (max-width: 768px) {
    .menu {
        display: none;
    }
    .menu-toggle {
        display: block;
        cursor: pointer;
    }
    .menu.active {
        display: block;
    }
}

document.querySelector('.menu-toggle').addEventListener('click', function() {
    document.querySelector('.menu').classList.toggle('active');
});

以上方法可以根据项目需求进行组合和调整，实现各种类型的导航菜单功能。