Navigation-Menu-Javascript - A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked.

Overview

Navigation-Menu-Javascript

A simple Navbar navigation using vanilla javascript, to change links to the active link when clicked.

  • Desktop view

desktop

  • Mobile view

mobile

Why?

After some research, I realised that one of the most asked questions on the web, is how to remove or add an active link using vanilla javascript.

Another common question is this: Since the :hover pseudo class cannot be changed in javascript, how do you ensure that the active link maintains the active color when you hover over the link?

As simple those questions may be, I noticed that many developers approach this with so much complexity, when it can be achieved using fewer lines of readable code.

Most people prefer using the jQuery approach, which to be honest, is very easy. However, replicating the same thing in vanilla javascript, is equally easier.

Steps

  • Select all the links or anchor tags in the document.
  • Loop through them, and add a click event on each link.
  • Get the current active link in the document
  • Keep track of the current active link by storing it in a variable.
  • When a link is clicked, replace the current active link className with an empty string, and set the active class to the clicked link.
  • Set the new link className be set to active.
You might also like...

Welcome contributers❤️🎉. Just add your name, Github profile link and Linkedin link🔗 Look at Readme for more.📖

Welcome contributers❤️🎉. Just add your name, Github profile link and Linkedin link🔗 Look at Readme for more.📖

Hello Welcome Developers! Step - 1 Create a GitHub account, if you don't already have one. Step - 2 Register for Hacktoberfest: Navigate to the Hackto

Oct 31, 2022

A simple dashboard to keep track of all your active devices/servers

A simple dashboard to keep track of all your active devices/servers

Slashboard Pulsar A lightweight node js app designed to work with the Slashboard desktop client Built using Node.js Installation Clone this repository

Dec 21, 2022

MenuSlider-Javascript - How to create a menu slider with vanilla javascript

MenuSlider-Javascript How to create a menu slider with vanilla javascript Instal

Feb 8, 2022

A lightweight vanilla JavaScript context menu library with FontAwesome support.

A lightweight vanilla JavaScript context menu library with FontAwesome support.

Contextify A lightweight vanilla JavaScript context menu library with FontAwesome support. This library was written for use in a personal project of m

Jun 1, 2022

MetisMenu: Collapsible menu plugin with Vanilla-JS

metismenujs MetisMenu: Collapsible menu plugin with Vanilla-JS This plugin does not support any version of IE browser. Please consider following this

Dec 23, 2022

A dependency-free Vanilla JS Accordion Menu Nested

🚀 A dependency-free Vanilla JS Accordion Menu Nested No dependencies, no automation build tools. Copy/paste and ready to use. CSS and JS are inlined

Dec 18, 2022

A quick and easy to use security reconnaissance webapp tool, does OSINT, analysis and red-teaming in both passive and active mode. Written in nodeJS and Electron.

A quick and easy to use security reconnaissance webapp tool, does OSINT, analysis and red-teaming in both passive and active mode. Written in nodeJS and Electron.

ᵔᴥᵔ RedJoust A quick and easy to use security reconnaissance webapp tool, does OSINT, analysis and red-teaming in both passive and active mode. Writte

Oct 31, 2022

Add grouped tabsets, which remember the active tab across multiple HTML documents.

Grouped Tabsets See the extension in action. This quarto extension provides support for "grouped" tabsets in Quarto HTML documents. Consider the case

Sep 30, 2022

Swaps active audio input device in OBS upon twitch chat channel point redemption.

Swaps active audio input device in OBS upon twitch chat channel point redemption.

OBS-Mic-Swapper Shortcuts Set up Program Description Example of Functionality FAQ Contact Info Set up Create an account on Twitch for your bot Make su

Nov 8, 2022
Owner
Ellis
Web Developer | Entrepreneur
Ellis
jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.

jQuery jSide Menu jSide Menu is a well designed, simple and clean side navigation menu with dropdowns. Browse: Live Demo & Using Guide Main Features F

CodeHim 24 Feb 14, 2022
Bootstrap 4 Navbar with multiple dropdowns

Bootstrap Navbar Dropdowns Support for bootstrap 3, 4 and 5 Installation Node npm install boostrap-navbar-dropdowns or yarn add boostrap-navbar-dropd

Guilherme Fontenele 94 Aug 22, 2022
JavaScript Express.js app serving static vanilla JS. This sample app is used in Microsoft Docs to demonstrate how to integrate Azure Storage, Azure Cosmos DB, and Azure Active Directory.

JavaScript on Azure Learn Path - Module 2 - Deploying a basic app to Azure This Learn module requires the following Azure resources to deploy correctl

Azure Samples 13 Dec 31, 2022
This plugin can generate timestamps for video, audio and Bilibili video, it takes you to the corresponding video/audio position when clicked.

logseq-plugin-media-ts 本插件能够生成视频、音频以及 B 站视频的时间戳,点击时间戳后会跳转到对应的音视频位置。 This plugin can generate timestamps for video, audio and Bilibili video, it takes

Seth Yuan 58 Jan 3, 2023
VanillaSelectBox - A dropdown menu with lots of features that takes a select tag and transforms it into a single or multi-select menu with 1 or 2 levels

vanillaSelectBox v1.0.0 vanillaSelectBox : v1.00 : Adding a package.json file New : Possibility to change the dropdown tree and change the remote sear

philippe MEYER 103 Dec 16, 2022
Obsidian-dataview-table-filter-menu - Dynamically created filter menu for dataview tables in obsidian

Dataview table Filter Menu for Obsidian Dynamically created filter menu for data

shiro 17 Sep 24, 2022
A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

Letter Shuffle Animation for a Menu A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item

Codrops 29 Dec 4, 2022
This restaurant project is a SPA (single-page application) website. The user can navigate between the home, menu and contact page. I used the MealDB API to display some menu items.

Fresh Cuisine This restaurant project is from the Odin Project and it is a SPA (single-page application) website. The user can navigate between the ho

Virag Kormoczy 7 Nov 2, 2022
Share all your links with just one link <3

Sharing links was never this easy and beautiful Share all your profile links in just one link See the LIVE DEMO DEMO: Completely responsive and beauti

Abhishek Jha 6 Sep 17, 2022