RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2025-02-10 17:19:23 +03:00
Code Issues Projects Releases Wiki Activity

Add animation to the "hamburger icon".

Browse Source 
Courtesy of Julien Melissas, ref. http://codepen.io/JulienMelissas/pen/LEBGLj
This commit is contained in:
Florian Kissling 2015-04-27 09:35:29 +02:00
parent 7b62c7d444
commit a2b31e2240
2 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
docs/_includes/head.html
View File

@ -310,4 +310,38 @@
padding: 30px; 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> </style>

6
docs/_includes/navigation.html
View File

@ -3,9 +3,9 @@
<div class="navbar-header"> <div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".select2-navbar-collapse"> <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".select2-navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <span class="icon-bar top-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar middle-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar bottom-bar"></span>
</button> </button>
<a href="./" class="navbar-brand">Select2</a> <a href="./" class="navbar-brand">Select2</a>
</div> </div>