Skip to content

Instantly share code, notes, and snippets.

@Tsunamijaan
Created August 16, 2018 17:47
Show Gist options
  • Save Tsunamijaan/85a125b4951c86ddaaeb34a5b31091b5 to your computer and use it in GitHub Desktop.
Save Tsunamijaan/85a125b4951c86ddaaeb34a5b31091b5 to your computer and use it in GitHub Desktop.
Right-side-or-Span-Humbaer_menu-Html---
Right-side-or-Span-Humbaer_menu-Html---
<div class="nav gnavi">
<div class="nav-btn">
<a href="#">
<span class="bars">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>
<span class="labels hover-line"></span>
</a>
</div>
</div>
------------------ Right-side-or-Span-Humbaer_menu-Html-----------
------------------ Right-side-or-Span-Humbaer_menu-css-----------
.gnavi { float: right;
margin-left: 20px;
/*display: none*/
}
.gnavi .nav-btn a{}
.gnavi .nav-btn a .bars{
display: inline-block;
padding:0 20px;
width: 58px;
height: 28px;
overflow: hidden;
position: relative;
vertical-align: middle;
}
.gnavi .nav-btn a .bars .bar{
display: block;
position: absolute;
width: 34px;
height: 2px;
background-color: #000;
-webkit-transition: 375ms;
-o-transition: 375ms;
transition: 375ms;
-webkit-transition-property: top, opacity;
-o-transition-property: top, opacity;
transition-property: top, opacity;
}
.nav-btn a {
color: #666666;
}
.gnavi .nav-btn a .bars .bar:nth-child(1){
top: 6px;
opacity: 1;
-webkit-transition-delay: 125ms;
-o-transition-delay: 125ms;
transition-delay: 125ms;
}
.gnavi .nav-btn a .bars .bar:nth-child(2){
top: 12px;
-webkit-transition-delay: 80ms;
-o-transition-delay: 80ms;
transition-delay: 80ms;
}
.gnavi .nav-btn a .bars .bar:nth-child(3){
top: 18px;
-webkit-transition-delay: 40ms;
-o-transition-delay: 40ms;
transition-delay: 40ms;
}
.gnavi .nav-btn a .bars .bar:nth-child(4){
top: 24px;
opacity: 0;
-webkit-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
}
.gnavi .nav-btn a:hover .bars .bar:nth-child(1){
top: 0px;
opacity: 0;
-webkit-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
}
.gnavi .nav-btn a:hover .bars .bar:nth-child(2){
top: 6px;
-webkit-transition-delay: 40ms;
-o-transition-delay: 40ms;
transition-delay: 40ms;
}
.gnavi .nav-btn a:hover .bars .bar:nth-child(3){
top: 12px;
-webkit-transition-delay: 80ms;
-o-transition-delay: 80ms;
transition-delay: 80ms;
}
.gnavi .nav-btn a:hover .bars .bar:nth-child(4){
top: 18px;
opacity: 1;
-webkit-transition-delay: 125ms;
-o-transition-delay: 125ms;
transition-delay: 125ms;
}
.log_in {
float: right;
margin-top: 0;
background: rgba(0,0,0,.9);
border: 0;
border-radius: 5px;
color: #E1E1E1;
font-size: 14px;
font-weight: bold;
text-decoration: none;
text-align: center;
vertical-align: middle;
margin-right: 40px;
border-radius: 0;
text-transform: uppercase;
font-weight: normal;
padding: 5px 10px;
border: 1px solid #ccc;
}
.gnavi.nav-open .nav-btn a .bars .bar:nth-child(1){
top: 12px;
-webkit-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform: rotate(45deg) scaleX(1.442);
-ms-transform: rotate(45deg) scaleX(1.442);
transform: rotate(45deg) scaleX(1.442);
opacity: 1;
-webkit-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
-webkit-transition-property: top, -webkit-transform;
-o-transition-property: top, -o-transform;
transition-property: top, -webkit-transform;
-o-transition-property: top, transform;
transition-property: top, transform;
transition-property: top, transform, -webkit-transform;
}
.gnavi.nav-open .nav-btn a .bars .bar:nth-child(2){
top: 12px;
opacity: 0;
-webkit-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
}
.gnavi.nav-open .nav-btn a .bars .bar:nth-child(3){
top: 12px;
-webkit-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform: rotate(-45deg) scaleX(1.442);
-ms-transform: rotate(-45deg) scaleX(1.442);
transform: rotate(-45deg) scaleX(1.442);
-webkit-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
-webkit-transition-property: top, -webkit-transform;
-o-transition-property: top, -o-transform;
transition-property: top, -webkit-transform;
-o-transition-property: top, transform;
transition-property: top, transform;
transition-property: top, transform, -webkit-transform;
}
.gnavi.nav-open .nav-btn a .bars .bar:nth-child(4){
top: 24px;
opacity: 0;
-webkit-transition: 0ms;
-o-transition: 0ms;
transition: 0ms;
-webkit-transition-delay: 0ms;
-o-transition-delay: 0ms;
transition-delay: 0ms;
}
.gnavi-links{
width:220px;
}
.gnavi-nav-open #gnavi-links{
visibility: visible;
}
/*========Right-sidebar-span-style-here=====*/
------------------ Right-side-or-Span-Humbaer_menu-css-----------
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment