Dropdown Selector

Developer
Pollardld
Size
4,469 Kb
Views
14,168
  1. Dropdown Selector Previews
  2. Dropdown Selector HTML Codes
  3. Dropdown Selector CSS Codes
  4. Dropdown Selector JS Codes

How do I make an dropdown selector?

Designed by Charlene Foote http://charlenefoote.com/Meant for client site, but removed per client's request, so I did not want to lose the good work :). What is a dropdown selector? How do you make a dropdown selector? This script and codes were developed by Pollardld on 08 November 2022, Tuesday.

Dropdown Selector Previews
IQ Test

Dropdown Selector - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dropdown Selector</title>	<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Rosarivo' rel='stylesheet' type='text/css'> <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! */ body { background: #aad9da; font-family: "Rosarivo", serif; font-weight: normal;
}
h1 { color: #6a9a9a; font-family: "Lato", sans-serif; font-size: 1.5rem; text-align: center;
}
h1 a { color: #6a9a9a; text-decoration: none; transition: .3s color ease;
}
h1 a:hover { color: #29eac1; transition: .3s color ease;
}
h3 { color: #aad9da; font-family: "Lato", sans-serif; font-weight: normal; margin: 0 0 .75rem; text-transform: uppercase;
}
section { background: #6a9a9a; margin: 2rem auto; padding: 1.25rem 1rem; position: relative; width: 50%;
}
hr.light { background: rgba(170, 217, 218, 0.2); border: none; height: 1px; margin: 0 0 1px;
}
hr.dark { background: #aad9da; border: none; height: 1px; margin: 0 0 1rem;
}
.categories a { color: #6a9a9a; display: block; font-size: .875em; font-weight: 300; text-transform: uppercase;
}
ul { padding: 0;
}
.dd-wrapper { position: relative; display: block; margin: 0 auto; padding: 10px 15px; background: white; cursor: pointer; outline: none;
}
.dd-wrapper span { font-family: "Rosarivo", serif; color: #6a9a9a;
}
.dd-wrapper:after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #d561e6 transparent;
}
.dd-wrapper .dropdown { position: absolute; top: 100%; left: 0; right: 0px; margin: 0; background: white; transition: all 0.3s ease-out; list-style: none; opacity: 0; pointer-events: none;
}
.dd-wrapper .dropdown li { border-bottom: 1px solid #aad9da;
}
.dd-wrapper .dropdown li:last-child { border-bottom: 0;
}
.dd-wrapper .dropdown li a { display: block; text-decoration: none; color: #333; padding: 10px; transition: all 0.3s ease-out;
}
.dd-wrapper .dropdown li:hover a { color: #d561e6;
}
.dd-wrapper.active { background: #6a9a9a;
}
.dd-wrapper.active span { color: white;
}
.dd-wrapper.active:after { border-width: 0 6px 6px 6px; border-color: white transparent;
}
.dd-wrapper.active .dropdown { opacity: 1; pointer-events: auto;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Dropdown Selector by <a href="http://charlenefoote.com/">Charlene Foote</a></h1>
<section class="categories">	<h3>From the Blog</h3>	<hr class="light">	<hr class="dark">	<div id="cat-dd" class="dd-wrapper" tabindex="1"> <span>Choose a category…</span> <ul class="dropdown"> <li><a href="/category/yoga">Yoga</a></li> <li><a href="/category/yoga">Yoga</a></li> <li><a href="/category/yoga">Yoga</a></li> <li><a href="/category/yoga">Yoga</a></li> </ul>	</div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dropdown Selector - Script Codes CSS Codes

body { background: #aad9da; font-family: "Rosarivo", serif; font-weight: normal;
}
h1 { color: #6a9a9a; font-family: "Lato", sans-serif; font-size: 1.5rem; text-align: center;
}
h1 a { color: #6a9a9a; text-decoration: none; transition: .3s color ease;
}
h1 a:hover { color: #29eac1; transition: .3s color ease;
}
h3 { color: #aad9da; font-family: "Lato", sans-serif; font-weight: normal; margin: 0 0 .75rem; text-transform: uppercase;
}
section { background: #6a9a9a; margin: 2rem auto; padding: 1.25rem 1rem; position: relative; width: 50%;
}
hr.light { background: rgba(170, 217, 218, 0.2); border: none; height: 1px; margin: 0 0 1px;
}
hr.dark { background: #aad9da; border: none; height: 1px; margin: 0 0 1rem;
}
.categories a { color: #6a9a9a; display: block; font-size: .875em; font-weight: 300; text-transform: uppercase;
}
ul { padding: 0;
}
.dd-wrapper { position: relative; display: block; margin: 0 auto; padding: 10px 15px; background: white; cursor: pointer; outline: none;
}
.dd-wrapper span { font-family: "Rosarivo", serif; color: #6a9a9a;
}
.dd-wrapper:after { content: ""; width: 0; height: 0; position: absolute; right: 16px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #d561e6 transparent;
}
.dd-wrapper .dropdown { position: absolute; top: 100%; left: 0; right: 0px; margin: 0; background: white; transition: all 0.3s ease-out; list-style: none; opacity: 0; pointer-events: none;
}
.dd-wrapper .dropdown li { border-bottom: 1px solid #aad9da;
}
.dd-wrapper .dropdown li:last-child { border-bottom: 0;
}
.dd-wrapper .dropdown li a { display: block; text-decoration: none; color: #333; padding: 10px; transition: all 0.3s ease-out;
}
.dd-wrapper .dropdown li:hover a { color: #d561e6;
}
.dd-wrapper.active { background: #6a9a9a;
}
.dd-wrapper.active span { color: white;
}
.dd-wrapper.active:after { border-width: 0 6px 6px 6px; border-color: white transparent;
}
.dd-wrapper.active .dropdown { opacity: 1; pointer-events: auto;
}

Dropdown Selector - Script Codes JS Codes

function DropDown(e) {	this.dd = e;	this.initEvents();
}
DropDown.prototype = {	initEvents : function() {	var obj = this;	obj.dd.on('click', function(event){	jQuery(this).toggleClass('active');	event.stopPropagation();	});	}
}
$(function() {	var dd = new DropDown( jQuery('#cat-dd') );	$(document).click(function() { // all dropdowns	$('.dd-wrapper').removeClass('active');	});
});
Dropdown Selector - Script Codes
Dropdown Selector - Script Codes
Home Page Home
Developer Pollardld
Username pollardld
Uploaded November 08, 2022
Rating 3
Size 4,469 Kb
Views 14,168
Do you need developer help for Dropdown Selector?

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!

Pollardld (pollardld) Script Codes
Name
Mapbox Directions with geolocation tracking
Alta Map Spartanburg
Pipe Billow SVG Animation
Paypal checkout svg
Titanis walleri
Nav Combine
Bejeweled pieces
Triceratops
Form Submit to Google Forms
SR2S Stable
Create amazing video scripts 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!