Dropdown

Developer
Hampus Persson
Size
4,452 Kb
Views
34,408
  1. Dropdown Previews
  2. Dropdown HTML Codes
  3. Dropdown CSS Codes
  4. Dropdown JS Codes

How do I make an dropdown?

A dropdown with autoscroll.Inspiration from http://codepen.io/hmps/pen/sGxJK. What is a dropdown? How do you make a dropdown? This script and codes were developed by Hampus Persson on 13 September 2022, Tuesday.

Dropdown Previews
IQ Test

Dropdown - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dropdown</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.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! */ @charset "UTF-8";
/* OPTIONS */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: 'Lato', sans-serif; background-color: #fff; color: #A2ACB0;
}
/* STYLES */
section { width: 300px; display: block; margin: 50px auto; text-align: center;
}
h1 { font-size: 36px; font-weight: 300; color: #343C3F; margin-bottom: 1em;
}
.dropdown { text-align: left; color: #343C3F; border: 1px solid #A2ACB0;
}
.dropdown.closed .dropdown-menu { margin-top: 0px;
}
.dropdown.closed .dropdown-menu li { height: 0px;
}
.dropdown.closed .title { border-bottom: none;
}
.dropdown.closed .title:after { margin-top: -16px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
}
.dropdown .title { width: 100%; position: relative; height: 40px; padding: 12px; cursor: pointer; border-bottom: 1px solid #D9E1E4;
}
.dropdown .title:after { display: block; content: "▾"; position: absolute; right: 14px; margin-top: -16px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.dropdown .dropdown-menu { position: relative; overflow: hidden; max-height: 200px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; -webkit-box-sizing: "border-box"; -moz-box-sizing: "border-box"; box-sizing: "border-box";
}
.dropdown ul { position: absolute; top: 0; width: 100%;
}
.dropdown ul li { width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid #D9E1E4; padding: 0 12px; vertical-align: top; overflow: hidden; cursor: pointer; -webkit-transition: margin-top 0.5s, height 0.5s; -moz-transition: margin-top 0.5s, height 0.5s; transition: margin-top 0.5s, height 0.5s;
}
.dropdown ul li:hover { background-color: #D9E1E4; color: #343C3F;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body class="theme-transit"><section id="content"><h1>Users</h1> <div class="dropdown closed"> <div class="title">Pick user</div> <div class="dropdown-menu"> <ul> <li>Henry Christensen</li> <li>Imelda Silva</li> <li>Marah Mueller</li> <li>Holly Fitzpatrick</li> <li>Lamar Flynn</li> <li>Jameson Davidson</li> <li>Harper Lynn</li> <li>Keith Woods</li> <li>Cally Dominguez</li> <li>Carter Gould</li> <li>Brenna Sutton</li> <li>Robert Vang</li> <li>Lane Shepard</li> <li>Ila Shepard</li> <li>Madaline Mccarthy</li> <li>Raya King</li> <li>Tara Schroeder</li> <li>Paloma Bryan</li> <li>Trevor Heath</li> <li>Raymond Vega</li> <li>Nyssa Mcleod</li> <li>Zachary Deleon</li> <li>Guy Morales</li> <li>Gannon Kline</li> <li>Clare Floyd</li> </ul> </div> </div> </section>
</body> <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 - Script Codes CSS Codes

@charset "UTF-8";
/* OPTIONS */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
body { font-family: 'Lato', sans-serif; background-color: #fff; color: #A2ACB0;
}
/* STYLES */
section { width: 300px; display: block; margin: 50px auto; text-align: center;
}
h1 { font-size: 36px; font-weight: 300; color: #343C3F; margin-bottom: 1em;
}
.dropdown { text-align: left; color: #343C3F; border: 1px solid #A2ACB0;
}
.dropdown.closed .dropdown-menu { margin-top: 0px;
}
.dropdown.closed .dropdown-menu li { height: 0px;
}
.dropdown.closed .title { border-bottom: none;
}
.dropdown.closed .title:after { margin-top: -16px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
}
.dropdown .title { width: 100%; position: relative; height: 40px; padding: 12px; cursor: pointer; border-bottom: 1px solid #D9E1E4;
}
.dropdown .title:after { display: block; content: "▾"; position: absolute; right: 14px; margin-top: -16px; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}
.dropdown .dropdown-menu { position: relative; overflow: hidden; max-height: 200px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; -webkit-box-sizing: "border-box"; -moz-box-sizing: "border-box"; box-sizing: "border-box";
}
.dropdown ul { position: absolute; top: 0; width: 100%;
}
.dropdown ul li { width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid #D9E1E4; padding: 0 12px; vertical-align: top; overflow: hidden; cursor: pointer; -webkit-transition: margin-top 0.5s, height 0.5s; -moz-transition: margin-top 0.5s, height 0.5s; transition: margin-top 0.5s, height 0.5s;
}
.dropdown ul li:hover { background-color: #D9E1E4; color: #343C3F;
}

Dropdown - Script Codes JS Codes

var $container = $('.dropdown-menu'), $list = $('.dropdown-menu ul'), listItem = $list.find('li');
$(".dropdown .title").click(function () { if( $container.height() > 0) { closeMenu(this); } else { openMenu(this); }
});
$(".dropdown-menu li").click(function () { closeMenu(this);
});
function closeMenu(el) { $(el).closest('.dropdown').toggleClass("closed").find(".title").text($(el).text()); $container.css("height", 0); $list.css( "top", 0 );
}
function openMenu(el) { $(el).parent().toggleClass("closed"); $container.css({ height: 200 }) .mousemove(function(e) { var heightDiff = $list.height() / $container.height(), offset = $container.offset(), relativeY = (e.pageY - offset.top), top = relativeY*heightDiff > $list.height()-$container.height() ? $list.height()-$container.height() : relativeY*heightDiff; $list.css("top", -top); });
}
Dropdown - Script Codes
Dropdown - Script Codes
Home Page Home
Developer Hampus Persson
Username hmps
Uploaded September 13, 2022
Rating 4.5
Size 4,452 Kb
Views 34,408
Do you need developer help for 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!

Hampus Persson (hmps) Script Codes
Name
Slide like Mailbox
Filter list
The media object
Typeahead Dropdown
Slider
Test for pseudo element animation
Rotating cube
FlowText.js
Login screen
Pulsating heart
Create amazing sales emails 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!