Embedded Files
TITLE : How to Create Fixed Side Navbar Using HTML ans CSS | Animated Navbar
HTML :
<html>
<head>
<title>Hover Side Navbar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum facilisis tincidunt quam, quis eleifend ex finibus et. Praesent congue iaculis erat vel pellentesque. Nulla condimentum elementum urna, eget maximus elit faucibus a. Cras nec ex ac ipsum pharetra imperdiet. Cras auctor neque et malesuada porttitor. Phasellus bibendum iaculis lectus, vitae elementum dolor interdum eget. Nullam quis orci ac leo congue rutrum. Sed rhoncus risus et felis rutrum dignissim. Cras molestie eros facilisis velit dapibus eleifend. Proin eu fermentum lorem. Aliquam sed urna molestie, elementum lacus ac, condimentum sem. Duis lobortis magna eget nisl posuere gravida. Donec vestibulum ex id ligula faucibus, sit amet auctor dolor varius.
Nam nec sem ac nisi gravida ullamcorper. Fusce et lacinia dui. Nam elementum iaculis lectus eu pellentesque. Vestibulum sodales id lorem in sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada vulputate libero sit amet ultricies. Aliquam erat volutpat. Nullam tincidunt libero non neque imperdiet eleifend. Vestibulum mollis viverra dolor eu ornare.
Praesent dui dui, accumsan non lectus eu, cursus ultrices metus. Fusce in hendrerit leo. Donec malesuada dolor vel libero ultrices, vitae consequat mauris pulvinar. Suspendisse nec erat pellentesque urna lobortis vehicula ut ut nisl. Ut at augue dictum, auctor velit vitae, vehicula lectus. Nulla tempus ornare augue, nec ultrices tortor. Phasellus vel auctor sapien, et ultricies odio. Vestibulum libero est, lacinia ac tempus sed, sodales rhoncus ante. Aenean ultricies consequat mauris non efficitur. Donec sed vestibulum massa. Sed a gravida orci. Duis vitae odio iaculis, laoreet dui sed, dapibus ligula.
In hac habitasse platea dictumst. In semper nibh et ligula condimentum, faucibus facilisis urna rutrum. Maecenas accumsan est in dolor pulvinar, at placerat mauris consectetur. Duis felis lacus, dignissim vitae tellus sed, dictum placerat turpis. In hac habitasse platea dictumst. Cras quis ultrices nunc, sed pulvinar massa. Nulla dapibus eleifend erat pretium porta. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus gravida, nulla quis elementum accumsan, nunc lorem lobortis neque, a sagittis neque nisl sit amet sapien. Proin ultricies eros vitae erat vehicula, nec aliquam diam sagittis.
Cras fringilla enim ac accumsan interdum. Maecenas vulputate nunc non nulla venenatis feugiat. Donec vulputate dapibus eros, sed efficitur magna faucibus ut. Donec ut neque in odio tempor mattis. Maecenas egestas, lorem ac congue maximus, risus lectus volutpat diam, a euismod justo quam non felis. Donec viverra eu lectus et fermentum. Duis rutrum risus augue, ac ullamcorper elit dignissim id.
Integer tristique lectus ac posuere sollicitudin. Sed non dignissim turpis. Ut nibh ligula, feugiat et auctor in, malesuada non eros. Cras et tortor tellus. Mauris enim nunc, ornare id erat sit amet, tempor efficitur ligula. Quisque in tempor justo. Nullam efficitur elit magna, sit amet viverra arcu malesuada non. Aenean sollicitudin, urna vel rhoncus ornare, augue orci tempus metus, sed tempor ex diam maximus lectus. Donec commodo posuere quam non fringilla. Etiam gravida efficitur elementum. Nulla condimentum consectetur justo, elementum efficitur nisi ultrices luctus. Vivamus id mollis nunc.
Sed tincidunt sapien in orci sodales, ut laoreet leo accumsan. Praesent eget fermentum urna, quis luctus arcu. Curabitur id malesuada augue. Curabitur congue semper mauris, eleifend sollicitudin dolor fermentum vel. Proin eu tempus justo. Sed fermentum ante sed leo dapibus euismod. Sed ultrices nibh quis orci mollis, at pretium metus viverra. Vestibulum vestibulum nibh quis ligula congue maximus. Quisque auctor a massa ut scelerisque. Aliquam lobortis mi in bibendum fermentum. Vestibulum euismod, lectus ut condimentum mollis, nunc ligula facilisis neque, sed viverra lacus orci nec nibh.</p>
</div>
</body>
</html>
CSS :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width:100%;
background-color: #333;
display: flex;
font-family: Swis721 BT;
font-size: 1.2em;
}
.sidebar {
width:20%;
background-color: #1DE9B6;
height: 100vh;
position: fixed;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 15px 25px #000;
transition: 0.3s;
transform: translate(-95%,0);
}
.sidebar:hover {
transform: translate(0,0);
}
.sidebar ul {
text-align: center;
}
.sidebar li {
list-style-type: none;
padding: 12px 0;
}
.sidebar li a{
padding: 7px 25px;
border-radius: 3px;
text-decoration: none;
outline: none;
color:#333;
transition: 0.3s;
}
.sidebar li a:hover {
background-color: #fff;
}
.main {
width:100%;
}
.main p{
margin: 180px auto;
width: 80%;
color:#fff;
line-height: 1.6em;
text-align: justify;
}
Page updated
Google Sites
Report abuse