<!-- Start Nav Section --> <nav id="navbar" class="navbar"> <ul class="nav-menu"> <li> <a data-scroll="home" href="#home" class="dot active"> <span>Home</span> </a> </li> <li> <a data-scroll="one" href="#one" class="dot"> <span>one</span> </a> </li> <li> <a data-scroll="two" href="#two" class="dot"> <span>two</span> </a> </li> <li> <a data-scroll="three" href="#three" class="dot"> <span>Three</span> </a> </li> <li> <a data-scroll="four" href="#four" class="dot"> <span>Four</span> </a> </li> </ul> </nav> <!-- End Nav Section --> <section id="home"></section> <section id="one"></section> <section id="two"></section> <section id="three"></section> <section id="four"></section>
* { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Start Section Styles */ section { width: 100%; min-height: 800px; } #home { background-color: green; } #one { background-color: blue; } #two { background-color: yellow; } #three { background-color: salmon; } #four { background-color: purple; } /* End Section Styles */ /* Start Nav Styles */ .navbar { position: fixed; z-index: 999; top: 50%; right: 50px; transform: translateY(-50%); } .navbar .nav-menu { margin: 0; padding: 0; list-style-type: none; } .navbar .nav-menu li { position: relative; min-width: 200px; text-align: right; } .navbar .nav-menu li .dot { display: block; color: #fff; padding: 5px 0; } .navbar .nav-menu li .dot::before, .navbar .nav-menu li .dot::after { display: block; position: absolute; content: ''; border-radius: 50%; top: 50%; transition: all .3s ease; } .navbar .nav-menu li .dot::before { width: 5px; height: 5px; right: 0; border: 2px solid #181818; transform: translateY(-50%); } .navbar .nav-menu li .dot::after { width: 15px; height: 15px; border: 2px solid #f44336; right: -5px; transform: translateY(-50%) scale(0); } .navbar .nav-menu li .dot.active::before, .navbar .nav-menu li:hover .dot::before { background: #f44336; border-color: #f44336; } .navbar .nav-menu li .dot.active::after, .navbar .nav-menu li:hover .dot::after { transform: translateY(-50%) scale(1); } .navbar .nav-menu li .dot span { display: inline-block; opacity: 0; font-weight: 700; letter-spacing: .5px; text-transform: capitalize; background-color: #f44336; padding: 10px 20px; border-radius: 3px; margin-right: 30px; transform: translateX(20px); transition: all .3s ease; } .navbar .nav-menu li .dot span::before { display: block; position: absolute; content: ''; border-left: 7px solid #f44336; border-top: 7px solid transparent; border-bottom: 7px solid transparent; top: 50%; transform: translate(7px, -50%); right: 0; transition: all .3s ease; } .navbar .nav-menu li .dot.active span, .navbar .nav-menu li:hover .dot span { transform: translateX(0px); opacity: 1; } /* End Nav Styles */