How we can create a navbar or navigation bar which can be customized by the user? Solution: See this Customizable Scrolling Navbar Using jQuery and CSS, Modify Navbar Style.
Previously I have shared some navbar programs, but this is a customizable navbar. Basically, a navbar always placed on top and contains some important links to helps users to navigate. It is also known as Navigation Bar generally, we place links like home, about, contact, etc link in this section. There are many types of the navbar, you can check our navbar page many types of nav I have shared previously. Some are fixed, some are rounded, some have an underline highlight for the active item, etc. This program is a combination of most of the styles generally peoples use for the navbar, here users can customize the nav style by choosing the options.
Today you will learn to create a program to Modify Navbar Style. Basically, there is scrolling navbar which contains navigation links and text section. When you will choose a link for navigation then the page will scroll to that items dedicated section. But the main specialty of this program is, users can customize the style. Below the navbar, there are some options for changing values and styles. When you will choose an option then the style will implement to the navbar, and there is an option for clear all filters it will change the style to default as first.
So, today I am sharing Customizable Scrolling Navbar Using jQuery and CSS. There I have used HTML to create the layout and scroll targeting, CSS for styling, and jQuery for functioning. You can use this program on your website, it will help users to choose the nav style. And if you have a website builder that provides website creation service then this program will help the developer to modify their website’s navigation bar.
If you are thinking now how this navbar program actually is, then see the preview given below.
Preview Of Modify Navbar Style
See this video preview to getting an idea of how this customizable navbar looks like.
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- jQuery WYSIWYG Editor
- JavaScript Typing Suggestions
- Image Upload and Preview
- Scrolling Submenu Items
Customizable Scrolling Navbar Using jQuery and CSS Source Code
Before sharing source code, let’s talk about it. First I have created the navbar section using HTML <nav> tag, then I have created the buttons for changing values using <button> tag. After that, I have created the text sections with linking the navigation items, which helps to scroll on click. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN link.
Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc to the elements. There I have used CSS variables ( --var ) to store and pass data. There I have used transition command to create an animation effect. And placed values to button’s class which will active on click.
jQuery handling here the options on/off feature in this program. There fetched items using document.querySelectorAll command and some other commands. It also handles the smooth scroll feature. There used .toggleClass command to on-off features on click. jQuery simply adding and removing CSS class on action.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Customizable Scroll Navigation | Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="version" class="version"> <nav class="nav-sections"> <ul class="menu"> <li class="menu-item"><a class="menu-item-link active" href="#about">About</a></li> <li class="menu-item"><a class="menu-item-link" href="#services">Services</a></li> <li class="menu-item"><a class="menu-item-link" href="#Pricing">Pricing</a></li> <li class="menu-item"><a class="menu-item-link" href="#News">News</a></li> <li class="menu-item"><a class="menu-item-link" href="#contact">Contact</a></li> <div class="active-line"></div> </ul> </nav> <main id="main-content" class="page-sections"> <section class="page-section"> <div class="buttons"> <button class="btn standard on">Clear all</button> <button class="btn micro">Micro</button> <button class="btn floating">Floating</button> <button class="btn bordered">Bordered</button> <button class="btn shadows">Shadows</button> <button class="btn rounded">Rounded</button> <button class="btn highlight-bar">Highlight bar</button> </div> <h2 class="section-title" id="about">About</h2> <p>As you scroll through each section, the horizontal navigation will update its active state to the correlating anchor link. The menu overflows horizontally and allows the user to scroll left and right. If an anchor link is outside of the viewport, the menu will automatically scroll the active item into view.</p> <p>And now... placeholder text: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur corporis, placeat eaque iure ex possimus ab exercitationem atque sed culpa eos vel, ipsa porro corrupti omnis tempore, fuga quos explicabo.</p> <p>Velit eos maxime veritatis sunt provident accusantium vitae, aperiam consectetur, laboriosam consequatur beatae quam recusandae, corporis iste laudantium illo praesentium amet ratione aliquid modi. Officia similique incidunt magni doloremque aperiam!</p> <p>Cupiditate odio exercitationem dolorem explicabo numquam natus, cum a omnis incidunt ipsam quibusdam eligendi odit consectetur? Laboriosam magni labore, nobis, facilis aliquid delectus ad molestiae quo iusto a, consectetur molestias?</p> <p>Minus ratione quae, quibusdam ab atque obcaecati. Necessitatibus perferendis quibusdam, placeat ipsa expedita recusandae culpa labore? Aut quaerat animi culpa minima illo, odio tempore corporis, quidem nisi eius iure fugit! Id, earum reprehenderit. Placeat voluptate aut, provident aspernatur consequuntur praesentium ullam, magni deserunt repellendus dicta eos odio modi aliquid quasi tempora saepe adipisci itaque? Unde distinctio aut perferendis delectus quam?</p> <h3>Lorem ipsum dolor</h3> <ul> <li>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, quasi temporibus laborum quidem praesentium et vero incidunt itaque. Hic, aliquid odio non atque exercitationem ipsa? A repudiandae dolores blanditiis voluptatem.</li> <li>Dolore dolorem velit impedit libero non. Deserunt optio rerum earum quas recusandae. Praesentium, voluptates ipsa temporibus. Nisi, qui autem. Aliquid?</li> <li>Ea facilis corporis enim tempora tenetur consectetur quam asperiores, porro reprehenderit expedita! Esse laboriosam suscipit illo. Quasi numquam tempora aperiam corrupti alias? Amet provident esse tenetur eveniet voluptatum modi iure.</li> <li>Provident labore iusto, voluptatibus incidunt cumque cum quisquam, asperiores accusamus velit repellat mollitia facilis. Sit, voluptas tempore. Placeat quas, corporis enim ratione accusamus repellendus quos repellat quo voluptatum, eos rerum.</li> </ul> </section> <section class="page-section"> <h2 class="section-title" id="services">services</h2> <ul> <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut delectus, fuga tempore, recusandae vel ut aliquam reprehenderit dolorum odio ratione unde accusantium dolore, modi mollitia sapiente ipsa autem quibusdam. Qui?</li> <li>Iste facilis perspiciatis veritatis minima totam modi autem quaerat natus ullam at, qui similique asperiores laboriosam, voluptas quos blanditiis tempora illum et. Ea commodi facere tempora, officiis minus in odio.</li> <li>Ratione molestias, temporibus perferendis aspernatur voluptatem optio, necessitatibus distinctio cum doloremque, deserunt cumque deleniti a quos beatae magni in ab. Ipsa libero ullam minima repellat sit molestiae, maxime accusamus dicta?</li> <li>Ipsa dolor eveniet explicabo.</li> <li>Molestiae nobis quasi unde rerum cum laboriosam voluptatum id dolores autem fugiat aliquam, vitae error iure. Totam nesciunt earum dolorum facilis doloremque fuga asperiores fugiat, dicta nostrum, debitis harum veritatis.</li> </ul> </section> <section class="page-section"> <h2 class="section-title" id="Pricing">Pricing</h2> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea voluptatem perferendis quaerat neque voluptatibus vel unde, nostrum saepe voluptate voluptates iure veniam. Soluta possimus deserunt earum, itaque porro quam praesentium.</p> <p>Vel itaque quae nostrum, blanditiis doloribus mollitia delectus unde rerum ab dignissimos voluptatum repellendus odit sint necessitatibus totam possimus cum voluptatem ipsa ex corrupti sit veritatis libero expedita laboriosam? Quas?</p> <p>Illum repellendus modi at, nostrum harum iste. Natus animi corporis corrupti suscipit dicta magni distinctio a exercitationem ut. Saepe cum sequi asperiores? Quos, nemo corporis animi porro odit iure? Itaque?</p> <p>Nesciunt in quibusdam, esse tempore sequi earum illum exercitationem praesentium reprehenderit aliquam asperiores sint impedit dolor? Sapiente, asperiores atque ipsam voluptatem molestiae repudiandae. In, optio! Quidem rem rerum perferendis pariatur.</p> <p>Ipsam asperiores voluptas porro commodi? Consequuntur magni ipsum facere officiis fugit nesciunt itaque officia accusamus, cum tempore sed velit vero praesentium quod, hic blanditiis ducimus quis. Aperiam, sed! Deleniti, dolorum.</p> </section> <section class="page-section"> <h2 class="section-title" id="News">News</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p> <p>Atque iste repellendus accusantium vitae nam eaque dolorem consequuntur laborum impedit ex nesciunt quod, aliquid pariatur nihil dolor deserunt animi ad earum voluptatibus ullam fugit id? Ex, nihil dolorum. Corporis? Maxime nemo amet iste itaque obcaecati dolor non ea, quae hic ducimus saepe, fugiat vitae voluptatem veniam reprehenderit minima sint! Atque dolor, mollitia doloremque id reiciendis debitis vel aspernatur facilis?</p> <p>Itaque blanditiis soluta magni obcaecati maxime iure similique esse quibusdam fuga inventore. Sapiente pariatur quas delectus rerum, repellendus fugit possimus eligendi vel sit ipsum saepe nihil, accusamus obcaecati vitae atque!</p> <p>Quibusdam accusamus, architecto obcaecati amet quasi fuga soluta quaerat tenetur. Omnis harum eos cum sed officiis rerum dignissimos nemo. Laboriosam illum vero pariatur ea consequuntur, autem cupiditate rerum eaque iste!</p> </section> <section class="page-section"> <h2 class="section-title" id="contact">Contact</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit provident necessitatibus laudantium, illo blanditiis inventore minima ipsam distinctio incidunt odio, itaque officiis vel facere unde. Ratione ex doloribus minus eius.</p> <p>Quibusdam accusamus, architecto obcaecati amet quasi fuga soluta quaerat tenetur. Omnis harum eos cum sed officiis rerum dignissimos nemo. Laboriosam illum vero pariatur ea consequuntur, autem cupiditate rerum eaque iste!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit provident necessitatibus laudantium, illo blanditiis inventore minima ipsam distinctio incidunt odio, itaque officiis vel facere unde. Ratione ex doloribus minus eius.</p> <p>Quibusdam accusamus, architecto obcaecati amet quasi fuga soluta quaerat tenetur. Omnis harum eos cum sed officiis rerum dignissimos nemo. Laboriosam illum vero pariatur ea consequuntur, autem cupiditate rerum eaque iste!</p> </section> </main> <footer class="placeholder-section"> <p>Footer section</p> </footer> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ :root { --space: 1rem; --border: 4px; --page-width: 80ch; --font-family: 'Airbnb Cereal', sans-serif; --color-link: #212121; --color-active: #00e676; --ease: cubic-bezier(0.23, 1, 0.32, 1); --duration: 350ms; --section-offset: 0; } * { box-sizing: border-box; } html { --scroll-behavior: smooth; scroll-behavior: var(--scroll-behavior); } @media (prefers-reduced-motion: reduce) { html { --scroll-behavior: auto; } } body { font-family: var(--font-family); line-height: 1.5; } h1, h2, h3 { font-weight: bold; line-height: 1.25; } h1 { font-size: 2.75rem; } h2 { font-size: 2.25rem; } h3 { font-size: 1.5rem; } ul:not(.menu) { list-style-type: disc; margin-left: var(--space); } ul:not(.menu) > li + li { margin-top: var(--space); } .nav-sections { position: -webkit-sticky; position: sticky; top: 0; width: 100%; background-color: white; box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12); z-index: 100; } .nav-sections .menu { position: relative; display: -webkit-box; display: flex; flex-wrap: nowrap; overflow: scroll; -ms-scroll-chaining: none; overscroll-behavior: none; scrollbar-width: none; -ms-overflow-style: none; margin: 0 auto; max-width: var(--page-width); -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition: -webkit-transform var(--ease) var(--duration); transition: -webkit-transform var(--ease) var(--duration); transition: transform var(--ease) var(--duration); transition: transform var(--ease) var(--duration), -webkit-transform var(--ease) var(--duration); } .nav-sections .menu::-webkit-scrollbar { display: none; } .nav-sections .menu-item-link { display: block; padding: 12px 16px; font-size: 15px; text-decoration: none; white-space: nowrap; color: var(--color-link); -webkit-transition: color var(--ease) var(--duration); transition: color var(--ease) var(--duration); } .nav-sections .menu-item-link.active { color: var(--color-active); } .menu-item:first-of-type .menu-item-link { margin-left: 0; } .active-line { position: absolute; bottom: 10%; left: 0; height: 80%; border-radius: 4px; background-color: var(--color-active); opacity: 10%; -webkit-transition: width var(--ease) var(--duration), -webkit-transform var(--ease) var(--duration); transition: width var(--ease) var(--duration), -webkit-transform var(--ease) var(--duration); transition: width var(--ease) var(--duration), transform var(--ease) var(--duration); transition: width var(--ease) var(--duration), transform var(--ease) var(--duration), -webkit-transform var(--ease) var(--duration); } .placeholder-section { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; text-align: center; height: 50vh; background-color: #212121; color: white; } .page-sections { margin: 0 auto; max-width: var(--page-width); } .page-section { margin: calc(var(--space) * 2) 0; } .page-section > * + * { margin-top: calc(var(--space) * 1.5); } .section-title { outline: none; } .section-title:before { content: ""; display: block; visibility: hidden; pointer-events: none; margin-top: calc(var(--section-offset) * -1px); height: calc(var(--section-offset) * 1px); } .buttons { padding: var(--space) 0 calc(var(--space) * 2) 0; } .btn { font: var(--font-family); font-size: 12px; margin-right: 4px; background: transparent; border: 1px solid black; border-radius: 100px; padding: 8px 12px; } .btn:focus { outline: 0; } .btn:active { background: #efefef; } .btn.on { background: #212121; color: white; } .micro .menu-item-link { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .micro .menu-item:first-of-type .menu-item-link { margin-left: 0; } .floating nav { margin: 12px auto; max-width: 81ch; border-radius: 4px; top: 12px; } .bordered .nav-sections { box-shadow: none; border: 1px solid #EBEBEB; } .shadows .nav-sections { box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.12); } .rounded .active-line { border-radius: 100px; } .rounded nav { border-radius: 100px; } .highlight-bar.floating .nav-sections { max-width: 88ch; } .highlight-bar .menu-item-link { padding: 12px 0; margin: 0 12px; } .highlight-bar .active-line { bottom: 0; height: 2px; opacity: 1; border-radius: 4px; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
// Code By Webdevtrick ( https://webdevtrick.com ) const sectionsContainer = document.querySelector('.page-sections'); const sections = document.querySelectorAll('.page-section'); const nav = document.querySelector('.nav-sections'); const menu = nav.querySelector('.menu'); const links = nav.querySelectorAll('.menu-item-link'); const activeLine = nav.querySelector('.active-line'); const sectionOffset = nav.offsetHeight + 24; const activeClass = 'active'; let activeIndex = 0; let isScrolling = true; let userScroll = true; const setActiveClass = () => { links[activeIndex].classList.add(activeClass); }; const removeActiveClass = () => { links[activeIndex].classList.remove(activeClass); }; const moveActiveLine = () => { const link = links[activeIndex]; const linkX = link.getBoundingClientRect().x; const menuX = menu.getBoundingClientRect().x; activeLine.style.transform = `translateX(${(menu.scrollLeft - menuX) + linkX}px)`; activeLine.style.width = `${link.offsetWidth}px`; } const setMenuLeftPosition = position => { menu.scrollTo({ left: position, behavior: 'smooth', }); }; const checkMenuOverflow = () => { const activeLink = links[activeIndex].getBoundingClientRect(); const offset = 30; if (Math.floor(activeLink.right) > window.innerWidth) { setMenuLeftPosition(menu.scrollLeft + activeLink.right - window.innerWidth + offset); } else if (activeLink.left < 0) { setMenuLeftPosition(menu.scrollLeft + activeLink.left - offset) } } const handleActiveLinkUpdate = current => { removeActiveClass(); activeIndex = current; checkMenuOverflow(); setActiveClass(); moveActiveLine(); }; const init = () => { moveActiveLine(links[0]); document.documentElement.style.setProperty('--section-offset', sectionOffset); } links.forEach((link, index) => link.addEventListener('click', () => { userScroll = false; handleActiveLinkUpdate(index); })) window.addEventListener("scroll", () => { const currentIndex = sectionsContainer.getBoundingClientRect().top < 0 ? (sections.length - 1) - [...sections].reverse().findIndex(section => window.scrollY >= section.offsetTop - sectionOffset * 2) : 0; if (userScroll && activeIndex !== currentIndex) { handleActiveLinkUpdate(currentIndex); } else { window.clearTimeout(isScrolling); isScrolling = setTimeout(() => userScroll = true, 100); } }); $(".standard").click(function(){ $(".version").removeClass("micro floating bordered shadows rounded highlight-bar"); $(".btn").removeClass("on"); moveActiveLine(links[0]); }); $(".micro").click(function(){ $(this).toggleClass("on"); $(".standard").removeClass("on"); $(".version").toggleClass("micro"); }); $(".floating").click(function(){ $(this).toggleClass("on"); $(".standard").removeClass("on"); $(".version").toggleClass("floating"); }); $(".bordered").click(function(){ $(this).toggleClass("on"); $(".standard").removeClass("on"); $(".version").toggleClass("bordered"); }); $(".shadows").click(function(){ $(this).toggleClass("on"); $(".standard").removeClass("on"); $(".version").toggleClass("shadows"); }); $(".rounded").click(function(){ $(this).toggleClass("on"); $(".standard").removeClass("on"); $(".version").toggleClass("rounded"); }); $(".highlight-bar").click(function(){ $(this).toggleClass("on"); $(".standard").removeClass("on"); $(".version").toggleClass("highlight-bar"); moveActiveLine(links[0]); }); init(); |
That’s It. Now you have successfully created Customizable Scrolling Navbar Using jQuery and CSS, Modify Navbar Style Program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Thanks. How to make the active element always in the middle of nav on small screens (tablets, phones)?