Created
July 3, 2011 22:44
-
-
Save JamieLottering/1062688 to your computer and use it in GitHub Desktop.
DropKick Examples
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .dk_theme_orange { | |
| background: #ffffff; | |
| background: -moz-linear-gradient(top, | |
| #ffffff 0%, | |
| #f1f1f1 50%, | |
| #e1e1e1 51%, | |
| #f6f6f6 100% | |
| ); | |
| background: -webkit-gradient(linear, | |
| left top, | |
| left bottom, | |
| color-stop(0%,#ffffff), | |
| color-stop(50%,#f1f1f1), | |
| color-stop(51%,#e1e1e1), | |
| color-stop(100%,#f6f6f6) | |
| ); | |
| background: -webkit-linear-gradient(top, | |
| #ffffff 0%, | |
| #f1f1f1 50%, | |
| #e1e1e1 51%, | |
| #f6f6f6 100% | |
| ); | |
| background: -o-linear-gradient(top, | |
| #ffffff 0%, | |
| #f1f1f1 50%, | |
| #e1e1e1 51%, | |
| #f6f6f6 100% | |
| ); | |
| background: -ms-linear-gradient(top, | |
| #ffffff 0%, | |
| #f1f1f1 50%, | |
| #e1e1e1 51%, | |
| #f6f6f6 100% | |
| ); | |
| background: linear-gradient(top, | |
| #ffffff 0%, | |
| #f1f1f1 50%, | |
| #e1e1e1 51%, | |
| #f6f6f6 100% | |
| ); | |
| } | |
| .dk_theme_orange .dk_options a:hover, | |
| .dk_theme_orange .dk_option_current a { | |
| background-color: #E15A01; | |
| border-bottom-color: #604A42; | |
| color: #fff; | |
| text-shadow: #604A42 0 1px 0; | |
| } | |
| .dk_theme_orange .dk_toggle, | |
| .dk_theme_orange.dk_open .dk_toggle { | |
| background-color: transparent; | |
| } | |
| .dk_theme_orange.dk_focus .dk_toggle{ | |
| box-shadow: 0 0 5px #E15A01; | |
| -moz-box-shadow: 0 0 5px #E15A01; | |
| -webkit-box-shadow: 0 0 5px #E15A01; | |
| } | |
| .dk_theme_black { | |
| background: #aebcbf; | |
| background: -moz-linear-gradient(top, | |
| #aebcbf 0%, | |
| #6e7774 50%, | |
| #0a0e0a 51%, | |
| #0a0809 100% | |
| ); | |
| background: -webkit-gradient(linear, | |
| left top, | |
| left bottom, | |
| color-stop(0%,#aebcbf), | |
| color-stop(50%,#6e7774), | |
| color-stop(51%,#0a0e0a), | |
| color-stop(100%,#0a0809) | |
| ); | |
| background: -webkit-linear-gradient(top, | |
| #aebcbf 0%, | |
| #6e7774 50%, | |
| #0a0e0a 51%, | |
| #0a0809 100% | |
| ); | |
| background: -o-linear-gradient(top, | |
| #aebcbf 0%, | |
| #6e7774 50%, | |
| #0a0e0a 51%, | |
| #0a0809 100% | |
| ); | |
| background: -ms-linear-gradient(top, | |
| #aebcbf 0%, | |
| #6e7774 50%, | |
| #0a0e0a 51%, | |
| #0a0809 100% | |
| ); | |
| background: linear-gradient(top, | |
| #aebcbf 0%, | |
| #6e7774 50%, | |
| #0a0e0a 51%, | |
| #0a0809 100% | |
| ); | |
| } | |
| .dk_theme_black .dk_toggle, | |
| .dk_theme_black.dk_open .dk_toggle { | |
| background-color: transparent; | |
| color: #fff; | |
| text-shadow: none; | |
| } | |
| .dk_theme_black .dk_options a { | |
| background-color: #333; | |
| color: #fff; | |
| text-shadow: none; | |
| } | |
| .dk_theme_black .dk_options a:hover, | |
| .dk_theme_black .dk_option_current a { | |
| background-color: #E15A01; | |
| color: #fff; | |
| text-shadow: #604A42 0 1px 0; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('.change').dropkick({ | |
| change: function (value, label) { | |
| $('body').css({ background : value }).find('legend').css({ color: value }); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('.default').dropkick(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('.custom_theme').dropkick({ | |
| theme: 'black', | |
| change: function (value, label) { | |
| $(this).dropkick('theme', value); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Container */ | |
| .dk_mytheme .dk_container {} | |
| .dk_mytheme a {} | |
| /* Toggle */ | |
| .dk_mytheme .dk_toggle {} | |
| .dk_mytheme .dk_toggle:hover {} | |
| /* Focus State */ | |
| .dk_mytheme.dk_focus, | |
| .dk_mytheme:focus {} | |
| .dk_mytheme.dk_focus .dk_toggle {} | |
| /* Open State */ | |
| .dk_mytheme.dk_open {} | |
| .dk_mytheme.dk_open .dk_toggle {} | |
| /* Options Menu */ | |
| .dk_mytheme .dk_options {} | |
| .dk_mytheme .dk_options a {} | |
| .dk_mytheme .dk_options a:hover, | |
| .dk_mytheme .dk_option_current a {} | |
| /* Inner options */ | |
| .dk_mytheme .dk_options_inner {} | |
| /* Set a width property here */ | |
| .dk_mytheme .dk_options_inner, | |
| .dk_mytheme.dk_touch .dk_options {} |
Hi,
Thanks for the wonderful work, I have came across a issue when using this plug-in. When I append many list item such that it cross the max-height defined, the scroll bar appears but unable to scroll using the touch-pad of my laptop, I could only scroll through my mouse.
Please help me out in fixing this issue
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
How can I use an AJAX cascade dropdown data?
I work with a PHP file and I get the result in JSON format, but when I use this plugin I can't see the data into de dropdown.
Can you help me?
Thanks