Dropdown menu
How do I make an dropdown menu?
To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).. What is a dropdown menu? How do you make a dropdown menu? This script and codes were developed by Kasper Mikiewicz on 21 November 2022, Monday.
Dropdown menu Previews
Dropdown menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dropdown menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { font-size: 75%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body { font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; margin: 110px auto 0 auto; width: 100%; max-width: 260px; text-align: center;
}
a { text-decoration: none;
}
.dropdown { position: relative; display: inline-block; text-align: left; width: 132px;
}
.dropdown-text { cursor: pointer; position: absolute; text-indent: 10px; line-height: 32px; background-color: #eee; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1); width: 100%;
}
.dropdown-text:after { position: absolute; right: 6px; top: 15px; content: ''; width: 0px; height: 0px; border-style: solid; border-width: 5px 4px 0 4px; border-color: #555 transparent transparent transparent;
}
.dropdown-text,
.dropdown-content a { color: #333; text-shadow: 0 1px #fff;
}
.dropdown-toggle { font-size: 0; z-index: 1; cursor: pointer; position: absolute; top: 0; border: none; padding: 0; margin: 0 0 0 1px; background: transparent; text-indent: -10px; height: 34px; width: 100%;
}
.dropdown-toggle:focus { outline: 0;
}
.dropdown-content { -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; list-style-type: none; position: absolute; top: 32px; padding: 0; margin: 0; opacity: 0; visibility:hidden; border-radius: 3px; text-indent: 10px; line-height: 32px; background-color: #eee; border: 1px solid #ccc; width: 140px;
}
.dropdown-content a { display: block;
}
.dropdown-content a:hover { background: #e8e8e8;
}
.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text { background-color: #e8e8e8;
}
.dropdown-toggle:focus ~ .dropdown-text { box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8); z-index: 2;
}
.dropdown-toggle:focus ~ .dropdown-text:after { border-width: 0 4px 5px 4px; border-color: transparent transparent #555 transparent;
}
.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content { opacity: 1; visibility:visible; top: 42px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <p><i>To show/hide menu, I'm using :focus instead of checkbox so when you click somewhere else then menu will be hidden :).</i></p>
<div class="dropdown"> <input class="dropdown-toggle" type="text"> <div class="dropdown-text">Account</div> <ul class="dropdown-content"> <li><a href="#">Settings</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Log out</a></li> </ul>
</div> <script src="js/index.js"></script>
</body>
</html>Dropdown menu - Script Codes CSS Codes
html { font-size: 75%; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body { font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; margin: 110px auto 0 auto; width: 100%; max-width: 260px; text-align: center;
}
a { text-decoration: none;
}
.dropdown { position: relative; display: inline-block; text-align: left; width: 132px;
}
.dropdown-text { cursor: pointer; position: absolute; text-indent: 10px; line-height: 32px; background-color: #eee; border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1); width: 100%;
}
.dropdown-text:after { position: absolute; right: 6px; top: 15px; content: ''; width: 0px; height: 0px; border-style: solid; border-width: 5px 4px 0 4px; border-color: #555 transparent transparent transparent;
}
.dropdown-text,
.dropdown-content a { color: #333; text-shadow: 0 1px #fff;
}
.dropdown-toggle { font-size: 0; z-index: 1; cursor: pointer; position: absolute; top: 0; border: none; padding: 0; margin: 0 0 0 1px; background: transparent; text-indent: -10px; height: 34px; width: 100%;
}
.dropdown-toggle:focus { outline: 0;
}
.dropdown-content { -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; list-style-type: none; position: absolute; top: 32px; padding: 0; margin: 0; opacity: 0; visibility:hidden; border-radius: 3px; text-indent: 10px; line-height: 32px; background-color: #eee; border: 1px solid #ccc; width: 140px;
}
.dropdown-content a { display: block;
}
.dropdown-content a:hover { background: #e8e8e8;
}
.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text { background-color: #e8e8e8;
}
.dropdown-toggle:focus ~ .dropdown-text { box-shadow: 0 1px 3px rgba(0,0,0, .2) inset, 0 1px 0 rgba(255,255,255, 0.8); z-index: 2;
}
.dropdown-toggle:focus ~ .dropdown-text:after { border-width: 0 4px 5px 4px; border-color: transparent transparent #555 transparent;
}
.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content { opacity: 1; visibility:visible; top: 42px;
}Dropdown menu - Script Codes JS Codes
/* * Dropdown menu for Design it & Code it * http://designitcodeit.com/i/19 */
| Developer | Kasper Mikiewicz |
| Username | Idered |
| Uploaded | November 21, 2022 |
| Rating | 4.5 |
| Size | 3,350 Kb |
| Views | 16,192 |
Do you need developer help for Dropdown menu?
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!
Kasper Mikiewicz (Idered) Script Codes
| Name | Size |
| Pure CSS modal box | 3,364 Kb |
| Comments thread | 3,601 Kb |
| Hello bar | 3,237 Kb |
| Notifications | 3,250 Kb |
| Pure CSS3 Tags | 4,052 Kb |
| Universal focus, hover, active state for buttons | 2,439 Kb |
| Color accordion | 1,925 Kb |
| Flat radio buttons | 2,759 Kb |
| Simple loader | 2,645 Kb |
| Flat switch | 2,555 Kb |
Create amazing Facebook ads 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!
Similar Scripts & Codes
| Name | Username | Size |
| Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
| Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
| A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
| Drag and Drop Quiz | Cgspicer | 3,837 Kb |
| Mini Profile | Frytyler | 3,828 Kb |
| CSS Gem Badge | Orchard | 3,335 Kb |
| Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
| Vue.js Starter | Andymerskin | 1,268 Kb |
| Blank Starter | Mhartington | 2,171 Kb |
| Client-side Email Validation | Collizo4sky | 1,538 Kb |
Do you want hide your ip address?
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!