Vertical Navigation Scroll Effect Using Css and JavaScript

Vertical Navigation Scroll Effect Using Css and JavaScript

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 byprocoding13
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNO
ResponsiveYES
 100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)

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 CSSOutput
Vertical Navigation Scroll Effect Using Css and 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;
}
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
Vertical Navigation Scroll Effect | Vertical Navigation Html Css Javascript
 

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>
Now our jQuery Code is ready for showing Vertical Navigation Scroll Effect so add this code in the javascript file.
$(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/AnkiCode 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!



Leave a Reply