Amazing CSS Menu with Notification Badges

Developer
Size
2,549 Kb
Views
66,792

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 Previews

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);
}
Amazing CSS Menu with Notification Badges - Script Codes
Amazing CSS Menu with Notification Badges - Script Codes
Home Page Home
Developer Faizan Asad
Username faizanasad
Uploaded July 04, 2022
Rating 3
Size 2,549 Kb
Views 66,792
Do you need developer help for Amazing CSS Menu with Notification Badges?

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!

Faizan Asad (faizanasad) Script Codes
Create amazing blog posts with AI!

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!