后端开发教程 - Java、Spring Boot 实战 - msg200.com
仅使用 HTML 和 CSS 创建侧边栏菜单
本文最初发表于https://www.codingnepalweb.com。
作为网站访问者，您可能在很多网站上都注意到过侧边栏。但作为一名网页开发者新手，您是否想过如何仅使用 HTML 和 CSS 来创建侧边栏？没错，只需 HTML 和 CSS！创建侧边栏有助于初学者扎实掌握 HTML 基础知识，提升 CSS 样式技能，并获得网页设计的实践经验。
在这篇博文中，我将向您展示如何仅使用HTML和CSS制作一个响应式侧边栏。侧边栏初始时处于隐藏状态，仅显示每个链接的图标。当您将鼠标悬停在侧边栏上时，侧边栏会平滑展开以显示链接。
我们将使用基本的 HTML 元素（例如<aside>、<ul>、<li>和<a>）以及简单的 CSS 属性来设置其样式。这个 CSS 侧边栏项目非常简单，因此您应该很容易理解并遵循代码。
HTML 和 CSS 响应式侧边栏菜单视频教程
如果您喜欢通过视频教程学习，上面的 YouTube 视频是一个很好的资源。在这个视频中，我解释了每一行代码，并提供了详尽的注释，让您能够轻松上手创建 HTML 侧边栏，尤其适合初学者。
但是，如果您更喜欢阅读博客文章或需要该项目的分步指南，您可以继续阅读这篇文章。
使用 HTML 和 CSS 创建响应式侧边栏的步骤
要仅使用 HTML 和 CSS 创建响应式侧边栏，请按照以下简单的分步说明进行操作：
- 首先，创建一个任意名称的文件夹。然后，在其中创建必要的文件。
- 创建一个名为的文件
index.html作为主文件。 - 创建一个名为
style.cssCSS 代码的文件。 - 最后，下载Images文件夹并将其放在你的项目目录中。此文件夹包含此侧边栏项目使用的徽标和用户图像。
首先，将以下 HTML 代码添加到您的index.html文件中：此代码包含具有不同语义标签（如、、和）的基本 HTML 标记，<aside>以创建我们的侧边栏布局。<ul><li><a>
<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sidebar Menu HTML and CSS | CodingNepal</title>
<!-- Linking Google Font Link For Icons -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<aside class="sidebar">
<div class="sidebar-header">
<img src="images/logo.png" alt="logo" />
<h2>CodingLab</h2>
</div>
<ul class="sidebar-links">
<h4>
<span>Main Menu</span>
<div class="menu-separator"></div>
</h4>
<li>
<a href="#">
<span class="material-symbols-outlined"> dashboard </span>Dashboard</a>
</li>
<li>
<a href="#"><span class="material-symbols-outlined"> overview </span>Overview</a>
</li>
<li>
<a href="#"><span class="material-symbols-outlined"> monitoring </span>Analytic</a>
</li>
<h4>
<span>General</span>
<div class="menu-separator"></div>
</h4>
<li>
<a href="#"><span class="material-symbols-outlined"> folder </span>Projects</a>
</li>
<li>
<a href="#"><span class="material-symbols-outlined"> groups </span>Groups</a>
</li>
<li>
<a href="#"><span class="material-symbols-outlined"> move_up </span>Transfer</a>
</li>
<li>
<a href="#"><span class="material-symbols-outlined"> flag </span>All Reports</a>
</li>
<li>
<a href="#"><span class="material-symbols-outlined">
notifications_active </span>Notifications</a>
</li>
<h4>
<span>Account</span>
<div class="menu-separator"></div>
</h4>
<li>
<a href="#"><span class="material-symbols-outlined"> account_circle </span>Profile</a>
</li>
<li>
<a href="#"><span class="material-symbols-outlined"> settings </span>Settings</a>
</li>
<li>
<a href="#"><span class="material-symbols-outlined"> logout </span>Logout</a>
</li>
</ul>
<div class="user-account">
<div class="user-profile">
<img src="images/profile-img.jpg" alt="Profile Image" />
<div class="user-detail">
<h3>Eva Murphy</h3>
<span>Web Developer</span>
</div>
</div>
</div>
</aside>
</body>
</html>
接下来，将以下 CSS 代码添加到您的style.css文件，让您的侧边栏功能齐全，外观精美。您可以随意尝试不同的 CSS 属性，例如颜色、字体、背景等，让您的侧边栏更具吸引力。
/* Importing Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
background: #F0F4FF;
}
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 85px;
display: flex;
overflow-x: hidden;
flex-direction: column;
background: #161a2d;
padding: 25px 20px;
transition: all 0.4s ease;
}
.sidebar:hover {
width: 260px;
}
.sidebar .sidebar-header {
display: flex;
align-items: center;
}
.sidebar .sidebar-header img {
width: 42px;
border-radius: 50%;
}
.sidebar .sidebar-header h2 {
color: #fff;
font-size: 1.25rem;
font-weight: 600;
white-space: nowrap;
margin-left: 23px;
}
.sidebar-links h4 {
color: #fff;
font-weight: 500;
white-space: nowrap;
margin: 10px 0;
position: relative;
}
.sidebar-links h4 span {
opacity: 0;
}
.sidebar:hover .sidebar-links h4 span {
opacity: 1;
}
.sidebar-links .menu-separator {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
transform: scaleX(1);
transform: translateY(-50%);
background: #4f52ba;
transform-origin: right;
transition-delay: 0.2s;
}
.sidebar:hover .sidebar-links .menu-separator {
transition-delay: 0s;
transform: scaleX(0);
}
.sidebar-links {
list-style: none;
margin-top: 20px;
height: 80%;
overflow-y: auto;
scrollbar-width: none;
}
.sidebar-links::-webkit-scrollbar {
display: none;
}
.sidebar-links li a {
display: flex;
align-items: center;
gap: 0 20px;
color: #fff;
font-weight: 500;
white-space: nowrap;
padding: 15px 10px;
text-decoration: none;
transition: 0.2s ease;
}
.sidebar-links li a:hover {
color: #161a2d;
background: #fff;
border-radius: 4px;
}
.user-account {
margin-top: auto;
padding: 12px 10px;
margin-left: -10px;
}
.user-profile {
display: flex;
align-items: center;
color: #161a2d;
}
.user-profile img {
width: 42px;
border-radius: 50%;
border: 2px solid #fff;
}
.user-profile h3 {
font-size: 1rem;
font-weight: 600;
}
.user-profile span {
font-size: 0.775rem;
font-weight: 600;
}
.user-detail {
margin-left: 23px;
white-space: nowrap;
}
.sidebar:hover .user-account {
background: #fff;
border-radius: 4px;
}
就这样！如果你正确添加了代码，就可以查看侧边栏了。index.html用你喜欢的浏览器打开文件，查看侧边栏的实际效果。
结论和最后的话
对于 Web 开发初学者来说，使用 HTML 和 CSS 创建侧边栏是一项很容易完成的任务。按照本博文提供的步骤和代码，您已经成功创建了侧边栏。这个项目帮助您掌握了 HTML 结构和 CSS 样式的基本知识，让您对侧边栏的结构和设计方式有了基本的了解。
为了进一步提升你的网页开发技能，尤其是侧边栏的使用技巧，不妨参考本网站上展示的其他一些精美的侧边栏。许多侧边栏都利用 JavaScript 实现了诸如暗黑模式、下拉菜单等高级功能。
如果您在创建侧边栏时遇到任何问题，可以点击“下载”按钮免费下载此项目的源代码文件。您也可以点击“查看实时演示”按钮查看实时演示。
如果您发现我的内容有帮助，请考虑给我买一杯咖啡来支持我创作更多内容。
