Menú Push Off-Canvas en HTML/CSS puro

Vista prévia

Descripción

Una solución HTML/CSS pura que se utiliza para crear un menú desplegable de estilo de aplicación para la navegación del sitio mediante CSS3 : target selector.

Funcionamiento

Cree una navegación para su sitio Web.

<nav class="site-nav" id="site-nav">

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

<a href="#">Services</a>

<a href="#">Works</a>

<a href="#">Portfolio</a>

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

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

<a href="#">Contact</a>
</nav>

Crea botones de alternancia de menú dentro de tu contenido principal.

<div class="page-wrap">


<header class="main-header">


<a href="#site-nav">&#9776;</a>


<a href="#" class="close-menu">&#9776;</a>


<h1>Pure CSS Push Menu</h1>

</header>


<div class="content">



Main Content Here


</div>

</div>

Las reglas básicas de CSS/CSS3.

.site-nav {

position: fixed;

top: 0;

width: 0;

height: 100%;

background: #222;

overflow-y: auto;

transition: width 0.3s ease;

white-space: nowrap;

text-transform: uppercase;
}

.site-nav a {

display: block;

border-bottom: 1px solid #666;

color: white;

padding: 34px;
}

.site-nav a:hover,
.site-nav a:focus {

background: #333;
}

.site-nav:after {

content: "";

position: absolute;

top: 0;

right: 0;

height: 100%;

width: 4px;

background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

#site-nav:target {

width: 30%;
}

#site-nav:target + .page-wrap {

width: 70%;
}

#site-nav:target + .page-wrap .close-menu {

display: block;
}

#site-nav:target + .page-wrap .main-header {

width: 70%;

left: 30%;
}

.main-header {

background: #222;

padding: 5px 0 5px 65px;

color: white;

position: fixed;

width: 100%;

left: 0;

transition: all 0.3s ease;
}

.main-header a {

position: absolute;

left: 20px;

top: 20px;

color: white;

font-size: 32px;
}

.page-wrap {

float: right;

width: 100%;

transition: width 0.3s ease;
}