Dropdown menu
How do I make an dropdown menu?
A simple dropdown menu.Inspired by http://drbl.in/gcAc by Matt Gentile (http://icondeposit.com). What is a dropdown menu? How do you make a dropdown menu? This script and codes were developed by Nika Zawila on 15 October 2022, Saturday.
Dropdown menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dropdown menu</title> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menu"> <a href="#" class="menu__item"> <span class="menu__item-caption">ADMIN SETTINGS</span> <i class="fa fa-gear menu__item-icon"></i> </a>
</div>
<div class="menu menu--dropdown"> <a href="#" class="menu__item"> <span class="menu__item-caption">EDIT USERS</span> <i class="fa fa-user menu__item-icon"></i> </a> <a href="#" class="menu__item is-active"> <span class="menu__item-caption">WEB STATISTICS</span> <i class="fa fa-pie-chart menu__item-icon"></i> </a> <a href="#" class="menu__item"> <span class="menu__item-caption">UPLOAD settings</span> <i class="fa fa-upload menu__item-icon"></i> </a> <a href="#" class="menu__item"> <span class="menu__item-caption">EDIT SLIDER</span> <i class="fa fa-pencil menu__item-icon"></i> </a>
</div>
</body>
</html>
Dropdown menu - Script Codes CSS Codes
body { background: #333745; font: 12px 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased;
}
.menu { background: #FBFBFB; margin: 20px auto; width: 250px; border-radius: 3px; font-weight: bold; position: relative; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.menu__item { text-decoration: none; color: #AAAAAA; padding: 15px 20px; position: relative; text-transform: uppercase; display: block; transition: color .2s;
}
.menu__item-icon { font-size: 16px; position: absolute; top: 15px; right: 20px;
}
.menu--dropdown .menu__item { color: #DBDBDB;
}
.menu--dropdown .menu__item.is-active { background: #F1F1F1; color: #AAAAAA;
}
.menu--dropdown .menu__item:hover { color: #AAAAAA;
}
.menu--dropdown:after { content: ''; display: block; position: absolute; top: -8px; left: 20px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #FBFBFB;
}
Developer | Nika Zawila |
Username | nikazawila |
Uploaded | October 15, 2022 |
Rating | 3.5 |
Size | 2,700 Kb |
Views | 44,528 |
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 |
Mr. Rooster in CSS | 1,972 Kb |
Weather widget | 2,790 Kb |
Credit Card Template | 16,362 Kb |
Buttons with badges | 1,979 Kb |
Web widget | 3,371 Kb |
Dashboard Stats Component | 2,102 Kb |
Cashflow app module | 2,041 Kb |
Password reset form | 2,800 Kb |
Buttons for autumn | 1,795 Kb |
Product backlog module | 2,488 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 |
Colorful Sliders | Chanrith | 1,246 Kb |
Zip Button test | Lje7462 | 1,932 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
Multicolumns 2 | Raphaelgoetter | 1,857 Kb |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
TestTube CSS | EZPK | 2,710 Kb |
Light Switch | Bartuc | 4,933 Kb |
Css3 loader | Clknap | 2,391 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!