https://github.com/ozrn/js-follow-along-navbar

This is a fun JS project where a follow along hover navbar is created replicating Stripe's main navigation
https://github.com/ozrn/js-follow-along-navbar

Last synced: about 2 months ago
JSON representation

This is a fun JS project where a follow along hover navbar is created replicating Stripe's main navigation

• Host: GitHub
• URL: https://github.com/ozrn/js-follow-along-navbar
• Owner: ozrn
• Created: 2022-11-22T08:22:49.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-26T09:12:46.000Z (about 2 years ago)
• Last Synced: 2023-05-15T16:26:30.634Z (over 1 year ago)
• Language: CSS
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JS30 #26: js-follow-along-navbar

This is yet another vanilla JavaScript project of JS30 series by Wes Bos. In this fun project, the functioning of the Stripe website's main navigation bar is replicated using CSS and JavaScript. 

View demo [here](https://ozrn.github.io/js-follow-along-navbar/)

## Overview

With the help of mouseenter and mouseleave events on the unordered list items, the navbar will be manipulated. Once one of the items is hovered on, the content of the dropdown will appear and the white div that has a class of dropdownBackground will place behind the content and resize itself based on the content size.