best 0.0.1 → 0.0.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +19 -0
- data/framework/best/best.rb +32 -0
- data/framework/best/stylesheets/_best.scss +15 -0
- data/framework/best/stylesheets/best/_button.scss +49 -0
- data/framework/best/stylesheets/best/_effects.scss +5 -0
- data/framework/best/stylesheets/best/_form.scss +6 -0
- data/framework/best/stylesheets/best/_layout.scss +7 -0
- data/framework/best/stylesheets/best/_navigation.scss +8 -0
- data/framework/best/stylesheets/best/_reset.scss +4 -0
- data/framework/best/stylesheets/best/_utilities.scss +4 -0
- data/framework/best/stylesheets/best/effects/_iterative.scss +15 -0
- data/framework/best/stylesheets/best/effects/_keyframes.scss +121 -0
- data/framework/best/stylesheets/best/form/_form-layout.scss +120 -0
- data/framework/best/stylesheets/best/form/_form-style.scss +41 -0
- data/framework/best/stylesheets/best/form/_form-validation.scss +25 -0
- data/framework/best/stylesheets/best/layout/_dl-horizontal.scss +32 -0
- data/framework/best/stylesheets/best/layout/_equal-heights.scss +70 -0
- data/framework/best/stylesheets/best/layout/_layout-center.scss +20 -0
- data/framework/best/stylesheets/best/layout/_mediablock.scss +34 -0
- data/framework/best/stylesheets/best/navigation/_navigation-breadcrumb.scss +59 -0
- data/framework/best/stylesheets/best/navigation/_navigation-dropdown.scss +39 -0
- data/framework/best/stylesheets/best/navigation/_navigation-horizontal.scss +34 -0
- data/framework/best/stylesheets/best/navigation/_navigation.scss +28 -0
- data/framework/best/stylesheets/best/navigation/_tinynav.scss +18 -0
- data/framework/best/stylesheets/best/reset/_normalize.scss +376 -0
- data/framework/best/stylesheets/best/utilities/_em.scss +6 -0
- data/template/breakpoints.html +89 -0
- data/template/codekit-config.json +1142 -0
- data/template/colors.html +115 -0
- data/template/components/custom-select/arrow.gif +0 -0
- data/template/components/custom-select/custom-select.css +23 -0
- data/template/components/custom-select/custom-select.html +31 -0
- data/template/components/custom-select/custom-select.js +9 -0
- data/template/components/custom-select/customSelect.jquery.js +56 -0
- data/template/components/custom-select/customSelect.jquery.min.js +1 -0
- data/template/components/dropdown/dropdown.css +54 -0
- data/template/components/dropdown/dropdown.html +34 -0
- data/template/components/dropdown/dropdown.js +50 -0
- data/template/components/example component/component.css +5 -0
- data/template/components/example component/component.html +13 -0
- data/template/components/example component/component.js b/data/template/components/example → component/component.js +0 -0
- data/template/components/fancybox/CHANGELOG.md +115 -0
- data/template/components/fancybox/README.md +217 -0
- data/template/components/fancybox/component.json +8 -0
- data/template/components/fancybox/demo/1_b.jpg +0 -0
- data/template/components/fancybox/demo/1_s.jpg +0 -0
- data/template/components/fancybox/demo/2_b.jpg +0 -0
- data/template/components/fancybox/demo/2_s.jpg +0 -0
- data/template/components/fancybox/demo/3_b.jpg +0 -0
- data/template/components/fancybox/demo/3_s.jpg +0 -0
- data/template/components/fancybox/demo/4_b.jpg +0 -0
- data/template/components/fancybox/demo/4_s.jpg +0 -0
- data/template/components/fancybox/demo/5_b.jpg +0 -0
- data/template/components/fancybox/demo/5_s.jpg +0 -0
- data/template/components/fancybox/demo/ajax.txt +15 -0
- data/template/components/fancybox/demo/iframe.html +26 -0
- data/template/components/fancybox/demo/index.html +307 -0
- data/template/components/fancybox/lib/jquery-1.8.2.min.js +2 -0
- data/template/components/fancybox/lib/jquery.mousewheel-3.0.6.pack.js +13 -0
- data/template/components/fancybox/source/blank.gif +0 -0
- data/template/components/fancybox/source/fancybox_loading.gif +0 -0
- data/template/components/fancybox/source/fancybox_overlay.png +0 -0
- data/template/components/fancybox/source/fancybox_sprite.png +0 -0
- data/template/components/fancybox/source/helpers/fancybox_buttons.png +0 -0
- data/template/components/fancybox/source/helpers/jquery.fancybox-buttons.css +96 -0
- data/template/components/fancybox/source/helpers/jquery.fancybox-buttons.js +121 -0
- data/template/components/fancybox/source/helpers/jquery.fancybox-media.js +196 -0
- data/template/components/fancybox/source/helpers/jquery.fancybox-thumbs.css +54 -0
- data/template/components/fancybox/source/helpers/jquery.fancybox-thumbs.js +162 -0
- data/template/components/fancybox/source/jquery.fancybox.css +249 -0
- data/template/components/fancybox/source/jquery.fancybox.js +1985 -0
- data/template/components/fancybox/source/jquery.fancybox.pack.js +45 -0
- data/template/components/jquery/component.json +14 -0
- data/template/components/jquery/composer.json +23 -0
- data/template/components/jquery/jquery.js +9472 -0
- data/template/components/jquery/jquery.min.js +2 -0
- data/template/config.rb +25 -0
- data/template/css/style.css +1094 -0
- data/template/fancybox.html +118 -0
- data/template/forms.html +132 -0
- data/template/grid.html +122 -0
- data/template/index.html +116 -0
- data/template/jade/--- from cybex as inspiration/keyvisuals.jade +37 -0
- data/template/jade/--- from cybex as inspiration/m-carousel.jade +37 -0
- data/template/jade/--- from cybex as inspiration/m-faq.jade +23 -0
- data/template/jade/--- from cybex as inspiration/m-keyvisual.jade +55 -0
- data/template/jade/--- from cybex as inspiration/m-search.jade +3 -0
- data/template/jade/--- from cybex as inspiration/m-slideshow.jade +12 -0
- data/template/jade/--- from cybex as inspiration/m-social.jade +10 -0
- data/template/jade/breakpoints.jade +26 -0
- data/template/jade/colors.jade +32 -0
- data/template/jade/fancybox.jade +34 -0
- data/template/jade/forms.jade +39 -0
- data/template/jade/grid.jade +36 -0
- data/template/jade/includes/module-development.jade +1 -0
- data/template/jade/includes/nav-development.jade +27 -0
- data/template/jade/includes/nav-meta.jade +6 -0
- data/template/jade/includes/nav-primary.jade +5 -0
- data/template/jade/includes/nav-secondary.jade +18 -0
- data/template/jade/index.jade +33 -0
- data/template/jade/layouts/layout-footer.jade +5 -0
- data/template/jade/layouts/layout-header.jade +3 -0
- data/template/jade/layouts/layout-html5.jade +26 -0
- data/template/jade/layouts/layout-page.jade +40 -0
- data/template/jade/mixins/form-helpers.jade +10 -0
- data/template/jade/mixins/mixin-menu.jade +3 -0
- data/template/jade/typography.jade +38 -0
- data/template/js/footer.js +16 -0
- data/template/js/footer.min.js +3 -0
- data/template/js/header.js +1 -0
- data/template/js/header.min.js +3 -0
- data/template/js/main.js +18 -0
- data/template/js/main.min.js +1 -0
- data/template/js/vendor/jquery.flexslider.min.js +6 -0
- data/template/js/vendor/modernizr-custom.js +4 -0
- data/template/readme.md +6 -0
- data/template/sass/_base.scss +66 -0
- data/template/sass/_config.scss +58 -0
- data/template/sass/_labs.scss +4 -0
- data/template/sass/_layout.scss +26 -0
- data/template/sass/_m-breakpoints.scss +42 -0
- data/template/sass/_m-colors.scss +39 -0
- data/template/sass/_m-navigation.scss +43 -0
- data/template/sass/_m-offcanvas.scss +60 -0
- data/template/sass/_module.scss +63 -0
- data/template/sass/style.scss +38 -0
- data/template/typography.html +120 -0
- metadata +130 -3
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
|
|
2
|
+
<!--include mixins/m-keyvisual--><!DOCTYPE html><!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--><!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--><!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]--><!--[if gt IE 8]><!-->
|
|
3
|
+
<html lang="en" dir="ltr" class="no-js"><!--<![endif]-->
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
8
|
+
<link rel="stylesheet" href="css/style.css">
|
|
9
|
+
<script src="js/header.min.js" type="text/javascript"></script>
|
|
10
|
+
<!--script(type="text/javascript", src="http://use.typekit.net/uwa6eml.js")-->
|
|
11
|
+
<!--| <script type="text/javascript">try{Typekit.load();}catch(e){}</script>-->
|
|
12
|
+
<title>Colors</title>
|
|
13
|
+
</head>
|
|
14
|
+
<body class="page-colors">
|
|
15
|
+
<div class="l-site">
|
|
16
|
+
<header class="l-header">
|
|
17
|
+
<div class="inner">
|
|
18
|
+
<nav class="m-nav-primary">
|
|
19
|
+
<ul>
|
|
20
|
+
<li><a href="index.html" id="bestLink">Best</a></li>
|
|
21
|
+
<!--li: mixin menu-item('Best', 'index.html')-->
|
|
22
|
+
<li class="sidebarToggleContainer"><a href="#" id="sidebarToggle">Toggle sidebar</a></li>
|
|
23
|
+
</ul>
|
|
24
|
+
</nav>
|
|
25
|
+
</div>
|
|
26
|
+
</header>
|
|
27
|
+
<div role="main" class="l-main">
|
|
28
|
+
<div class="inner">
|
|
29
|
+
<div class="l-primary">
|
|
30
|
+
<article class="article">
|
|
31
|
+
<h1>Colors</h1>
|
|
32
|
+
<p>Let's see the default color values:</p>
|
|
33
|
+
<div class="color color--white">$white</div>
|
|
34
|
+
<div class="color color--lightgray">$lightgray</div>
|
|
35
|
+
<div class="color color--gray">$gray</div>
|
|
36
|
+
<div class="color color--darkgray">$darkgray</div>
|
|
37
|
+
<div class="color color--black">$black</div>
|
|
38
|
+
<div class="color color--anchor-color">$anchor-color</div>
|
|
39
|
+
<div class="color color--anchor-color-hover">$anchor-color-hover</div>
|
|
40
|
+
<div class="color color--anchor-color-active">$anchor-color-active</div>
|
|
41
|
+
</article>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="l-secondary">
|
|
44
|
+
<nav class="m-menu m-menu-secondary"><!--ul
|
|
45
|
+
<li class="category">Base
|
|
46
|
+
<ul>
|
|
47
|
+
<li><a href="colors.html" class="selected">Colors</a>
|
|
48
|
+
</li>
|
|
49
|
+
<li><a href="typography.html" class="">Typography</a>
|
|
50
|
+
</li>
|
|
51
|
+
<li><a href="forms.html" class="">Forms</a>
|
|
52
|
+
</li>
|
|
53
|
+
</ul>
|
|
54
|
+
</li>
|
|
55
|
+
<li class="category">Layout
|
|
56
|
+
<ul>
|
|
57
|
+
<li><a href="grid.html" class="">Grid</a>
|
|
58
|
+
</li>
|
|
59
|
+
</ul>
|
|
60
|
+
</li>
|
|
61
|
+
<li class="expanded"><a href="#">Seite Level 1</a>
|
|
62
|
+
<ul>
|
|
63
|
+
<li><a href="#">Seite Level 2</a></li>
|
|
64
|
+
</ul>
|
|
65
|
+
</li>-->
|
|
66
|
+
</nav>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="l-development">
|
|
71
|
+
<nav class="m-nav-development">
|
|
72
|
+
<ul>
|
|
73
|
+
<li class="category">Base
|
|
74
|
+
<ul>
|
|
75
|
+
<li><a href="colors.html" class="selected">Colors</a>
|
|
76
|
+
</li>
|
|
77
|
+
<li><a href="typography.html" class="">Typography</a>
|
|
78
|
+
</li>
|
|
79
|
+
<li><a href="forms.html" class="">Forms</a>
|
|
80
|
+
</li>
|
|
81
|
+
</ul>
|
|
82
|
+
</li>
|
|
83
|
+
<li class="category">Layout
|
|
84
|
+
<ul>
|
|
85
|
+
<li><a href="grid.html" class="">Grid</a>
|
|
86
|
+
</li>
|
|
87
|
+
<li><a href="breakpoints.html" class="">Breakpoints</a>
|
|
88
|
+
</li>
|
|
89
|
+
</ul>
|
|
90
|
+
</li>
|
|
91
|
+
<li class="category">Components
|
|
92
|
+
<ul>
|
|
93
|
+
<li><a href="fancybox.html" class="">Fancybox</a>
|
|
94
|
+
</li>
|
|
95
|
+
<li><a href="components/dropdown/dropdown.html" class="">Dropdown</a>
|
|
96
|
+
</li>
|
|
97
|
+
</ul>
|
|
98
|
+
</li><!--li.expanded<a href="#">Seite Level 1</a>
|
|
99
|
+
<ul>
|
|
100
|
+
<li><a href="#">Seite Level 2</a></li><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a><a href="#" class="">Seite Level 2</a>
|
|
101
|
+
</ul>-->
|
|
102
|
+
</ul>
|
|
103
|
+
</nav>
|
|
104
|
+
</div>
|
|
105
|
+
<!--.l-sticky-footer-->
|
|
106
|
+
</div>
|
|
107
|
+
<footer class="l-footer">
|
|
108
|
+
<div class="inner">
|
|
109
|
+
<!--include layouts/layout-footer.jade-->
|
|
110
|
+
</div>
|
|
111
|
+
</footer>
|
|
112
|
+
<script src="js/footer.min.js"></script>
|
|
113
|
+
<script src="js/main.js"></script>
|
|
114
|
+
</body>
|
|
115
|
+
</html>
|
|
Binary file
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
select.styled {
|
|
2
|
+
width: 500px;
|
|
3
|
+
}
|
|
4
|
+
.customSelect {
|
|
5
|
+
display: inline-block;
|
|
6
|
+
padding: 0.3em 0.5em;
|
|
7
|
+
border: 1px solid #e7dab0;
|
|
8
|
+
background: #f5f0de;
|
|
9
|
+
}
|
|
10
|
+
.customSelectInner {
|
|
11
|
+
display: block;
|
|
12
|
+
padding-right: 0.5em;
|
|
13
|
+
background: url(arrow.gif) no-repeat center right;
|
|
14
|
+
}
|
|
15
|
+
.customSelect.changed {
|
|
16
|
+
/* style after user has made a selection */
|
|
17
|
+
}
|
|
18
|
+
.customSelect.customSelectFocus {
|
|
19
|
+
/* style after user has made a selection */
|
|
20
|
+
}
|
|
21
|
+
.customSelect.customSelectOpen {
|
|
22
|
+
/* style after user has made a selection */
|
|
23
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="stylesheet" href="custom-select.css">
|
|
5
|
+
<title>Dropdowns</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
|
|
9
|
+
<form action="">
|
|
10
|
+
<select name="" id="">
|
|
11
|
+
<option value="">Choose</option>
|
|
12
|
+
<option value="cheese">Cheese</option>
|
|
13
|
+
<option value="cake">Cake something</option>
|
|
14
|
+
</select>
|
|
15
|
+
<select class="styled" name="" id="">
|
|
16
|
+
<option value="">Choose</option>
|
|
17
|
+
<option value="cheese">Cheese</option>
|
|
18
|
+
<option value="cake">Cake something</option>
|
|
19
|
+
</select>
|
|
20
|
+
</form>
|
|
21
|
+
|
|
22
|
+
<h1>Custom Select Box CSS Style Plugin: jQuery + CSS</h1>
|
|
23
|
+
<p>This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable <span> element in order to acheive your desired look. Since it makes use of default browser functionality, it can be treated just like any ordinary HTML select box. This concept is based on <a href="http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/">Ryan Fait's method</a> of styling select boxes, but as a jQuery Plugin.</p>
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
|
27
|
+
<script src="customSelect.jquery.js"></script>
|
|
28
|
+
<script src="custom-select.js"></script>
|
|
29
|
+
|
|
30
|
+
</body>
|
|
31
|
+
</html>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/*! jQuery.customSelect() - v0.2.1 - 2012-12-17 */
|
|
2
|
+
|
|
3
|
+
(function($){
|
|
4
|
+
$.fn.extend({
|
|
5
|
+
|
|
6
|
+
customSelect : function(options) {
|
|
7
|
+
if(typeof document.body.style.maxHeight != "undefined"){ /* filter out <= IE6 */
|
|
8
|
+
|
|
9
|
+
var defaults = {
|
|
10
|
+
customClass: null,
|
|
11
|
+
mapClass:true,
|
|
12
|
+
mapStyle:true
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
options = $.extend(defaults, options);
|
|
16
|
+
|
|
17
|
+
return this.each(function() {
|
|
18
|
+
var $this = $(this);
|
|
19
|
+
var customSelectInnerSpan = $('<span class="customSelectInner" />');
|
|
20
|
+
var customSelectSpan = $('<span class="customSelect" />').append(customSelectInnerSpan);
|
|
21
|
+
$this.after(customSelectSpan);
|
|
22
|
+
|
|
23
|
+
if(options.customClass) { customSelectSpan.addClass(options.customClass); }
|
|
24
|
+
if(options.mapClass) { customSelectSpan.addClass($this.attr('class')); }
|
|
25
|
+
if(options.mapStyle) { customSelectSpan.attr('style', $this.attr('style')); }
|
|
26
|
+
|
|
27
|
+
$this.bind('update',function(){
|
|
28
|
+
$this.change();
|
|
29
|
+
console.log('updated');
|
|
30
|
+
console.log('$(this).outerWidth(): ' + parseInt($this.outerWidth()));
|
|
31
|
+
console.log('customSelectSpan.outerWidth(): ' + parseInt(customSelectSpan.outerWidth()));
|
|
32
|
+
console.log('customSelectSpan.width(): ' + parseInt(customSelectSpan.width()));
|
|
33
|
+
var selectBoxWidth = parseInt($this.outerWidth()) - (parseInt(customSelectSpan.outerWidth()) - parseInt(customSelectSpan.width()) );
|
|
34
|
+
console.log('selectBoxWidth: ' + selectBoxWidth);
|
|
35
|
+
|
|
36
|
+
//customSelectSpan.css({ width: selectBoxWidth });
|
|
37
|
+
customSelectInnerSpan.css({ width:selectBoxWidth });
|
|
38
|
+
var selectBoxHeight = customSelectSpan.outerHeight();
|
|
39
|
+
$this.css({'-webkit-appearance':'menulist-button',width:customSelectSpan.outerWidth(),position:'absolute', opacity:0,height:selectBoxHeight,fontSize:customSelectSpan.css('font-size')});
|
|
40
|
+
}).change(function(){
|
|
41
|
+
var currentSelected = $this.find(':selected');
|
|
42
|
+
var html = currentSelected.html() || ' ';
|
|
43
|
+
customSelectInnerSpan.html(html).parent().addClass('customSelectChanged');
|
|
44
|
+
setTimeout(function(){customSelectSpan.removeClass('customSelectOpen');},60);
|
|
45
|
+
}).bind('mousedown',function(){
|
|
46
|
+
customSelectSpan.toggleClass('customSelectOpen');
|
|
47
|
+
}).focus(function(){
|
|
48
|
+
customSelectSpan.addClass('customSelectFocus');
|
|
49
|
+
}).blur(function(){
|
|
50
|
+
customSelectSpan.removeClass('customSelectFocus customSelectOpen');
|
|
51
|
+
}).trigger('update');
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
})(jQuery);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(a){a.fn.extend({customSelect:function(b){if(typeof document.body.style.maxHeight!="undefined"){var c={customClass:null,mapClass:true,mapStyle:true};var b=a.extend(c,b);return this.each(function(){var d=a(this);var f=a('<span class="customSelectInner" />');var e=a('<span class="customSelect" />').append(f);d.after(e);if(b.customClass){e.addClass(b.customClass)}if(b.mapClass){e.addClass(d.attr("class"))}if(b.mapStyle){e.attr("style",d.attr("style"))}d.bind("update",function(){d.change();var h=parseInt(d.outerWidth())-(parseInt(e.outerWidth())-parseInt(e.width()));e.css({display:"inline-block"});f.css({width:h,display:"inline-block"});var g=e.outerHeight();d.css({"-webkit-appearance":"menulist-button",width:e.outerWidth(),position:"absolute",opacity:0,height:g,fontSize:e.css("font-size")})}).change(function(){var g=d.find(":selected");var h=g.html()||" ";f.html(h).parent().addClass("customSelectChanged");setTimeout(function(){e.removeClass("customSelectOpen")},60)}).bind("mousedown",function(){e.toggleClass("customSelectOpen")}).focus(function(){e.addClass("customSelectFocus")}).blur(function(){e.removeClass("customSelectFocus customSelectOpen")}).trigger("update")})}}})})(jQuery);
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/* necessary styles */
|
|
2
|
+
nav ul { padding: 0; }
|
|
3
|
+
nav li { list-style: none; float: left; position: relative; }
|
|
4
|
+
nav ul ul { display: none; position: absolute;}
|
|
5
|
+
.open > ul { display: block; }
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
/* makeup */
|
|
10
|
+
nav li {
|
|
11
|
+
border: 0.2em solid #fbfbfb;
|
|
12
|
+
}
|
|
13
|
+
nav a {
|
|
14
|
+
display: block;
|
|
15
|
+
padding: 0.5em 1em;
|
|
16
|
+
background: #eee;
|
|
17
|
+
color: blue;
|
|
18
|
+
text-decoration: none;
|
|
19
|
+
}
|
|
20
|
+
nav a:hover {
|
|
21
|
+
background-color: #e1e1e1;
|
|
22
|
+
text-decoration: underline;
|
|
23
|
+
}
|
|
24
|
+
.dropdown > a {
|
|
25
|
+
font-weight: bold;
|
|
26
|
+
cursor: text;
|
|
27
|
+
}
|
|
28
|
+
nav li ul {
|
|
29
|
+
display: none;
|
|
30
|
+
position: absolute;
|
|
31
|
+
left: -0.2em;
|
|
32
|
+
top: 2.1em;
|
|
33
|
+
z-index: 10;
|
|
34
|
+
border: 0.2em solid #000;
|
|
35
|
+
border-top: 0;
|
|
36
|
+
padding: 0.2em 0.1em 0.2em;
|
|
37
|
+
background-color: #fff;
|
|
38
|
+
}
|
|
39
|
+
nav li li {
|
|
40
|
+
float: none;
|
|
41
|
+
}
|
|
42
|
+
nav li ul a {
|
|
43
|
+
background-color: #e1e1e1;
|
|
44
|
+
}
|
|
45
|
+
nav li ul a:hover {
|
|
46
|
+
background-color: #d5d5d5;
|
|
47
|
+
}
|
|
48
|
+
.dropdown.open,
|
|
49
|
+
nav li ul {
|
|
50
|
+
border-color: #000;
|
|
51
|
+
}
|
|
52
|
+
.dropdown.open > a {
|
|
53
|
+
background-color: #e1e1e1;
|
|
54
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<link rel="stylesheet" href="dropdown.css">
|
|
5
|
+
<title>Dropdowns</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
|
|
9
|
+
<nav>
|
|
10
|
+
<ul>
|
|
11
|
+
<li><a href="#">Link</a></li>
|
|
12
|
+
<li><a href="#">Dropdown</a>
|
|
13
|
+
<ul>
|
|
14
|
+
<li><a href="">Link</a></li>
|
|
15
|
+
<li><a href="">Link</a></li>
|
|
16
|
+
<li><a href="">Link</a></li>
|
|
17
|
+
</ul>
|
|
18
|
+
</li>
|
|
19
|
+
<li><a href="#">Another dropdown</a>
|
|
20
|
+
<ul>
|
|
21
|
+
<li><a href="">Link</a></li>
|
|
22
|
+
<li><a href="">Link</a></li>
|
|
23
|
+
<li><a href="">Link</a></li>
|
|
24
|
+
</ul>
|
|
25
|
+
</li>
|
|
26
|
+
<li><a href="#">Link</a></li>
|
|
27
|
+
</ul>
|
|
28
|
+
</nav>
|
|
29
|
+
|
|
30
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
|
31
|
+
<script src="dropdown.js"></script>
|
|
32
|
+
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
|
|
2
|
+
// Find dropdowns
|
|
3
|
+
var $dropdowns = $('nav ul').siblings('a');
|
|
4
|
+
|
|
5
|
+
// Mark dropdowns
|
|
6
|
+
$dropdowns.parent('li').addClass('dropdown');
|
|
7
|
+
|
|
8
|
+
// Toggle dropdowns
|
|
9
|
+
$dropdowns.click(function(event){
|
|
10
|
+
// Prevent default click
|
|
11
|
+
event.preventDefault();
|
|
12
|
+
|
|
13
|
+
// Toggle dropdown
|
|
14
|
+
toggleDropdown($(this));
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
// Clear dropdown dropdowns
|
|
18
|
+
function clearMenus() {
|
|
19
|
+
$dropdowns.each(function() {
|
|
20
|
+
$(this).parent('.dropdown').removeClass('open');
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Clear on click outside
|
|
25
|
+
$('html').click(function() {
|
|
26
|
+
clearMenus();
|
|
27
|
+
});
|
|
28
|
+
$('nav').click(function(event){
|
|
29
|
+
event.stopPropagation();
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
// Clear on ESC press
|
|
33
|
+
$(document).keyup(function(e) {
|
|
34
|
+
if (e.keyCode == 27) {
|
|
35
|
+
clearMenus();
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
// Toggle the dropdown
|
|
40
|
+
function toggleDropdown(element) {
|
|
41
|
+
$parent = element.parent('.dropdown');
|
|
42
|
+
clearMenus();
|
|
43
|
+
|
|
44
|
+
isActive = $parent.hasClass('open');
|
|
45
|
+
if (!isActive) {
|
|
46
|
+
$parent.addClass('open');
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
element.siblings('ul').focus();
|
|
50
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
fancyBox - Changelog
|
|
2
|
+
=========
|
|
3
|
+
|
|
4
|
+
### Version 2.1.3 - October 23, 2012
|
|
5
|
+
|
|
6
|
+
* Fixed #426 - Broken IE7
|
|
7
|
+
* Fixed #423 - Background flickering on iOS
|
|
8
|
+
* Fixed #418 - Automatically Grow/Shrink and Center
|
|
9
|
+
* Updated the script to work with jQuery 1.6
|
|
10
|
+
* Media helper supports YouTube video series
|
|
11
|
+
|
|
12
|
+
### Version 2.1.2 - October 15, 2012
|
|
13
|
+
|
|
14
|
+
* Fixed #414 - Don't allow nextClick if there is only one item
|
|
15
|
+
* Fixed #397 - Button helper 'Menu' not visible in IE7
|
|
16
|
+
* Overlay can be opened/closed manually:
|
|
17
|
+
* $.fancybox.helpers.overlay.open();
|
|
18
|
+
* $.fancybox.helpers.overlay.open({closeClick : false});
|
|
19
|
+
* $.fancybox.helpers.overlay.close();
|
|
20
|
+
* Optimized for Internet Explorer 10 (Windows 8)
|
|
21
|
+
|
|
22
|
+
### Version 2.1.1 - October 01, 2012
|
|
23
|
+
|
|
24
|
+
* Fixed #357 - Converting values like 'auto' in getScalar()
|
|
25
|
+
* Fixed #358 - Updated overlay background image
|
|
26
|
+
* New "fancybox-href" and "fancybox-title" HTML5 data-attributes (#317)
|
|
27
|
+
* Improved helpers:
|
|
28
|
+
* - now they can have a property 'defaults' that contains default settings
|
|
29
|
+
* - updated vimeo and youtube parsers for media helper
|
|
30
|
+
* Content locking now can be turned off
|
|
31
|
+
|
|
32
|
+
### Version 2.1.0 - August 20, 2012
|
|
33
|
+
|
|
34
|
+
* Fixed #103 - DOM element re-injection after closing
|
|
35
|
+
* Fixed #188 - navigation keys inside editable content
|
|
36
|
+
* New animation directions (see https://github.com/fancyapps/fancyBox/issues/233#issuecomment-5512453)
|
|
37
|
+
* New option "iframe" - it is now possible to separate scrolling for iframe and wrapping element; choose to preload
|
|
38
|
+
* New option "swf" - brings back functionality from fancyBox v1
|
|
39
|
+
* Improved media helper - better support for vimeo and youtube; links are now configurable
|
|
40
|
+
* Rewritten overlay helper:
|
|
41
|
+
* - new option "showEarly" - toggles if should be open before of after content is loaded
|
|
42
|
+
* - Facebook-style (https://github.com/fancyapps/fancyBox/issues/24) and therefore uses image for background
|
|
43
|
+
* Option "padding" accepts array (e.g., padding: [15, 50, 10, 5])
|
|
44
|
+
* One of dimensions (width or height) can now be set to "auto" (option "autoSize" needs to be "false")
|
|
45
|
+
* Updated callbacks:
|
|
46
|
+
* - "beforeClose" is now called only once
|
|
47
|
+
* - "afterLoad" receives current and previous object as arguments
|
|
48
|
+
* Method "$.fancybox.update();" recalculates content width/height
|
|
49
|
+
* Updated to work with jQuery v1.8
|
|
50
|
+
|
|
51
|
+
### Version 2.0.6 - April 16, 2012
|
|
52
|
+
|
|
53
|
+
* Fixed #188 - keystrokes in contenteditable
|
|
54
|
+
* Fixed #171 - non-images should not be preloaded
|
|
55
|
+
* Fixed #158 - 'closeClick: true' breaks gallery navigation
|
|
56
|
+
* New "media" helper - detects and displays various media types
|
|
57
|
+
* New option "groupAttr" - name of group selector attribute, default is "data-fancybox-group"
|
|
58
|
+
* New feature - selector expressions in URLs, see #170
|
|
59
|
+
* Improved 'overlay' helper to use "position: fixed"
|
|
60
|
+
* Improved autoSize, fixed wrong height in some cases
|
|
61
|
+
* Improved centering and iframe scrolling for iOS
|
|
62
|
+
* Updated markup, new element '.fancybox-skin' is now used for styling
|
|
63
|
+
|
|
64
|
+
### Version 2.0.5 - February 21, 2012
|
|
65
|
+
|
|
66
|
+
* Fixed #155 - easing for prev/next animations
|
|
67
|
+
* Fixed #153 - overriding "keys" options
|
|
68
|
+
* Fixed #147 - IE7 problem with #hash links
|
|
69
|
+
* Fixed #130 - changing dynamically data-fancybox-group
|
|
70
|
+
* Fixed #126 - obey minWidth/minHeight
|
|
71
|
+
* Fixed #118 - placement of loading icon and navigation arrows
|
|
72
|
+
* Fixed #101 - "index" option not working
|
|
73
|
+
* Fixed #94 - "orig" option not working
|
|
74
|
+
* Fixed #80 - does not work on IE6
|
|
75
|
+
* Fixed #72 - can't set overlay opacity to 0
|
|
76
|
+
* Fixed #63 - properly set gallery index
|
|
77
|
+
* New option "autoCenter" - toggles centering on window resize or scroll, disabled for mobile devices by default
|
|
78
|
+
* New option "autoResize" - toggles responsivity, disabled for mobile devices by default
|
|
79
|
+
* New option "preload" - number of images to preload
|
|
80
|
+
* New feature to target mobile/desktop browsers using CSS, see #108
|
|
81
|
+
* Changed ajax option defaults to "{ dataType: 'html', headers: { 'X-fancyBox': true } }", see #150 and #128
|
|
82
|
+
* Updated loading icon for IE7, IE8
|
|
83
|
+
* Calculates height of the iframe if 'autoSize' is set to 'true' and the iframe is on the same domain as the main page
|
|
84
|
+
|
|
85
|
+
### Version 2.0.4 - December 12, 2011
|
|
86
|
+
|
|
87
|
+
* Fixed #47 - fix overriding properties
|
|
88
|
+
* New option "position" to thumbnail and button helpers
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
### Version 2.0.3 - November 29, 2011
|
|
92
|
+
|
|
93
|
+
* Fixed #29 - broken elastic transitions
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
### Version 2.0.2 - November 28, 2011
|
|
97
|
+
|
|
98
|
+
* Fixed slideshow
|
|
99
|
+
* Fixed scrollbars issue when displayed a very tall image
|
|
100
|
+
* New option "nextClick" - navigate to next gallery item when user clicks the content
|
|
101
|
+
* New option "modal" - to disable navigation and closing
|
|
102
|
+
* Add 'metadata' plugin support
|
|
103
|
+
* Add ability to create groups using 'data-fancybox-group' attribute
|
|
104
|
+
* Updated manual usage to match earlier releases
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
### Version 2.0.1 - November 23, 2011
|
|
108
|
+
|
|
109
|
+
* Fixed keyboard events inside form elements
|
|
110
|
+
* Fixed manual usage
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
### Version 2.0.0 - November 21, 2011
|
|
114
|
+
|
|
115
|
+
First release - completely rewritten, many new features and updated graphics.
|