How to design a modern sidebar menu using HTML and CSS?
When you think about the layout of a typical website, you will most likely include a list of important links (for navigation links to various sections of the page) to the right or left of the main content area. ).
This component is called a "sidebar" and is usually used as a menu on a web page. Although it is widely used, developers often add this element to websites for navigation between pages or even to different parts of a web page.
Let’s understand this feature and try to create a modern sidebar using only HTML and CSS.
What is the sidebar menu?
A sidebar is a static column located to the right or left of the main content area. This component contains navigation links, widgets or other necessary links within the website (for home page, content or other parts).
An example is given below to demonstrate how to create a simple sidebar menu. The menu is located to the left of the main content area (the same layout as most websites).
Example
In this example, we use CSS grid to divide the web page into two parts. 15% of a webpage makes up the sidebar menu and 85% makes up the main content.
CSSGrid
By setting display: grid, it enables developers to convert any element into a grid container. To add columns we use,
grid-template-columns: value value;
value represents the width of the column. It can be expressed in length (px, cm, em) or as a percentage.
Tag (anchor element)
It is used to link external pages within a web page. It can also be used to link sections within a document. The id attribute uniquely defines the element.
<a href= "#"> </a>
The href attribute contains the URL of an external page or the ID of an internal part of the document.
<!DOCTYPE html>
<html>
<head>
<title> Sidebar menu </title>
<style>
#main-doc {
display: grid;
grid-template-columns: 15% 85%;
grid-template-rows: auto;
grid-template-areas: "advert content";
}
.item1 {
padding: 10px;
}
#head {
font-family: serif !important;
color: #8b0000 !important;
font-weight: 900;
margin: 5px;
padding: 0 5px 5px;
}
.main-section {
font-family: Brush Script MT;
font-size: 20px;
color: #000080;
}
.item2 {
background: linear-gradient(-35deg, #fff000, #ffb6c1, #afeeee);
padding: 6px 8px 6px 16px;
margin: 0
}
.contents {
font-size: 26px !important;
color: grey;
}
.item1 a {
border-radius: 5px;
padding: 6px 16px 6px 16px;
display: block;
}
a:hover {
color: red;
transform: scale(1.1);
}
</style>
</head>
<body>
<main id="main-doc">
<div class="item1">
<nav id="navbar">
<header class="contents">
<strong> Contents </strong>
</header>
<br>
<a href="https://www.php.cn/link/115c51eb37365df2d4f4e2482b964822" class="nav-link"> Background </a>
<br>
<hr>
<a href="#romance" class="nav-link"> Romance </a>
<br>
<hr>
<a href="#relations" class="nav-link"> Relations </a>
<br>
<hr>
<a href="#voice_actors" class="nav-link"> Voice Actors </a>
<br>
<hr>
<a href="#costumes" class="nav-link"> Costumes </a>
<br>
<hr>
<a href="#gallery" class="nav-link"> Gallery </a>
<br>
<hr>
</nav>
</div>
<div class="item2">
<header id="head">
<h1 id="Animation-Character"> Animation Character </h1>
</header>
<section class="main-section" id="background">
<header>
<h1 id="Background"> Background </h1>
</header>
<hr>
<p> This is placeholder text. This paragraph contains information about the background of the character. </p>
</section>
<section class="main-section" id="romance">
<header>
<h1> Romance <h1>
<hr>
</header>
<p> This paragraph contains text related to the life of the character. </p>
</section>
<section class="main-section" id="relations">
<header>
<h1 id="Relations"> Relations </h1>
</header>
<hr>
<ul>
<li> Mother <br>
<p> Text about character's mother </p>
<li> Father <br>
<p> Information about the father. </p>
<li> Sister <br>
<p> Text about character's sister </p>
<li> Friend <br>
<p> Text about friend </p>
</ul>
</section>
<section class="main-section" id="voice_actors">
<header>
<h1> Voice actors
<hr>
</h1>
</header>
<p> This contains information about voice actors in the animation </p>
</section>
<section class="main-section" id="costumes">
<header>
<h1> Costumes
<hr>
</h1>
</header>
<br>
<br>
</section>
</body>
</html>
Example
Here we will create a toggleable sidebar. In this example, we create a sidebar and position it to the left of the content area. We have a button in the content area that when clicked collapses the sidebar we created.
We used CSS transition properties to smoothly change the position of the sidebar. When the button is clicked, the position of the sidebar changes from 0 to -160px (equal to the width of the sidebar). In other words, the sidebar moves left by its width.
<!DOCTYPE html>
<html>
<head>
<title> Toggle Sidebar </title>
<style>
body {
margin: 0;
}
.container {
display: flex;
min-height: 90px;
}
.sidebar {
position: relative;
left: 0;
margin-right: 20px;
width: 160px;
background-color: #ccc;
transition: all 0.20s;
}
.sidebar.collapsed {
left: -160px;
margin-right: -150px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar" id="sidebar">
<strong> Sidebar menu </strong>
<ul>
<a href="#" class="nav-link">
<li> Link 1 </li>
</a>
<a href="#" class="nav-link">
<li> Link 2 </li>
</a>
<a href="#" class="nav-link">
<li> Link 3 </li>
</a>
<a href="#" class="nav-link">
<li> Link 4 </li>
</a>
</ul>
</div>
<div class="content">
<h2 id="This-is-an-example-This-contains-the-main-content-area"> This is an example. This contains the main content area. </h2>
<br> Click the button below to toggle the sidebar <br>
<br>
<button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')"> toggle Sidebar </button>
</div>
</div>
</body>
</html>
in conclusion
In this article, we discussed two types of sidebar menus in web pages. One of them is the basic sidebar and the other is the toggle sidebar. They are all designed using only HTML and CSS.
The above is the detailed content of How to design a modern sidebar menu using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1390
52
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
React's Role in HTML: Enhancing User Experience
Apr 09, 2025 am 12:11 AM
React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
