Free Coding Ebook 👉 Get Now
Vertical Navigation Scroll Effect Using Css and JavaScript
.png "Vertical Navigation Scroll Effect | Vertical Navigation Html Css Javascript")
Live Preview Of Vertical Navigation Scroll Effect
| Code by | procoding13 |
| Project Download | Link Available Below |
| Language used | HTML and CSS |
| External link / Dependencies | NO |
| Responsive | YES |
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 class="about"><a href="http://janetmndz.com" target="_blank">♡</a></div>
</div>
There is all the html code for the Vertical Navigation Scroll Effect. you can add baisc Html boilerplate code yourself and paste this code in between <body> </body> tags. this is only html code output.
Restaurant Website Using HTML and CSS
Output
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;
}
Now we completed our Styling of the Vertical Navigation Scroll Effect, now we have added the javascript code for the main functionality of the Scroll Effect.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
HTML + CSS Update Output
Javascript (jquery) Code
Note:– we use jQuery Code in Vertical Navigation Scroll Effect so we must add the CDN link of jQuery in your html Code you just paste this in your html code before the ending of </body> tag.<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);
}
});
Let’s see the final output of the Vertical Navigation Scroll Effect Using Css and JavaScript
I hope 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!
Written by – Code With Random/Anki
Code by – Janet Mendez
Which code editor do you use for this Indian Flag coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
No!
