Full screen menu com html e css
Este tutorial veremos como criar um Full screen menu com html e css.
Nesta seção, projetaremos uma estrutura das seguintes tags abaixo.
Tags: <div>, <input>, <label>, <span>, <nav>, <ul>, <li> e a tag <a> para inserirmos o link de destino.
Essas tags usaremos para criar a nosso Full screen menu com html e css.
Vamos Adicionar o HTML
<div class="nav">
<input type="checkbox" class="menu_checkbox" id="nav-toggle">
<label for="nav-toggle" class="menu_button">
<span class="menu_icon" aria-label="toggle nav"></span>
</label>
<div class="menu_background"></div>
<nav class="menu_nav" role="nav">
<ul class="manu_list">
<li class="menu_item">
<a href="#" class="menu_link" title="Html"> Html</a>
</li>
<li class="menu_item">
<a href="#" class="menu_link" title="Css"> Css</a>
</li>
<li class="menu_item">
<a href="#" class="menu_link" title="jQuery"> jQuery</a>
</li>
<li class="menu_item">
<a href="#" class="menu_link" title="Wordpress"> WordPress</a>
</li>
<li class="menu_item">
<a href="#" class="menu_link" title="Templates"> Templates</a>
</li>
</ul>
</nav>
</div><!--nav-->
Vamos Adicionar o CSS
Nesta seção, usaremos algumas propriedades CSS para estilizar e projetar o nosso Menu.
.menu_checkbox {
display: none;
}
.menu_button {
position: fixed;
top: 4%;
right: 4%;
height: 40px;
width: 40px;
text-align: center;
background-color: #17c8cc;
border-radius: 50%;
z-index: 10;
cursor: pointer;
}
@media screen and (min-width: 768px) {
.menu_button {
width:40px;
height:40px;
top:4%;
right:4%;
}
}
.menu_background {
position: fixed;
top: 4%;
right: 4%;
height: 40px;
width: 40px;
border-radius: 50%;
background: #00d7dc;
background-size: cover;
background-position: center;
z-index: 5;
transition: all 800ms cubic-bezier(0.86, 0, 0.07, 1);
}
@media screen and (min-width: 768px) {
.menu_background {
top: 4%;
right: 4%;
height: 40px;
width: 40px;
}
}
.menu_nav {
position: fixed;
top: 10%;
left: 0;
height: 100vh;
opacity: 0;
width: 0;
visibility: hidden;
z-index: 9;
transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.menu_list {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 100%;
list-style: none;
}
.menu_item {
margin:1em;
text-align:center;
}
.menu_link:link,
.menu_link:visited {
display: inline-block;
padding: 5px 0px;
color: #242424;
font-size:18px;
text-decoration: none;
transition: all .2s;
}
.menu_link:hover {
display: inline-block;
padding: 5px 0px;
color: red;
font-size:18px;
text-decoration: none;
transition: all .2s;
}
@media(min-width: 768px) {
.menu_link:link,
.menu_link:visited {
font-size: 36px;
}
}
.menu_link span {
margin-right: 1.5rem;
display: inline-block;
}
.menu_link:hover {
color:#ffffff;
transform: scale(1.2);
}
.menu_checkbox:checked~.menu_background {
transform: scale(80)
}
.menu_checkbox:checked~.menu_nav {
width: 100%;
visibility: visible;
opacity: 1;
}
.menu_icon {
position: relative;
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.menu_icon {
margin-top: 20px;
}
}
.menu_icon,
.menu_icon::before,
.menu_icon::after {
display: inline-block;
width: 25px;
height: 2px;
background-color: #ffffff;
}
@media (min-width: 768px) {
.menu_icon,
.menu_icon::before,
.menu_icon::after {
width: 20px;
}
}
.menu_icon::before,
.menu_icon::after {
content: '';
position: absolute;
left: 0;
transition: all 200ms;
}
.menu_icon::before {
top: -6px;
}
.menu_icon::after {
top: 6px;
}
.menu_checkbox:checked+.menu_button .menu_icon {
background-color: transparent;
}
.menu_checkbox:checked+.menu_button .menu_icon::before {
top: 0;
transform: rotate(135deg);
}
.menu_checkbox:checked+.menu_button .menu_icon::after {
top: 0;
transform: rotate(-135deg);
}
Combinando as Três seções acima Html Css e javascript temos o seguinte Resultado!
Veja o Resultado baixo!
Baixar Código Veja Funcionando
Publicado por: Loop Nerd
387 Visualizações
Deixe um comentário