• Post category:HTML

How to Create a Sidebar in HTML | Step by Step Guide

How to Create a Sidebar in HTML

In this article, we will see how to create a sidebar in HTML. You can create a fixed or hidden sidebar using HTML and CSS.

Step-by-Step Guide to Sidebar

Code:

<html>
<head>
<title>Sidebar </title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
text-decoration: none;
}
body{
box-sizing: border-box;
}
.sidebar{
position: fixed;
background: silver;
width: 200px;
height: 100%;
top: 0;
left: 0;
z-index: 1; }

.sidebar h1{
text-align: center;
font-size: 20px;
text-transform: uppercase;
padding: 15px;
background: grey;
}

.sidebar ul li{
margin: 25px 0;
}

.sidebar ul li a{
color: black;
padding: 0 30px;
}

.content{
margin-left: 210px ;
}
</style>
<body>
<div class="sidebar">
<h1>Main Menu</h1>
<ul class="nav">
<li><a href="#">
<i class="fas fa-server"></i>
<span>Dashboard</span>
</a></li>
<li><a href="#">
<i class="fas fa-concierge-bell"></i>
<span>Section</span>
</a></li>
<li><a href="#">
<i class="fas fa-calendar-alt"></i>
<span>Event</span>
</a></li>
<li><a href="#">
<i class="fas fa-question-circle"></i>
<span>Setting</span>
</a></li>
<li><a href="#">
<i class="fas fa-server"></i>
<span>About</span>
</a></li>

</ul>
</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br><br>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>

Output:

READ ALSO  2 Easy Ways to Wrap Table Cell Content Using HTML

how to create a sidebar in html

Steps:

  1. Here, we have linked the font-awesome icon in the <head> section.
  2. Then we created a <div> with classname “sidebar” in the <body> section.
  3. The h1 tag in the div is written as “main menu”.
  4. Then we create an unordered list using <ul> tag with classname “nav”.
  5. Inside the <ul> tag, we create a list of five using the <li> tag.
  6. Then, Inside the <li> tag, we create a separate anchor tag by linking some links using <a> tag. And we create <span> tag, within that we have given some names like “Dashboard, section, event, setting, and about“.
  7. Inside the <li>, we add some icon links using font-awesome.
  8. In CSS style, we select the class “sidebar” using the dot operator and then set the Position to fixed, width to 300px, and height to 100%.
  9. Try the above code to see if you get the correct above output.

Leave a Reply