当前位置：首页 > PHP

php导航栏实现

2026-02-16 15:00:48PHP

使用HTML和CSS创建基础导航栏

在PHP文件中嵌入HTML和CSS代码，构建一个静态导航栏。PHP文件可以包含HTML结构，通过CSS控制样式。

<!DOCTYPE html>
<html>
<head>
    <style>
        .navbar {
            background-color: #333;
            overflow: hidden;
        }
        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
    </div>
</body>
</html>

动态生成导航栏

通过PHP数组或数据库动态生成导航栏，便于维护和扩展。

<?php
$navItems = [
    ['title' => 'Home', 'url' => '#home'],
    ['title' => 'News', 'url' => '#news'],
    ['title' => 'Contact', 'url' => '#contact']
];
?>

<div class="navbar">
    <?php foreach ($navItems as $item): ?>
        <a href="<?php echo $item['url']; ?>"><?php echo $item['title']; ?></a>
    <?php endforeach; ?>
</div>

添加当前页面高亮

通过PHP判断当前页面URL，为对应导航项添加高亮样式。

<?php
$currentPage = basename($_SERVER['PHP_SELF']);
$navItems = [
    ['title' => 'Home', 'url' => 'index.php'],
    ['title' => 'News', 'url' => 'news.php'],
    ['title' => 'Contact', 'url' => 'contact.php']
];
?>

<div class="navbar">
    <?php foreach ($navItems as $item): ?>
        <a href="<?php echo $item['url']; ?>" 
           <?php if ($currentPage == $item['url']) echo 'class="active"'; ?>>
           <?php echo $item['title']; ?>
        </a>
    <?php endforeach; ?>
</div>

使用Bootstrap快速构建导航栏

引入Bootstrap框架，快速实现响应式导航栏。

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Logo</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#news">News</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

数据库驱动的导航栏

从数据库读取导航项，实现动态管理。

<?php
$db = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');
$query = $db->query("SELECT title, url FROM nav_items ORDER BY display_order");
$navItems = $query->fetchAll(PDO::FETCH_ASSOC);
?>

<div class="navbar">
    <?php foreach ($navItems as $item): ?>
        <a href="<?php echo $item['url']; ?>"><?php echo $item['title']; ?></a>
    <?php endforeach; ?>
</div>

php导航栏实现