Vertical Navigation Scroll Effect Using Css and JavaScript
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>
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
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!