1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112 | <style>
.text-center {text-align: center;}
*, *:before, *:after {-webkit-border-sizing: border-box; -moz-border-sizing: border-box; border-sizing: border-box;}
.container {width: 240px;background:#173377; margin:0; padding:0;}
.container > ul {list-style:none; padding:0; margin:0;}
.dropdown a {text-decoration: none;}
.dropdown [data-toggle="dropdown"] {position:relative;display:block;background: #400030;color:#FFFFFF;font:13px Arial;border-bottom:1px solid #FBBB22;padding:5px;}
.dropdown [data-toggle="dropdown"]:hover {background: #105105;}
.dropdown .icon-arrow {position: absolute;display: block;font:13px Arial;color:#FFFFFF;top:5px;right:5px;}
.dropdown .icon-arrow:before {content: '\25BC';}
.dropdown .dropdown-menu {max-height:0;width:580px;background: #173377;overflow: hidden;list-style: none;padding:0;margin:0;}
.dropdown .dropdown-menu li {padding: 0;}
.dropdown .dropdown-menu li a {display: block;color: #FFFFFF;background: #173377; font:13px Arial; border-bottom:1px solid #FBBB22;padding:5px;}
.dropdown .dropdown-menu li a:hover {background: #105105;}
.dropdown .show, .dropdown .hide {
-moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%; transform-origin: 50% 0%;}
.dropdown .show {display: block; max-height: 9999px;
-moz-transform: scaleY(1); -ms-transform: scaleY(1);
-webkit-transform: scaleY(1); transform: scaleY(1);
animation: showAnimation 0.2s ease-in-out;
-moz-animation: showAnimation 0.2s ease-in-out;
-webkit-animation: showAnimation 0.2s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;}
.dropdown .hide {max-height: 0;
-moz-transform: scaleY(0); -ms-transform: scaleY(0);
-webkit-transform: scaleY(0); transform: scaleY(0);
animation: hideAnimation 0.2s ease-out;
-moz-animation: hideAnimation 0.2s ease-out;
-webkit-animation: hideAnimation 0.2s ease-out;
-moz-transition: max-height 0.2s ease-out;
-o-transition: max-height 0.2s ease-out;
-webkit-transition: max-height 0.2s ease-out;
transition: max-height 0.2s ease-out;}
</style>
<div class="container">
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown">HOME</i></a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">TEXT BOXES<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="http://the-best-widgets.blogspot.gr">LINK-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-3</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-4</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-5</a></li>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">BACKGROUNDS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="http://the-best-widgets.blogspot.gr">LINK-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-3</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-4</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-5</a></li>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">IMAGE EFFECTS<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="http://the-best-widgets.blogspot.gr">LINK-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-3</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-4</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-5</a></li>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΕΝΣΩΜΑΤΩΣΕΙΣ<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="http://the-best-widgets.blogspot.gr">LINK-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-3</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-4</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-5</a></li>
</ul></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">ΑΣΦΑΛΕΙΑ BLOG<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
<li><a href="http://the-best-widgets.blogspot.gr">LINK-1</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-2</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-3</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-4</a></li>
<li><a href="http://the-best-widgets.blogspot.gr">LINK-5</a></li>
</ul></li>
</ul></div>
<script>
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown,0);
dropdownArray.forEach(function(el){
var button = el.querySelector('a[data-toggle="dropdown"]'),
menu = el.querySelector('.dropdown-menu'),
arrow = button.querySelector('i.icon-arrow');
button.onclick = function(event) {
if(!menu.hasClass('show')) {
menu.classList.add('show');
menu.classList.remove('hide');
arrow.classList.add('open');
arrow.classList.remove('close');
event.preventDefault();}
else {
menu.classList.remove('show');
menu.classList.add('hide');
arrow.classList.remove('open');
arrow.classList.add('close');
event.preventDefault();}};})
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);};
</script>
|
