使用 HTML 和 CSS 的侧边栏菜单

2025-05-25

使用 HTML 和 CSS 的侧边栏菜单

在本文中，您将学习如何使用 HTML、CSS 和 JavaScript代码创建侧边栏菜单。与导航菜单栏一样，侧边栏菜单也在许多网站上使用。

您可以使用基本的 HTML、CSS 和 JavaScript 编程代码创建一个美观的侧边栏菜单。我已经设计了更多类型的侧边栏菜单。如果您愿意，可以参考这些教程。

✅观看实时预览👉👉使用 HTML CSS 的侧边栏菜单

这是一个非常简单的侧边菜单栏，包含一张头像和一些基本文字。在其下方，我添加了八个菜单。我为每个菜单添加了图标，并为菜单项添加了悬停效果。

当您点击这些菜单项或移动鼠标时，这些菜单的背景将会改变。

通常情况下，菜单栏是完全可见的，但有一个按钮，点击后会隐藏菜单栏。这里我创建了一个导航栏，但在这种情况下，我没有添加任何菜单项。您可以根据需要在该空间中添加菜单项。

步骤 1：创建基本的 HTML 结构来创建侧边栏

要创建此文件，您需要创建一个 HTML 和 CSS 文件。然后复制下面的结构并将其粘贴到 HTML 文件中。下面的 HTML 结构中，我已包含所有需要添加代码的信息。请按照本教程，并根据以下信息添加代码。



<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>

    <div class="wrapper">
        <!--Top menu -->
        <div class="sidebar">
           <!--profile image & text-->
            <!--menu item-->
        </div>

    </div>
  <script>

  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

第 2 步：使用 css 代码设计背景

我用一些基本的 CSS 代码来设计背景，并给侧边栏添加形状。在本例中，我使用了蓝色作为背景。您可以根据需要更改颜色。



    @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*{
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body{
    background: #f5f6fa;
}

.wrapper .sidebar{
    background: rgb(5, 68, 104);
    position: fixed;
    top: 0;
    left: 0;
    width: 225px;
    height: 100%;
    padding: 20px 0;
    transition: all 0.5s ease;
}
Enter fullscreen mode Exit fullscreen mode

创建基本的 html 结构来创建侧边栏

步骤 3：添加个人资料图片和标题

正如您在上面的演示中所看到的，首先，我在这里使用了个人资料图片、标题和一些描述。我使用了以下 HTML 和 CSS 编程代码来制作它。

在这种情况下，您可以根据自己的喜好更改个人资料图片，并根据需要增大或减小图片的尺寸。在本例中，我使用了height 100px和width 100px。

border-radius 50%这里我在头像中使用了圆角，使图片看起来完全是圆形。如果你想保持方形或其他尺寸，可以更改此百分比。



 <div class="profile">
                <img src="https://1.bp.blogspot.com/-vhmWFWO2r8U/YLjr2A57toI/AAAAAAAACO4/0GBonlEZPmAiQW4uvkCTm5LvlJVd_-l_wCNcBGAsYHQ/s16000/team-1-2.jpg" alt="profile_picture">
                <h3>Anamika Roy</h3>
                <p>Designer</p>
            </div>
Enter fullscreen mode Exit fullscreen mode 


.wrapper .sidebar .profile{
    margin-bottom: 30px;
    text-align: center;
}

.wrapper .sidebar .profile img{
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
}

.wrapper .sidebar .profile h3{
    color: #ffffff;
    margin: 10px 0 5px;
}

.wrapper .sidebar .profile p{
    color: rgb(206, 240, 253);
    font-size: 14px;
}
Enter fullscreen mode Exit fullscreen mode

添加个人资料图片和标题

步骤 4：在侧边栏中添加菜单项

在本例中，我使用了eight menu items。我为每个菜单都添加了一个图标，以使菜单项更加美观和吸引人。您可以根据需要更改这些图标和菜单项。



<ul>
                <li>
                    <a href="#" class="active">
                        <span class="icon"><i class="fas fa-home"></i></span>
                        <span class="item">Home</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-desktop"></i></span>
                        <span class="item">My Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-user-friends"></i></span>
                        <span class="item">People</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-tachometer-alt"></i></span>
                        <span class="item">Perfomance</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-database"></i></span>
                        <span class="item">Development</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-chart-line"></i></span>
                        <span class="item">Reports</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-user-shield"></i></span>
                        <span class="item">Admin</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-cog"></i></span>
                        <span class="item">Settings</span>
                    </a>
                </li>
            </ul>
        </div>
Enter fullscreen mode Exit fullscreen mode

步骤 5：使用 CSS 代码设计菜单项

下面的代码是原来用来设计和给上面添加的菜单项添加颜色的CSS编程代码。

在这种情况下，我在图标和文本之间使用了白色，这在蓝色背景上看起来更有趣。您可以在下面看到我添加了悬停效果。当您将鼠标悬停在该菜单上或点击该菜单时，背景将像您在上面的演示中看到的那样变化。



.wrapper .sidebar ul li a{
    display: block;
    padding: 13px 30px;
    border-bottom: 1px solid #10558d;
    color: rgb(241, 237, 237);
    font-size: 16px;
    position: relative;
}

.wrapper .sidebar ul li a .icon{
    color: #dee4ec;
    width: 30px;
    display: inline-block;
}
Enter fullscreen mode Exit fullscreen mode 


.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
    color: #0c7db1;

    background:white;
    border-right: 2px solid rgb(5, 68, 104);
}

