Custom Dropdown

Developer
Tim
Size
2,387 Kb
Views
16,192
  1. Custom Dropdown Previews
  2. Custom Dropdown HTML Codes
  3. Custom Dropdown CSS Codes
  4. Custom Dropdown JS Codes

How do I make an custom dropdown?

What is a custom dropdown? How do you make a custom dropdown? This script and codes were developed by Tim on 31 October 2022, Monday.

Custom Dropdown Previews
IQ Test

Custom Dropdown - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Dropdown</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<table> <tr> <td>Row 1</td> </tr> <tr> <td> <div id="dd"></div> </td> </tr> <tr> <td>Row 3</td> </tr>
</table> <script src="js/index.js"></script>
</body>
</html>

Custom Dropdown - Script Codes CSS Codes

tbody tr:nth-child(odd){ background-color: #ccc;
}
.dropdown{ cursor: default; -webkit-user-select: none;
}
.selectable:after{ position: relative; top: 10px; margin-left: 4px; content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black;
}
.options ul{ list-style: none; margin: 0; padding: 0;
}
.options ul li:hover{ color:white;
}
.options ul li:nth-child(2){ background-color: green; border-radius: 12px; text-align: center;
}
.options ul li:nth-child(1){ background-color: red; border-radius: 12px; text-align: center;
}
.options ul li:nth-child(3){ background-color: blue; border-radius: 12px; text-align: center;
}

Custom Dropdown - Script Codes JS Codes

(function(){ var DropDown = function(el, arg_opts){ dropdown = {} dropdown.dd = document.getElementById(el) dropdown.opts = [] initEvents(dropdown, arg_opts) } let toggle = function(el){ el.style.display = (el.style.display === 'none') ? 'block' : 'none' } let hide = function(el){ el.style.display = 'none' } let initEvents = function(obj, arg_opts){ obj.dd.setAttribute('class','dropdown') //Generate selectable let selectable = document.createElement('div') selectable.setAttribute('class','selectable') selectable.textContent = 'Selectable' obj.dd.appendChild(selectable) obj.selectable = selectable //Generate options let options = document.createElement('div') let list = document.createElement('ul') for(text of arg_opts){ let opt = document.createElement('li') opt.textContent = text list.appendChild(opt) obj.opts.push(opt) } options.appendChild(list) options.setAttribute('class','options') obj.dd.appendChild(options) hide(options) obj.options = options obj.dd.addEventListener('click', function(e){ toggle(obj.options) obj.options.focus() }) for(o of obj.opts){ o.addEventListener('click',function(e){ obj.selectable.textContent = e.target.textContent }) } } let root = this root.DropDown = DropDown
})()
DropDown('dd',['red','green','blue'])
Custom Dropdown - Script Codes
Custom Dropdown - Script Codes
Home Page Home
Developer Tim
Username maytim
Uploaded October 31, 2022
Rating 3
Size 2,387 Kb
Views 16,192
Do you need developer help for Custom Dropdown?

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!

Tim (maytim) Script Codes
Name
IPhone Doodle
CSS Grid Calendar
Pixel paint
Game idea
Double Helix Animation - Jade and Sass
Pixi JS
Custom Multi Column Data Entry Select
Barbell
Bot Land Rankings
Double Helix Animation - Jade and Sass
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!