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 |
Blogger signup email form | 4,266 Kb |
A Pen by Faizan Asad | 8,396 Kb |
Amazing Tag Cloud | 3,130 Kb |
Windows 8 Metro | 4,688 Kb |
Awesome HTML5 Contact Form | 2,227 Kb |
Chrome image Frame | 2,017 Kb |
Menubar | 2,093 Kb |
Bing Clone Only HTML | 16,169 Kb |
Envato | 3,286 Kb |
Facebook nav | 2,822 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 |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
Modal Dialog | Gigaleet | 2,251 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 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!