首頁 > 後端開發 > PHP問題 > php如何實作左側導覽功能

php如何實作左側導覽功能

PHPz
發布: 2023-04-11 15:50:16
原創
805 人瀏覽過

隨著Web應用程式的快速發展,網站應用程式越來越複雜,介面越來越繁瑣,對於使用者來說,一款簡潔易用的介面顯得尤為重要。左側導覽列是Web應用程式中經典的UI設計,為使用者提供了必要的導航和操作功能。下面我們將介紹php如何實作左側導覽。

一、HTML

首先,我們需要寫HTML程式碼。在左側欄中,我們可以使用ul和li元素來實現垂直排列的導覽列。例如:

<ul>
    <li><a href="#">导航项1</a></li>
    <li><a href="#">导航项2</a></li>
    <li><a href="#">导航项3</a></li>
    <li><a href="#">导航项4</a></li>
    <li><a href="#">导航项5</a></li>
</ul>
登入後複製

這裡我們用a元素來展示導航鏈接,即當使用者點擊導航項目時,將會跳到對應的頁面。我們可以透過CSS對導覽列進行美化。

二、PHP

接下來,我們將使用php來實作左側導覽。 php可以輕鬆地產生HTML程式碼,並使其與資料庫中的內容高度整合。例如,我們可以使用php程式碼從資料庫中取得導航項目:

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT id, title, link FROM navigation";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        echo "<li><a href=&#39;" . $row["link"]. "&#39;>". $row["title"]. "</a></li>";
    }
} else {
    echo "0 结果";
}
$conn->close();
?>
登入後複製

在這段程式碼中,我們連接到資料庫並從中提取導航項目。然後,我們使用while循環來輸出導航項,連接和標題都會從資料庫中取得。

三、完整的程式碼

最後,我們將HTML和PHP程式碼組合在一起,以產生完整的左側導覽。

<!DOCTYPE html>
<html>
<head>
<style>
/* CSS代码用于美化导航栏 */
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

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

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>
<!-- HTML代码用于创建左侧导航栏 -->
<ul>
<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT id, title, link FROM navigation";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        echo "<li><a href=&#39;" . $row["link"]. "&#39;>". $row["title"]. "</a></li>";
    }
} else {
    echo "0 结果";
}
$conn->close();
?>
</ul>
</body>
</html>
登入後複製

總結

透過php實現左側導航可以方便地處理動態數據,從而使網站的UI設計更加靈活、易於維護和協調。透過本文介紹的方法可以讓您更能掌握php實現左側導覽的方法。

以上是php如何實作左側導覽功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板