Horizontal Navbar with Badge On Hover

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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.