2017-08-08 17:41:40 -04:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
< meta name = "description" content = "Add beautiful menus to your app with dropdowns." >
< link rel = "icon" href = "../source/img/favicon.png" >
2017-08-09 11:22:09 -04:00
< link rel = "stylesheet" href = "../dist/shoelace.css" >
2017-08-08 17:41:40 -04:00
< link rel = "stylesheet" href = "../source/css/_docs.css" >
< link rel = "stylesheet" href = "https://cdn.rawgit.com/AGMStudio/prism-theme-one-dark/f81fe477/prism-onedark.css" >
< title > Dropdowns< / title >
< / head >
< body >
< header id = "head" class = "text-center" >
< h1 >
< a href = "../index.html" >
< img src = "../source/img/wordmark.svg" alt = "Shoelace logo" >
< / a >
< / h1 >
2017-08-29 17:54:27 -04:00
2017-08-13 15:41:38 -04:00
< p class = "text-secondary text-small" >
2017-08-08 17:41:40 -04:00
A back to the basics CSS starter kit. For when you don’
< / p >
< / header >
2017-08-26 10:04:07 -04:00
< main class = "container" >
< div class = "row" >
< div class = "col-md-3" >
< ul id = "nav" >
< li > < a href = "installing.html" > Installing< / a > < / li >
< li > < a href = "customizing.html" > Customizing< / a > < / li >
< li > < a href = "content.html" > Content< / a > < / li >
< li > < a href = "alerts.html" > Alerts< / a > < / li >
< li > < a href = "badges.html" > Badges< / a > < / li >
< li > < a href = "buttons.html" > Buttons< / a > < / li >
< li > < a href = "dropdowns.html" > Dropdowns< / a > < / li >
2017-08-30 11:58:46 -04:00
< li > < a href = "file-buttons.html" > File Buttons< / a > < / li >
2017-08-26 10:04:07 -04:00
< li > < a href = "forms.html" > Forms< / a > < / li >
< li > < a href = "grid-system.html" > Grid System< / a > < / li >
< li > < a href = "loaders.html" > Loaders< / a > < / li >
< li > < a href = "progress-bars.html" > Progress Bars< / a > < / li >
< li > < a href = "switches.html" > Switches< / a > < / li >
< li > < a href = "tabs.html" > Tabs< / a > < / li >
< li > < a href = "tables.html" > Tables< / a > < / li >
< li > < a href = "utilities.html" > Utilities< / a > < / li >
< li > < a href = "icons.html" > Icons< / a > < / li >
< li > < a href = "browser-support.html" > Browser Support< / a > < / li >
< li > < a href = "attribution.html" > Attribution< / a > < / li >
< / ul >
< / div >
< div class = "col-md-9" >
< div id = "content" >
< h2 id = "dropdowns" > Dropdowns< / h2 >
2017-08-08 17:41:40 -04:00
< p > Dropdowns can be created using the markup below. You can use a < code > < button> < / code > or an < code > < a> < / code > as a trigger. Dropdown indicators (i.e. carets) are added for you. Menu items are simply < code > < a> < / code > elements. Dividers are simply < code > < hr> < / code > elements.< / p >
< p > Note the class names used for the main container, the trigger, and the menu. Additionally, menu items can be disabled by adding the < code > disabled< / code > class. Menu items can also be given a checked state using the < code > checked< / code > class.< / p >
2017-08-18 14:27:07 -04:00
< p > To disable a dropdown entirely, add the < code > disabled< / code > property to the dropdown trigger if it’ ’ < code > disabled< / code > class instead. When a dropdown is activated, it will receive the < code > active< / code > class and the menu will show.< / p >
2017-08-31 12:23:47 -04:00
< p > Headings can be created with the < code > dropdown-heading< / code > class.< / p >
2017-08-08 17:41:40 -04:00
< pre > < code class = "lang-html" > < div class=" dropdown" >
< button type=" button" class=" dropdown-trigger" > Dropdown< /button>
< div class=" dropdown-menu" >
< a href=" #" > Item 1< /a>
< a href=" #" > Item 2< /a>
< a href=" #" > Item 3< /a>
< a href=" #" class=" checked" > Checked< /a>
< a href=" #" class=" disabled" > Disabled< /a>
< hr>
2017-08-31 12:23:47 -04:00
< div class=" dropdown-heading" > Heading< /div>
2017-08-08 17:41:40 -04:00
< a href=" #" > More...< /a>
< /div>
< /div>
< / code > < / pre >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-08 17:41:40 -04:00
< div class = "dropdown" >
< button type = "button" class = "dropdown-trigger" > Dropdown< / button >
< div class = "dropdown-menu" >
< a href = "#" > Item 1< / a >
< a href = "#" > Item 2< / a >
< a href = "#" > Item 3< / a >
< a href = "#" class = "checked" > Checked< / a >
< a href = "#" class = "disabled" > Disabled< / a >
< hr >
2017-08-31 12:23:47 -04:00
< div class = "dropdown-heading" > Heading< / div >
2017-08-08 17:41:40 -04:00
< a href = "#" > More...< / a >
< / div >
< / div >
< / div >
< p > Use the < code > dropdown-top< / code > and < code > dropdown-left< / code > modifiers to change the positioning of the menu. You can combine these modifiers as needed.< / p >
2017-08-13 17:08:21 -04:00
< pre > < code class = "lang-html" > < div class=" dropdown dropdown-top" >
2017-08-08 17:41:40 -04:00
...
< /div>
2017-08-13 17:08:21 -04:00
< div class=" dropdown dropdown-left" >
2017-08-08 17:41:40 -04:00
...
< /div>
< div class=" dropdown dropdown-top dropdown-left" >
...
< /div>
< / code > < / pre >
2017-08-23 09:59:22 -04:00
< div class = "input-field" >
2017-08-13 17:08:21 -04:00
< div class = "dropdown dropdown-top" >
< button type = "button" class = "dropdown-trigger" > Top< / button >
2017-08-08 17:41:40 -04:00
< div class = "dropdown-menu" >
< a href = "#" > Item 1< / a >
< a href = "#" > Item 2< / a >
< a href = "#" > Item 3< / a >
< / div >
< / div >
2017-08-13 17:08:21 -04:00
< div class = "dropdown dropdown-left" >
< button type = "button" class = "dropdown-trigger" > Left< / button >
2017-08-08 17:41:40 -04:00
< div class = "dropdown-menu" >
< a href = "#" > Item 1< / a >
< a href = "#" > Item 2< / a >
< a href = "#" > Item 3< / a >
< / div >
< / div >
< div class = "dropdown dropdown-top dropdown-left" >
< button type = "button" class = "dropdown-trigger" > Top Left< / button >
< div class = "dropdown-menu" >
< a href = "#" > Item 1< / a >
< a href = "#" > Item 2< / a >
< a href = "#" > Item 3< / a >
< / div >
< / div >
< / div >
< p > Dropdowns with button triggers can be used inside input groups.< / p >
2017-08-13 15:41:38 -04:00
< pre > < code class = "lang-html" > < div class=" input-group" >
< span class=" input-addon" > $< /span>
< input type=" text" placeholder=" 10.00" >
< div class=" dropdown dropdown-left" >
< button type=" button" class=" dropdown-trigger" > Currency< /button>
< div class=" dropdown-menu" >
< a href=" #" class=" checked" > USD< /a>
< a href=" #" > AUD< /a>
< a href=" #" > CAD< /a>
< a href=" #" > GBP< /a>
< /div>
< /div>
< /div>
< / code > < / pre >
2017-08-08 17:41:40 -04:00
< div class = "input-group" >
< span class = "input-addon" > $< / span >
< input type = "text" placeholder = "10.00" >
2017-08-13 15:41:38 -04:00
2017-08-08 17:41:40 -04:00
< div class = "dropdown dropdown-left" >
< button type = "button" class = "dropdown-trigger" > Currency< / button >
< div class = "dropdown-menu" >
< a href = "#" class = "checked" > USD< / a >
< a href = "#" > AUD< / a >
< a href = "#" > CAD< / a >
< a href = "#" > GBP< / a >
< / div >
< / div >
< / div >
2017-08-29 17:53:59 -04:00
< h3 id = "interactivity" > Interactivity< / h3 >
< p > Dropdowns require < code > shoelace.js< / code > for interactivity. You don’ < / p >
< p > There is no JavaScript API. Shoelace’ < / p >
2017-08-08 17:41:40 -04:00
< ul >
< li > < code > show< / code > – < / li >
< li > < code > hide< / code > – < / li >
< li > < code > select< / code > – < / li >
< / ul >
< p > This example will log all three events for a dropdown with an id of < code > my-dropdown< / code > .< / p >
< pre > < code class = "lang-javascript" > $(' #my-dropdown' )
.on(' show' , function(event) {
console.log(' show' , event.target);
})
.on(' hide' , function(event) {
console.log(' hide' , event.target);
})
.on(' select' , function(event, item) {
console.log(' select' , event.target, item);
2017-09-01 17:03:37 -04:00
2017-09-01 17:13:46 -04:00
// Tip: Use event.preventDefault() to
2017-09-01 17:03:37 -04:00
// intercept the original click event.
2017-08-08 17:41:40 -04:00
});
2017-08-29 17:53:59 -04:00
< / code > < / pre >
< p > To show or hide a dropdown programmatically, just add or remove the < code > active< / code > class to the dropdown.< / p >
< pre > < code class = "lang-javascript" > // Show the dropdown
$(' #my-dropdown' ).addClass(' active' );
// Hide the dropdown
$(' #my-dropdown' ).removeClass(' active' );
2017-08-08 17:41:40 -04:00
< / code > < / pre >
2017-08-26 10:04:07 -04:00
< / div >
< / div >
2017-08-08 17:41:40 -04:00
< / main >
< footer id = "foot" >
< a href = "../index.html" >
< img src = "../source/img/wordmark.svg" alt = "Shoelace logo" >
< / a >
2017-08-18 14:57:46 -04:00
2017-08-13 15:41:38 -04:00
< p class = "text-small text-secondary" >
2017-08-30 18:02:56 -04:00
1.0.0-beta22
2017-08-08 17:41:40 -04:00
< / p >
2017-08-16 21:34:27 -04:00
< p class = "mar-y-sm text-center" >
2017-08-08 17:41:40 -04:00
< a class = "github-button" href = "https://github.com/claviska/shoelace-css/fork" data-size = "large" aria-label = "Fork claviska/shoelace-css on GitHub" > Fork< / a >
< a class = "github-button" href = "https://github.com/claviska/shoelace-css/releases" data-icon = "octicon-cloud-download" data-size = "large" aria-label = "Download claviska/shoelace-css on GitHub" > Download< / a >
< a class = "github-button" href = "https://github.com/claviska/shoelace-css/issues" data-icon = "octicon-issue-opened" data-size = "large" aria-label = "Issue claviska/shoelace-css on GitHub" > Report a Bug< / a >
< a class = "github-button" href = "https://github.com/claviska/shoelace-css" data-icon = "octicon-star" data-size = "large" data-show-count = "true" aria-label = "Star claviska/shoelace-css on GitHub" > Star< / a >
< / p >
2017-08-18 14:57:46 -04:00
2017-08-08 17:41:40 -04:00
< p >
2017-08-13 15:57:30 -04:00
< a href = "https://twitter.com/shoelacecss" class = "button button-info" style = "margin-bottom: 1.2rem;" > Follow< / a >
< a href = "https://paypal.me/claviska" class = "button button-success" style = "margin-bottom: 1.2rem;" > Donate< / a >
2017-08-08 17:41:40 -04:00
< / p >
2017-08-18 14:57:46 -04:00
< p class = "text-small text-secondary" >
< a href = "https://keycdn.com/" class = "text-secondary" > Accelerated by KeyCDN< / a > ·
© A Beautiful Site, LLC
< / p >
2017-08-08 17:41:40 -04:00
< / footer >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.min.js" > < / script >
2017-08-09 11:22:09 -04:00
< script src = "../dist/shoelace.js" > < / script >
2017-08-08 17:41:40 -04:00
< script >
$(function() {
// Highlight current nav item
$('#nav a').each(function() {
if(this.pathname === location.pathname) {
$(this).addClass('current');
}
});
2017-09-01 23:59:53 -04:00
// Intercept dropdown clicks for the demo
$('.dropdown').on('select', function(event) {
event.preventDefault();
});
2017-08-08 17:41:40 -04:00
});
< / script >
< script async defer src = "https://buttons.github.io/buttons.js" > < / script >
< / body >
< / html >
