Horizontal Navbar with Badge On Hover

Horizontal Navbar with Badge On Hover
Code Snippet:Hop Over Notification Badge
Author: Paul
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 231
License: MIT
Edit Code online: View on CodePen
Read More

This code snippet helps you to create a horizontal navbar with badge on menu items that show on hover. It displays notification counts on menu items. The badges appear when hovering over the menu items, indicating the count for messages, posts, and notifications. This code enhances user experience by providing visual cues for unread notifications or messages.

You can use this code on websites with navigation menus. It’s handy for showing notifications. The benefit? Users can quickly see unread messages or updates.

How to Create a Horizontal Navbar With Badge On Hover

1. Start by creating the HTML structure. Use an unordered list (<ul>) for the menu items and anchor tags (<a>) for each item, adding a data-bubble attribute to represent notification counts. Modify the list items and their associated links as needed. Adjust the data-bubble attribute to represent different notification counts.

<h1>Hop Over Notification Badge</h1>
	<ul class="menu">
		<li><a href="#" data-bubble="117">Messages</a></li>
		<li><a href="#" data-bubble="4">New Posts</a></li>
		<li><a href="#" data-bubble="19">Notifications</a></li>
		<li><a class="gold" href="#" data-bubble="1">Hidden Coins</a></li>
	</ul>

<!-- Inspired by the tuts demo 'Menu Notification Badges Using HTML5 Data-Attributes' [https://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/menu-notification-badges-using-html5-data-attributes]. Forks and improvements welcome. -->

2. Apply the following CSS styles to create the visual appearance of the navbar and badges. The CSS code defines the layout, colors, and animations for the menu items and their associated badges. Customize the CSS to match your website’s theme or design preferences. You can change colors, fonts, or animations.

*, *:before, *:after {box-sizing:border-box}

html {
	margin:0 auto;
	padding:1em 2em;
	font:normal 100%/1.5 'Helvetica Neue','Segoe UI', Arial, sans-serif;
	color:#eee; 
  height:100%
	}

h1 {
	font-size:2em;
	margin-bottom:1em;
}

.menu {
	display:inline-block;
	margin:0 -.5em 1.5em;
	box-shadow:0.12em 0.12em 0 rgba(40,40,40,.2);
	list-style-type:none;
	padding:0;
	margin:0;
	font-size:1em;
	margin-bottom:1.5em;
}

.menu li {
	float:left;
	border-left:0.063em solid #a6c6cd;
	border-right:0.063em solid #6ca1ac;
}

.menu a {
	display:block;
	padding:0 1em;
	line-height:2.5em;
	position:relative;
	font-weight:bold;
	text-decoration:none;
	color:#364652;
	background-color:#86B2BB;
	text-shadow:0 0.063em 0 #a6c6cd;
}

.menu a:hover, .menu a:active, .menu a:focus {
	color:#eee;
	text-shadow:0.063em 0.063em 0 #547177;
}

.menu a[data-bubble]:after {
	content:attr(data-bubble);
	position:absolute;
   top:0;
	right:0.5em;
	height:1.5em;
	line-height:1.5em;
	padding:0 .46em;
	text-align:center;
	text-shadow:0 0.063em 0 rgba(0,0,0,.2);
	background-color:#eee;
	color:#364652;
	box-shadow:0 0.063em 0.063em rgba(0,0,0,.2);
	border-radius:4em;
	z-index:-1;
  -webkit-transform: translateZ(0);/*Prevents text flicker*/
	will-change: transform;
}

a.gold[data-bubble]:after {
	background-color:gold;
}

.menu a:hover[data-bubble]:after, .menu a:active[data-bubble]:after, .menu a:focus[data-bubble]:after {
	-webkit-animation:ease bubbleover .4s;
	animation:ease bubbleover .4s;
  -webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	top:-1.25em; /* If pseudo animation not supported [see https://css-tricks.com/transitions-and-animations-on-css-generated-content/], simple hover fallback happens*/
	z-index:1;
}

@-webkit-keyframes bubbleover {
  0%   {
  	-webkit-transform:translate(0, 1em);
  	z-index:-1
  	}
  50% {
  	-webkit-transform:translate(0, -.5em);
  	z-index:-1
  } 
  100% {
  	-webkit-transform:translate(0, 0);
  	z-index:1;
  	}
}

@keyframes bubbleover {
  0%   {
    top:0;
    transform:translate(0, 0);
    z-index:-1;
    }
  50% {
    transform:translate(0, -12px);
    z-index:-1
    } 
  100% {
    transform:translate(0, 6px);
    z-index:1;
    }
}

That’s all! hopefully, you have successfully created a Horizontal bar with a Badge On Hover. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...