Amazing CSS Menu with Notification Badges
How do I make an amazing css menu with notification badges?
By Faizan Asad. What is a amazing css menu with notification badges? How do you make a amazing css menu with notification badges? This script and codes were developed by Faizan Asad on 04 July 2022, Monday.
Amazing CSS Menu with Notification Badges - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Amazing CSS Menu with Notification Badges</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Menu with Notification Badges</title> <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body> <div class="container"> <nav> <ul> <li class="active"><a href="#">Dashboard</a></li> <li><a href="#">Tasks<span class="badge">4</span></a></li> <li><a href="#">Messages<span class="badge green">8</span></a></li> <li><a href="#">Settings<span class="badge yellow">15</span></a></li> <li><a href="#">Notifications<span class="badge red">16</span></a></li> <li><a href="#">Logout</a></li> </ul> </nav> </div>
</body>
</html>
</body>
</html>
Amazing CSS Menu with Notification Badges - Script Codes CSS Codes
@import "http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css";
body { font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; color: #404040; background: #ecedef;
}
.container { margin: 80px auto 120px; width: 560px;
}
nav { height: 26px; text-align: center;
}
nav ul { border-width: 1px; border-style: solid; border-color: #d5d5d5 #d2d2d2 #cdcdcd; border-radius: 3px; display: inline-block; vertical-align: baseline; zoom: 1; *display: inline; *vertical-align: auto; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
nav li { float: left; border-left: 1px solid #d2d2d2;
}
nav li:first-child { border-left: 0;
}
nav li:first-child a { border-radius: 3px 0 0 3px;
}
nav li:last-child a { border-radius: 0 3px 3px 0;
}
nav a { display: block; position: relative; padding: 0 14px; height: 26px; line-height: 26px; font-size: 11px; font-weight: bold; color: #666; text-decoration: none; text-shadow: 0 1px white; background: #fafafa; background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0); background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0); background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0); background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0); -webkit-box-shadow: inset 0 0 0 1px #fafafa; box-shadow: inset 0 0 0 1px #fafafa;
}
nav a:hover { color: #333; z-index: 2; -webkit-box-shadow: inset 0 0 0 1px #fafafa, 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 0 1px #fafafa, 0 0 3px rgba(0, 0, 0, 0.3);
}
nav li.active a, nav a:active { color: #333; background: white; -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
}
nav .badge { display: block; position: absolute; top: -12px; right: 3px; line-height: 16px; height: 16px; padding: 0 5px; font-family: Arial, sans-serif; color: white; text-shadow: 0 1px rgba(0, 0, 0, 0.25); border: 1px solid; border-radius: 10px; -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 1px rgba(0, 0, 0, 0.08);
}
nav .badge { background: #67c1ef; border-color: #30aae9; background-image: -webkit-linear-gradient(top, #acddf6, #67c1ef); background-image: -moz-linear-gradient(top, #acddf6, #67c1ef); background-image: -o-linear-gradient(top, #acddf6, #67c1ef); background-image: linear-gradient(to bottom, #acddf6, #67c1ef);
}
nav .badge.green { background: #77cc51; border-color: #59ad33; background-image: -webkit-linear-gradient(top, #a5dd8c, #77cc51); background-image: -moz-linear-gradient(top, #a5dd8c, #77cc51); background-image: -o-linear-gradient(top, #a5dd8c, #77cc51); background-image: linear-gradient(to bottom, #a5dd8c, #77cc51);
}
nav .badge.yellow { background: #faba3e; border-color: #f4a306; background-image: -webkit-linear-gradient(top, #fcd589, #faba3e); background-image: -moz-linear-gradient(top, #fcd589, #faba3e); background-image: -o-linear-gradient(top, #fcd589, #faba3e); background-image: linear-gradient(to bottom, #fcd589, #faba3e);
}
nav .badge.red { background: #fa623f; border-color: #fa5a35; background-image: -webkit-linear-gradient(top, #fc9f8a, #fa623f); background-image: -moz-linear-gradient(top, #fc9f8a, #fa623f); background-image: -o-linear-gradient(top, #fc9f8a, #fa623f); background-image: linear-gradient(to bottom, #fc9f8a, #fa623f);
}

Developer | Faizan Asad |
Username | faizanasad |
Uploaded | July 04, 2022 |
Rating | 3 |
Size | 2,549 Kb |
Views | 66,759 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Google Style Footer | 2,836 Kb |
CSS Awesome Task List Check Box | 2,540 Kb |
A Pen by Faizan Asad | 47,328 Kb |
A Pen by Faizan Asad | 8,396 Kb |
Stunning CSS3 Pagination | 2,484 Kb |
Blog sign | 2,092 Kb |
Chrome image Frame | 2,017 Kb |
Amazing animated CSS Ghost Button | 2,029 Kb |
Blogger email sign up form | 1,783 Kb |
Snake Game | 3,206 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Lunar eclipse | Ademilter | 2,056 Kb |
Template | Indra_z85 | 2,323 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Comparison of Roboto Draft vs Roboto | Jxnblk | 2,880 Kb |
Simple checkbox style | Vncnz | 2,628 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
Pure CSS Spinners | Jlong | 2,043 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!