.wrapper .sidebar ul li a:hover .icon,
.wrapper .sidebar ul li a.active .icon{
    color: #0c7db1;
}

.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

在侧边栏中添加菜单项

步骤 6：创建导航栏

在本例中，我使用了导航栏，但没有在导航栏中使用任何链接。我添加了一个菜单按钮，点击该按钮会隐藏整个菜单，再次点击后菜单会显示出来。以下 HTML 和 CSS 编程代码用于创建和设计此菜单栏。



<div class="section">
            <div class="top_navbar">
                <div class="hamburger">
                    <a href="#">
                        <i class="fas fa-bars"></i>
                    </a>
                </div>
            </div>

        </div>
Enter fullscreen mode Exit fullscreen mode 


.wrapper .section{
    width: calc(100% - 225px);
    margin-left: 225px;
    transition: all 0.5s ease;
}

.wrapper .section .top_navbar{
    background: rgb(7, 105, 185);
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 30px;

}

.wrapper .section .top_navbar .hamburger a{
    font-size: 28px;
    color: #f4fbff;
}

.wrapper .section .top_navbar .hamburger a:hover{
    color: #a2ecff;
}
Enter fullscreen mode Exit fullscreen mode

以下 CSS 代码主要指示了此菜单按钮激活时侧边栏的确切位置。这意味着当您点击菜单按钮时，整个侧边栏将被隐藏。

下面我已经指出，当单击该菜单按钮时，侧面将会move 225 to the left，也就是说，它将完全隐藏。




body.active .wrapper .sidebar{
    left: -225px;
}

body.active .wrapper .section{
    margin-left: 0;
    width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

步骤 7：添加 JavaScript 代码以激活菜单按钮

在这种情况下，我使用了非常少量的 JavaScript 代码，这些代码原本用于激活导航菜单栏上的菜单按钮。如果您看过上面的演示，您就会明白我在这里创建了一个菜单按钮，如果您点击该按钮，整个菜单栏就会被隐藏。

现在我们将激活该按钮，这意味着当您点击此按钮时，上面添加的 CSS 代码将生效。我使用了以下 JavaScript 编程代码来实现它。下面的 JavaScript 编程代码非常简单，希望您能理解。



  var hamburger = document.querySelector(".hamburger");
    hamburger.addEventListener("click", function(){
        document.querySelector("body").classList.toggle("active");
    })
Enter fullscreen mode Exit fullscreen mode

希望您通过本教程了解了我是如何创建此侧边栏菜单的。我已经设计了很多类似的菜单，如果您感兴趣可以看看。

相关文章：

  1. 简单页脚 HTML CSS
  2. 使用 JavaScript 的秒表
  3. 海得拉巴的国际学校
  4. JavaScript 年龄计算器
  5. 班加罗尔的国际学校
  6. HTML CSS 中的自动图像滑块

您可以访问我的博客获取更多类似的教程。https
://www.foolishdeveloper.com/

文章来源：https://dev.to/code_mystery/sidebar-menu-using-html-and-css-o49
Devto 翻译
PREV
使用 JavaScript 的简单倒计时器
NEXT
如何创建银行登陆页面 HTML CSS JavaScript