Drop-down - Custom Element

Developer
Shridhar Deshmukh
Size
2,285 Kb
Views
54,648
  1. Drop-down - Custom Element Previews
  2. Drop-down - Custom Element HTML Codes
  3. Drop-down - Custom Element CSS Codes
  4. Drop-down - Custom Element JS Codes

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

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});
Drop-down - Custom Element - Script Codes
Drop-down - Custom Element - Script Codes
Home Page Home
Developer Shridhar Deshmukh
Username _shree33
Uploaded July 22, 2022
Rating 3
Size 2,285 Kb
Views 54,648
Do you need developer help for Drop-down - Custom Element?

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!

Shridhar Deshmukh (_shree33) Script Codes
Name
Blog Theme
Registration Form Desgin
Console logger
A Pen by Shridhar Deshmukh
Hover Message Design
This with bind
This in DOM Event Handler
Email
HTML Imports
Hoisting
Create amazing art & images 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!