Free Coding Ebook 👉 Get Now
Vertical Navigation Scroll Effect Using Css and JavaScript
Welcome to the Codewithrandom blog. In this today blog, We learn how to create a Vertical Navigation Scroll Effect Using Css and JavaScript. In the Vertical Navigation menu if you click on the menu links its have a scroll effect when changing section on the website. I hope you enjoy our blog so let’s start with a basic html structure for the Vertical Navigation.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)
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!