Amazing CSS Menu with Notification Badges

Developer
Faizan Asad
Size
2,549 Kb
Views
66,792
  1. Amazing CSS Menu with Notification Badges Previews
  2. Amazing CSS Menu with Notification Badges HTML Codes
  3. Amazing CSS Menu with Notification Badges CSS Codes

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
IQ Test

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
Name
Blog sign
Awesome HTML5 Contact Form
Facebook nav
Blogger signup email form
Menubar
Awesome CSS Footer Social Buttons
Bing Clone Only HTML
Windows 8 Metro
Slingshot Game
Google Style Footer
Create amazing web content 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!