Vertical Navigation Scroll Effect | Vertical Navigation Html Css Javascript







Vertical Navigation Scroll Effect | Vertical Navigation Html Css Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Vertical Navigation. We use HTML, Css, and javascript for Vertical Navigation. I hope you enjoy our blog so let’s start with a basic HTML structure for the Vertical Navigation.

HTML Code

 <nav>  
<ul>
<li>
<a href="#section1">
<span class="rect"></span>
<span class="circle"></span>
ONE
</a>
</li>
<li>
<a href="#section2">
<span class="rect"></span>
<span class="circle"></span>
TWO
</a>
</li>
<li>
<a href="#section3">
<span class="rect"></span>
<span class="circle"></span>
THREE
</a>
</li>
<li>
<a href="#section4">
<span class="rect"></span>
<span class="circle"></span>
FOUR
</a>
</li>
<li>
<a href="#section5">
<span class="rect"></span>
<span class="circle"></span>
FIVE
</a>
</li>
</ul>
</nav>
<section id="section1" class="content-section">
<h1>SECTION ONE</h1>
</section>
<section id="section2" class="content-section">
<h1>SECTION TWO</h1>
</section>
<section id="section3" class="content-section">
<h1>SECTION THREE</h1>
</section>
<section id="section4" class="content-section">
<h1>SECTION FOUR</h1>
</section>
<section id="section5" class="content-section">
<h1>SECTION FIVE</h1>
</section>
</div>

There is all the HTML code for the Vertical Navigation Scroll Effect. Now, you can see an output with Vertical Navigation Scroll Effect then we write javascript for Vertical Navigation Scroll Effect.

output

Vertical Navigation Scroll Effect | Vertical Navigation Html Css Javascript

CSS code

 @import url(https://fonts.googleapis.com/css?family=Open+Sans);  
@import url(https://fonts.googleapis.com/css?family=Lato);
html{
height: 100%;
font-family: 'Open Sans', sans-serif;
background-color: #E9E8E2;
}
body{
height: 100%;
}
nav{
position: fixed;
top: 5%;
bottom: auto;
z-index: 10;
}
ul{
list-style: none;
padding: 0;
}
li{
padding: 10px 0;
}
span{
display: inline-block;
position:relative;
}
nav a{
display: inline-block;
color: #272727;
text-decoration: none;
font-size: 1em;
}
.circle{
height: 10px;
width: 10px;
left: -10px;
border-radius: 50%;
background-color: #272727;
}
.rect{
height: 3px;
width: 0px;
left: 0;
bottom: 4px;
background-color: #272727;
-webkit-transition: -webkit-transform 0.6s, width 1s;
-moz-transition: -webkit-transform 0.6s, width 1s;
transition: transform 0.6s, width 1s;
}
nav a:hover, nav .active-section{
color: #9b59b6;
}
nav a:hover span, nav .active-section span{
background-color: #9b59b6;
}
nav .active-section .rect{
width: 40px;
}
.content-section{
position: relative;
width: 80%;
height: 90%;
left: 50%;
background-color: #ecf1f1;
text-align: center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.content-section h1{
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
color:#9b59b6;
font-size: 3em;
}
/*CREDITS*/
.about{
position: fixed;
bottom:0;
left: 1%;
}
.about a{
text-decoration: none;
font-size: 1.5em;
}
.about a:visited, .about a:active, .about a:link{
color:#000;
}
.about a:hover{
color: red;
}

Css Updated output


Vertical Navigation Scroll Effect | Vertical Navigation Html Css Javascript

Javascript (jquery) code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 $(document).ready(function(){  
var contentSection = $('.content-section');
var navigation = $('nav');
//when a nav link is clicked, smooth scroll to the section
navigation.on('click', 'a', function(event){
event.preventDefault(); //prevents previous event
smoothScroll($(this.hash));
});
//update navigation on scroll...
$(window).on('scroll', function(){
updateNavigation();
})
//...and when the page starts
updateNavigation();
/////FUNCTIONS
function updateNavigation(){
contentSection.each(function(){
var sectionName = $(this).attr('id');
var navigationMatch = $('nav a[href="#' + sectionName + '"]');
if( ($(this).offset().top - $(window).height()/2 < $(window).scrollTop()) &&
($(this).offset().top + $(this).height() - $(window).height()/2 > $(window).scrollTop()))
{
navigationMatch.addClass('active-section');
}
else {
navigationMatch.removeClass('active-section');
}
});
}
function smoothScroll(target){
$('body,html').animate({
scrollTop: target.offset().top
}, 800);
}
});

Final output


Vertical Navigation Scroll Effect | Vertical Navigation Html Css Javascript

Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Vertical Navigation. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Vertical Navigation using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code by – Janet Mendez

Share on:

Leave a Comment