Drop-down - Custom Element
How do I make an drop-down - custom element?
Bootstrap like drop-down using custom element.. What is a drop-down - custom element? How do you make a drop-down - custom element? This script and codes were developed by Shridhar Deshmukh on 22 July 2022, Friday.
Drop-down - Custom Element - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Drop-down - Custom Element</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <drop-down> <button>Web Components</button> <ul class="menu" role="menu"> <li role="presentation"><a href="#">Custom Element</a></li> <li role="presentation"><a href="#">HTML Imports</a></li> <li role="presentation"><a href="#">Shadow DOM</a></li> <li role="presentation"><a href="#">HTML Templates</a></li> </ul>
</drop-down> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Drop-down - Custom Element - Script Codes CSS Codes
body { margin: 15px;
}
drop-down:unresolved { display: none;
}
drop-down { position: relative; display: inline-block;
}
drop-down button { background-color: #FFF; padding: 5px 15px; color: #333; border: 1px solid #CCC; border-radius: 5px; outline: none;
}
drop-down .menu { list-style: none; padding: 5px 0; border: 1px solid #CCC; border-radius: 5px; float: left; min-width: 100%; position: absolute; top: 100%; margin: 0px;
}
drop-down .menu a { display: block; padding: 3px 15px; clear: both; line-height: 1.3; color: #333; text-decoration: none;
}
drop-down .menu a:hover { text-decoration: none; color: #262626; background-color: #EEE;
}
drop-down button:after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent;
}
Drop-down - Custom Element - Script Codes JS Codes
var dropDownProto = Object.create(HTMLElement.prototype);
dropDownProto.createdCallback = function() { var button = this.querySelector("button"); var menu = this.querySelector(".menu"); button.addEventListener("click", function() { if(menu.style.display == 'none') menu.style.display = 'block'; else menu.style.display = 'none'; });
}
var DropDown = document.registerElement("drop-down", {prototype: dropDownProto});
Developer | Shridhar Deshmukh |
Username | _shree33 |
Uploaded | July 22, 2022 |
Rating | 3 |
Size | 2,285 Kb |
Views | 54,648 |
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 |
A Pen by Shridhar Deshmukh | 3,254 Kb |
Maintenance Page | 1,773 Kb |
This in DOM Event Handler | 1,792 Kb |
This in Global Context | 1,716 Kb |
This in object method | 1,752 Kb |
Drop-down - Custom Element | 2,285 Kb |
Blog Theme | 4,646 Kb |
This with bind | 1,732 Kb |
Console logger | 1,731 Kb |
Hover Message Design | 1,711 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 |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
Contact | GanNichiHa | 2,514 Kb |
Delete Hover | Chungman93 | 2,557 Kb |
Resize image | Happyhj | 1,892 Kb |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Pure CSS Tooltips | Mobius1 | 2,271 Kb |
JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 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!