Diapositiva adaptable de CSS puro en navegación

Vista prévia

Descripción

Un sistema de navegación adaptable de CSS puro que transforma la lista de menú normal en un menú desplegable OFF-Canvas en dispositivos móviles.

Funcionamiento

Cree una navegación de encabezado adaptable para su página web.

<header class="left_menu">

<input type="checkbox" id="main_menu" name="main_menu" />

<span class="logo">Logo</span>

<label for="main_menu">

<div class="hamburger hamburger--elastic" type="button" aria-label="Menu" aria-controls="main_menu"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </div>

</label>

<nav>


<ul>



<li>




<h1 class="logo">Logo</h1>



</li>



<li> <a href="">Home</a> </li>



<li> <a href="">Contact</a> </li>



<li> <a href="">About</a> </li>



<li> <a href="">Blog</a> </li>


</ul>

</nav>
</header>

Los estilos CSS principales para la navegación & botón de alternancia de hamburguesa.

nav li, nav ul { margin: 0 }

nav { box-shadow: 0 0 10px rgba(0,0,0,.5) }

nav ul {

height: 100%;

padding: 0;

list-style: none;

overflow: hidden
}

nav li:nth-child(1) a {

-moz-transition-delay: .13s;

-o-transition-delay: .13s;

-webkit-transition-delay: .13s;

transition-delay: .13s
}

nav li:nth-child(2) a {

-moz-transition-delay: .21s;

-o-transition-delay: .21s;

-webkit-transition-delay: .21s;

transition-delay: .21s
}

nav li:nth-child(3) a {

-moz-transition-delay: .29s;

-o-transition-delay: .29s;

-webkit-transition-delay: .29s;

transition-delay: .29s
}

nav li:nth-child(4) a {

-moz-transition-delay: .37s;

-o-transition-delay: .37s;

-webkit-transition-delay: .37s;

transition-delay: .37s
}

nav li:nth-child(5) a {

-moz-transition-delay: .45s;

-o-transition-delay: .45s;

-webkit-transition-delay: .45s;

transition-delay: .45s
}

nav li:nth-child(6) a {

-moz-transition-delay: .53s;

-o-transition-delay: .53s;

-webkit-transition-delay: .53s;

transition-delay: .53s
}

nav li:nth-child(7) a {

-moz-transition-delay: .61s;

-o-transition-delay: .61s;

-webkit-transition-delay: .61s;

transition-delay: .61s
}

nav li:nth-child(8) a {

-moz-transition-delay: .69s;

-o-transition-delay: .69s;

-webkit-transition-delay: .69s;

transition-delay: .69s
}

nav li:nth-child(9) a {

-moz-transition-delay: .77s;

-o-transition-delay: .77s;

-webkit-transition-delay: .77s;

transition-delay: .77s
}

nav li:nth-child(10) a {

-moz-transition-delay: .85s;

-o-transition-delay: .85s;

-webkit-transition-delay: .85s;

transition-delay: .85s
}

nav li:nth-child(11) a {

-moz-transition-delay: .93s;

-o-transition-delay: .93s;

-webkit-transition-delay: .93s;

transition-delay: .93s
}

nav li:nth-child(12) a {

-moz-transition-delay: 1.01s;

-o-transition-delay: 1.01s;

-webkit-transition-delay: 1.01s;

transition-delay: 1.01s
}

nav li a {

color: #fff;

position: relative;

display: block;

outline: 0;

text-decoration: none
}

label[for=main_menu], nav {

-moz-transition: all .2s cubic-bezier(.23, 1, .32, 1);

-o-transition: all .2s cubic-bezier(.23, 1, .32, 1);

-webkit-transition: all .2s cubic-bezier(.23, 1, .32, 1);

transition: all .2s cubic-bezier(.23, 1, .32, 1)
}

.hamburger {

padding: .25em .4em;

display: inline-block;

cursor: pointer;

transition-property: opacity, filter;

transition-duration: .15s;

transition-timing-function: linear;

font: inherit;

color: inherit;

text-transform: none;

background-color: transparent;

border: 0;

margin: 0;

overflow: visible
}

.hamburger:hover { opacity: .7 }

.hamburger-box {

width: 1.5em;

height: 24px;

display: inline-block;

position: relative
}

.hamburger-inner {

display: block;

top: 50%;

margin-top: -2px
}

input[name=main_menu]:checked~nav, nav { margin: 0 }

.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {

width: 1.5em;

height: 4px;

background-color: #fff;

border-radius: 4px;

position: absolute;

transition-property: transform;

transition-duration: .15s;

transition-timing-function: ease
}

