Side Navigation Menu Bar in HTML CSS & JavaScript

<!
DOCTYPE html>

<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Side Menu Bar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#feedback">Feedback</a></li>
<li><a class="contact" href="#contact">Contact</a></li>
</ul>
<section>
<i class="fas fa-bars"></i>
<div class="sec1"></div>
<h2 id="about">
About Section
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Voluptatem eveniet asperiores error tempora ea nobis ut quos fugiat
commodi doloribus aut dolore quibusdam fuga, excepturi modi ipsa rerum
nisi qui repellat, facilis hic impedit praesentium? Doloremque autem hic
blanditiis, tempora? Magni reiciendis fugit consequatur nam, voluptate
laudantium voluptatum veritatis aut libero, cumque non quo possimus
officiis a! Qui tempora tenetur, fuga quos at provident nihil nobis illum
quibusdam. Nemo odit error nostrum, aliquid et quas in optio nesciunt
tempore minus saepe architecto recusandae ipsam. Explicabo et rerum, iure
odio! Amet ad sunt beatae vero corporis dicta sint provident laborum
tenetur?
</p>
<h2 id="portfolio">
Portfolio Section
</h2>
<p>

tenetur?
</p>
<h2 id="gallery">
Gallery Section
</h2>
<p>

tenetur?
</p>
<h2 id="services">
Services Section
</h2>
<p>

tenetur?
</p>
<h2 id="feedback">
Feedback Section
</h2>
<p>

tenetur?
</p>
<h2 id="contact">
Contact Section
</h2>
<p>

tenetur?
</p>
</section>
<script>
$(document).ready(function(){
$('i').click(function(){
$('ul').toggleClass('ul_show');
$('section').toggleClass('slide_image');
});
$('li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
});
</script>
</body>
</html>
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
html{
scroll-behavior: smooth;
body{
font-family: montserrat;
ul{
position: fixed;
top: 0;
left: 0;
margin-left: -240px;
width: 240px;
background: #1e1e1e;
height: 100vh;
overflow-y: auto;
transition: all .3s;
ul li{
height: 65px;
outline: none;
ul li a{
display: block;
height: 100%;
width: 100%;
line-height: 70px;
font-size: 20px;
color: white;
padding-left: 10%;
background: #1e1e1e;
border-top: 1px solid rgba(255,255,255,.1);
border-bottom: 1px solid black;
border-left: 5px solid transparent;
li a.contact{
border-bottom: 1px solid rgba(0,0,0,.5);

}
.active a{
color: #B93632;
border-left: 5px solid #B93632;
background: #1B1B1B;
section{
margin-left: 0px;
transition: all .3s;
i{
position: fixed;
margin: 20px 25px;
font-size: 40px;
color: orangered;
cursor: pointer;
.sec1{
margin-left: -20px;
background: url(home.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
.sec2{
margin-left: -20px;
background: url(about.jpg) no-repeat;
height: 100vh;
.sec3{
margin-left: -20px;
background: url(portfolio.jpg) no-repeat;
height: 100vh;
.sec4{
margin-left: -20px;
background: url(gallery.jpg) no-repeat;
height: 100vh;
.sec5{
margin-left: -20px;
background: url(services.jpg) no-repeat;

height: 100vh;
.sec6{
margin-left: -20px;
background: url(feedback.jpg) no-repeat;
height: 100vh;
.sec7{
margin-left: -20px;
background: url(contact.jpg) no-repeat;
height: 100vh;
h2{
font-size: 40px;
padding: 15px 20px;
p{
padding: 0 20px 10px 20px;
text-align: justify;
}
.ul_show{
margin-left: 0px;
.slide_image{
margin-left: 260px;

Side Navigation Menu Bar in HTML CSS &amp; JavaScript

Uploaded by

Copyright:

Available Formats

You might also like

Side Navigation Menu Bar in HTML CSS &amp; JavaScript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Side Navigation Menu Bar in HTML CSS &amp; JavaScript

Uploaded by

Copyright:

Available Formats

<!

<html lang="en" dir="ltr">

<title>Side Menu Bar</title>

<link rel="stylesheet" href="style.css">

<li class="active"><a href="#">Home</a></li>

<li><a class="contact" href="#contact">Contact</a></li>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

transition: all .3s;

border-top: 1px solid rgba(255,255,255,.1);

border-bottom: 1px solid black;

border-left: 5px solid transparent;

border-bottom: 1px solid rgba(0,0,0,.5);

border-left: 5px solid #B93632;

transition: all .3s;

margin: 20px 25px;

background: url(home.jpg) no-repeat;

background: url(about.jpg) no-repeat;

background: url(portfolio.jpg) no-repeat;

background: url(gallery.jpg) no-repeat;

background: url(services.jpg) no-repeat;

background: url(feedback.jpg) no-repeat;

background: url(contact.jpg) no-repeat;

padding: 15px 20px;

padding: 0 20px 10px 20px;

You might also like

Side Navigation Menu Bar in HTML CSS & JavaScript

Side Navigation Menu Bar in HTML CSS & JavaScript

Side Navigation Menu Bar in HTML CSS & JavaScript