Add animation to the "hamburger icon".
Courtesy of Julien Melissas, ref. http://codepen.io/JulienMelissas/pen/LEBGLj
This commit is contained in:
parent
7b62c7d444
commit
a2b31e2240
@ -310,4 +310,38 @@
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animated hamburger icon @see http://codepen.io/JulienMelissas/pen/LEBGLj */
|
||||
.navbar-toggle {
|
||||
border: none;
|
||||
background: transparent !important;
|
||||
}
|
||||
.navbar-toggle:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
.navbar-toggle .icon-bar {
|
||||
width: 22px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.navbar-toggle .top-bar {
|
||||
transform: rotate(45deg);
|
||||
transform-origin: 10% 10%;
|
||||
}
|
||||
.navbar-toggle .middle-bar {
|
||||
opacity: 0;
|
||||
}
|
||||
.navbar-toggle .bottom-bar {
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: 10% 90%;
|
||||
}
|
||||
.navbar-toggle.collapsed .top-bar {
|
||||
transform: rotate(0);
|
||||
}
|
||||
.navbar-toggle.collapsed .middle-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
.navbar-toggle.collapsed .bottom-bar {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
@ -3,9 +3,9 @@
|
||||
<div class="navbar-header">
|
||||
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".select2-navbar-collapse">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar top-bar"></span>
|
||||
<span class="icon-bar middle-bar"></span>
|
||||
<span class="icon-bar bottom-bar"></span>
|
||||
</button>
|
||||
<a href="./" class="navbar-brand">Select2</a>
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user