header, nav { background-color: #3c7eb5 }

.hamburger-inner::after, .hamburger-inner::before {

content: "";

display: block
}

.hamburger-inner::before { top: -10px }

.hamburger-inner::after { bottom: -10px }

.hamburger--elastic .hamburger-inner {

top: 2px;

transition-duration: 275ms;

transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}

.hamburger--elastic .hamburger-inner::before {

top: 10px;

transition: opacity 125ms 275ms ease
}

.hamburger--elastic .hamburger-inner::after {

top: 20px;

transition: transform 275ms cubic-bezier(.68, -.55, .265, 1.55)
}

label[for=main_menu] {

display: block;

font-weight: 700;

text-align: center;

position: fixed;

z-index: 500;

top: .65em
}

input[name=main_menu] { display: none }

input[name=main_menu]:checked~nav li:nth-child(2) { border-top: 1px solid rgba(255,255,255,.3) }

input[name=main_menu]:checked~nav li a {

color: #fff;

padding: .9em;

border-bottom: 1px solid rgba(255,255,255,.3)
}

input[name=main_menu]:checked~label .hamburger .hamburger-inner {

-moz-transform: translate3d(0, 10px, 0) rotate(135deg);

-o-transform: translate3d(0, 10px, 0) rotate(135deg);

-ms-transform: translate3d(0, 10px, 0) rotate(135deg);

-webkit-transform: translate3d(0, 10px, 0) rotate(135deg);

-moz-transition-delay: 75ms;

-o-transition-delay: 75ms;

-webkit-transition-delay: 75ms
}

input[name=main_menu]:checked~label .hamburger .hamburger-inner::before {

-moz-transition-delay: 0s;

-o-transition-delay: 0s;

-webkit-transition-delay: 0s
}

input[name=main_menu]:checked~label .hamburger .hamburger-inner::after {

-moz-transform: translate3d(0, -20px, 0) rotate(-270deg);

-o-transform: translate3d(0, -20px, 0) rotate(-270deg);

-ms-transform: translate3d(0, -20px, 0) rotate(-270deg);

-webkit-transform: translate3d(0, -20px, 0) rotate(-270deg);

-moz-transition-delay: 75ms;

-o-transition-delay: 75ms;

-webkit-transition-delay: 75ms
}

nav {

position: fixed;

top: 0;

width: 18em;

height: 100%;

-moz-transition: all .2s cubic-bezier(.17, .67, .44, .58);

-o-transition: all .2s cubic-bezier(.17, .67, .44, .58);

-webkit-transition: all .2s cubic-bezier(.17, .67, .44, .58);

transition: all .2s cubic-bezier(.17, .67, .44, .58)
}

El CSS para el menú fuera del lienzo.

@media (min-width:767px) {

nav, nav ul { width: auto }

header span.logo, label[for=main_menu] { display: none }

nav {

box-shadow: none;

position: relative;

margin: 0;

padding: .5em
}

nav ul { height: auto }

nav ul li { display: inline-block }

nav ul li a {

left: inherit;

border-bottom: none medium;

padding: .5em .8em
}
}

input[name=main_menu]:checked~label .hamburger .hamburger-inner {

transform: translate3d(0, 10px, 0) rotate(135deg);

transition-delay: 75ms
}

input[name=main_menu]:checked~label .hamburger .hamburger-inner::before {

transition-delay: 0s;

opacity: 0
}

input[name=main_menu]:checked~label .hamburger .hamburger-inner::after {

transform: translate3d(0, -20px, 0) rotate(-270deg);

transition-delay: 75ms
}

.left_menu input[name=main_menu]:checked~section, input[name=main_menu]:checked~section {

-moz-transform: translate3d(18em, 0, 0);

-o-transform: translate3d(18em, 0, 0);

-ms-transform: translate3d(18em, 0, 0);

-webkit-transform: translate3d(18em, 0, 0);

transform: translate3d(18em, 0, 0)
}

.left_menu input[name=main_menu]:checked~label[for=main_menu] {

left: 15em;

-moz-transition: left .2s cubic-bezier(.23, 1, .32, 1);

-o-transition: left .2s cubic-bezier(.23, 1, .32, 1);

-webkit-transition: left .2s cubic-bezier(.23, 1, .32, 1);

transition: left .2s cubic-bezier(.23, 1, .32, 1)
}

@media (max-width:767px) {

.left_menu nav li a {

left: -100%;

-moz-transition: left .2s cubic-bezier(.23, 1, .32, 1);

-o-transition: left .2s cubic-bezier(.23, 1, .32, 1);

-webkit-transition: left .2s cubic-bezier(.23, 1, .32, 1);

transition: left .2s cubic-bezier(.23, 1, .32, 1)
}

.left_menu nav {

left: 0;

margin-left: -18.8em
}

.left_menu input[name=main_menu]:checked~nav li a { left: 0 }

.left_menu input[name=main_menu]~label[for=main_menu] { left: .5em }

nav ul { width: 18em }

}