Menú de navegación deslizante horizontal con CSS puro/CSS3

Vista prévia

Descripción

Un sistema de navegación basado en CSS/CSS3 puro que desliza un menú horizontal mientras haces clic en el ícono de alternancia. Creado por < a href = "https://codepen.io/rickzanutta" target = "_ blank" rel = "noopener" > rickzanutta .

Funcionamiento

Incluya el Normalize. CSS y el Font awesome en la sección Head de la página web (no es necesario, pero recomendado).

<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Cree una casilla de verificación para el estado comprobado.

<input type="checkbox" id="nav-button" name="nav-button">

Cree un menú de navegación con la lista HTML.

<nav class="nav-menu">

<label for="nav-button" class="nav-trigger"><i class="fa fa-bars"></i></label>

<ul>


<li><a href="https://twitter.com" target="_blank"><i class="fa fa-twitter"></i><span>Twitter</span></a></li>


<li><a href="https://www.linkedin.com" target="_blank"><i class="fa fa-linkedin"></i><span>Linkedin</span></a></li>


<li><a href="https://github.com" target="_blank"><i class="fa fa-github"></i><span>Github</span></a></li>


<li><a href="http://codepen.io" target="_blank"><i class="fa fa-codepen"></i><span>Codepen</span></a></li>

</ul>
</nav>

Los estilos CSS básicos.

a { text-decoration: none; }

ul,
li {

margin: 0;

padding: 0;
}

El CSS para el icono de alternancia.

.nav-trigger {

background: #1abc9c;

cursor: pointer;

font-size: 36px;

float: left;

padding: 5px 10px;
}

.nav-trigger:hover { background: #15987e; }

.nav-trigger i {

color: #fff;

padding: 5px;

-webkit-transition: -webkit-transform 0.2s ease-in-out;

transition: transform 0.2s ease-in-out;
}

El CSS para el menú de navegación.

.nav-menu {

background: #333;

color: #fff;

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 10;
}

.nav-menu ul {

display: inline-block;

left: -100%;

position: relative;

-webkit-transition: left 0.2s ease-in-out;

transition: left 0.2s ease-in-out;
}

.nav-menu li {

display: block;

float: left;
}

.nav-menu li a {

color: #c1c1c1;

display: block;

font-size: 24px;

line-height: 60px;

height: 50px;

margin-top: 1px;

padding: 0 20px;

text-align: center;
}

.nav-menu li a:hover span {

opacity: 1;

visibility: visible;
}

.nav-menu li a i {

font-size: 36px;

-webkit-transition: color 0.2s ease;

transition: color 0.2s ease;
}

.nav-menu li a i.fa-twitter:hover { color: #00aced; }

.nav-menu li a i.fa-linkedin:hover { color: #0077b5; }

.nav-menu li a i.fa-github:hover,
.nav-menu li a i.fa-codepen:hover { color: #fff; }

.nav-menu li a span {

position: absolute;

top: 0%;

left: 100%;

width: 100%;

height: 100%;

font-size: 24px;

line-height: 55px;

opacity: 0;

padding: 0 20px;

text-align: left;

-webkit-transition: opacity 0.2s ease, visibility 0.2s ease;

transition: opacity 0.2s ease, visibility 0.2s ease;

visibility: hidden;
}

El CSS para el estado comprobado.

input[type=checkbox]:checked + .nav-menu .nav-trigger i {

-webkit-transform: rotate(270deg);

-ms-transform: rotate(270deg);

transform: rotate(270deg);
}

input[type=checkbox]:checked + .nav-menu .nav-logo { opacity: 0; }

input[type=checkbox]:checked + .nav-menu ul { left: 0; }

input[type=checkbox] {

position: absolute;

top: -99px;
}