php 收缩式导航菜单

在PHP中实现一个响应式（收缩式）导航菜单通常涉及HTML、CSS和JavaScript的使用。虽然PHP主要用于服务器端逻辑，但结合这些前端技术，可以创建一个动态且适应不同设备屏幕大小的导航菜单。下面是一个基本的示例，展示如何使用PHP生成导航菜单，并通过CSS和JavaScript实现响应式效果。

1. 创建导航菜单的结构

首先，使用PHP生成导航菜单的HTML结构。假设你有一个包含菜单项的数组：

php<?php
$menu_items = [
    ['name' => '首页', 'url' => 'index.php'],
    ['name' => '关于我们', 'url' => 'about.php'],
    ['name' => '服务', 'url' => 'services.php'],
    ['name' => '联系我们', 'url' => 'contact.php'],
];
?>

2. 输出导航菜单的HTML

使用PHP循环遍历菜单项并输出HTML：

php<nav class="navbar">
    <div class="logo">我的网站</div>
    <ul class="nav-links">
        <?php foreach ($menu_items as $item): ?>
            <li><a href="<?php echo htmlspecialchars($item['url']); ?>"><?php echo htmlspecialchars($item['name']); ?></a></li>
        <?php endforeach; ?>
    </ul>
    <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>
</nav>

3. 添加CSS样式

为导航菜单添加基本的样式，并实现响应式效果：

html<style>
/* 基本样式 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 10px 20px;
}

.logo {
    color: #fff;
    font-size: 24px;
}

.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

/* 隐藏汉堡菜单 */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    height: 3px;
    width: 25px;
    background: #fff;
    margin-bottom: 4px;
    border-radius: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav-links {
        position: absolute;
        right: 0;
        top: 50px;
        flex-direction: column;
        background-color: #333;
        width: 100%;
        display: none; /* 默认隐藏 */
    }

    .nav-links li {
        margin: 15px 0;
        text-align: center;
    }

    .hamburger {
        display: flex;
    }

    .nav-links.active {
        display: flex;
    }
}
</style>

4. 添加JavaScript功能

通过JavaScript来切换导航菜单的显示与隐藏：

html<script>
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {
    navLinks.classList.toggle('active');
});
</script>

5. 完整示例

将上述所有部分结合起来，形成一个完整的PHP文件：

php<?php
$menu_items = [
    ['name' => '首页', 'url' => 'index.php'],
    ['name' => '关于我们', 'url' => 'about.php'],
    ['name' => '服务', 'url' => 'services.php'],
    ['name' => '联系我们', 'url' => 'contact.php'],
];
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>响应式导航菜单</title>
    <style>
        /* 将上面的CSS样式粘贴到这里 */
    </style>
</head>
<body>

<nav class="navbar">
    <div class="logo">我的网站</div>
    <ul class="nav-links">
        <?php foreach ($menu_items as $item): ?>
            <li><a href="<?php echo htmlspecialchars($item['url']); ?>"><?php echo htmlspecialchars($item['name']); ?></a></li>
        <?php endforeach; ?>
    </ul>
    <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>
</nav>

<script>
    // 将上面的JavaScript代码粘贴到这里
</script>

</body>
</html>

6. 进一步优化

动画效果：可以为导航菜单的显示和隐藏添加过渡动画，使用户体验更佳。 css.nav-links { /* 其他样式 */ transition: all 0.3s ease-in; } .nav-links.active { /* 其他样式 */ }
高亮当前页面：通过PHP检测当前页面，并为对应的菜单项添加一个高亮类。 php<?php foreach ($menu_items as $item): ?> <li class="<?php echo ($_SERVER['PHP_SELF'] == $item['url']) ? 'active' : ''; ?>"> <a href="<?php echo htmlspecialchars($item['url']); ?>"><?php echo htmlspecialchars($item['name']); ?></a> </li> <?php endforeach; ?> 然后在CSS中定义.active类的样式： css.nav-links li.active a { color: #f4a261; /* 高亮颜色 */ }
多级菜单：如果需要支持多级子菜单，可以在HTML结构中嵌套<ul>，并通过CSS和JavaScript进行样式和交互处理。