Gaurav Sachdeva

One of the key components of a good UI is a navigation bar that not only looks good but also provides dynamic feedback to the user. In this article, we will break down a sample web page that showcases a flexible and interactive navigation bar using HTML, CSS, and JavaScript.

Overview

The demo includes a navigation bar with several features:

• Dynamic hover effects that blur out non-hovered links.
• An interactive notification count that increments automatically (for demo only).
• Visual indicators for alerts when notification counts reach specific thresholds.

Features Breakdown

1. Font and Styling
   • The page uses the "IBM Plex Sans" font for a clean, modern look.
   • The body is styled to have a centered, column-flex layout with a light background color for good contrast.
2. Navigation Bar
   • Contains several links (Home, Dashboard, Profile, Notifications, and Settings).
   • Each link has padding and border styles to enhance their appearance.
   • Links change appearance on hover, creating a blurred effect for non-hovered links to draw attention to the hovered link.
3. Notification Badge
   • The Notifications link includes a badge that dynamically displays the number of notifications.
   • The badge changes color to maroon when the count exceeds 10, indicating an alert.
   • A JavaScript function increments the notification count every 2.5 seconds, stopping after the count exceeds 30.

Interactive Demo

To see the navigation bar in action, you can interact with the embedded CodePen demo below:

Conclusion

This example demonstrates how to create an interactive navigation bar with dynamic effects and live updates using a combination of HTML, CSS, and JavaScript. By embedding such elements in your projects, you can enhance user experience and make your web applications more engaging.

For more detailed code and further experimentation, feel free to explore the CodePen demo provided above.