Video Tutorial, sobre como crear un Menú Adaptable a Dispositivos Móviles con Responsive Design, con Animaciones CSS3. Para esto solo es de tener vinculado los códigos necesarios como el html, css y el JQuery correspondiente. y tener incorporados los iconos de icomoon.io.
Una vez descargado los iconos, se debe cambiar el nombre del archivo: style.css a iconos.css, y este mismo archivo copearlo junto con la carpeta fonts y pegarlos en la carpeta de css de nuestro proyecto.
A continuación se muestra el código HTML, para un archivo llamado: index.html:
<!DOCTYPE html>
<html>
<head>
<title>Menu Responsivo Vertical</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css" href="css/iconos.css">
</head>
<body>
<header>
<section id="logo">
<h1>TITULO</h1>
<span id="abrir_menu" class="icon-menu"></span>
</section>
<section id="menu">
<div> <span id="cerrar_menu" class="icon-cross"></span> </div>
<ul>
<a href="#"><span class="icon-home3"></span> Inicio</a>
<a href="#"><span class="icon-newspaper"></span> Acerca</a>
<a href="#"><span class="icon-office"></span> Servicios</a>
<a href="#"><span class="icon-profile"></span> Contacto</a>
<a href="#"><span class="icon-books"></span> Otros</a>
</ul>
</section>
</header>
</body>
</html>
Ahora el Código/Estilos CSS, para un archivo llamado: estilos.css dentro de nuestra carpeta css:
*{
padding:0;
margin:0;
}
body{background:#086A87;}
header{
width:100%;
height:50px;
background:#fff;
box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
-moz-box-shadow:1px 1px 5px #000;
-o-box-shadow:1px 1px 5px #000;
}
#logo{
padding:10px 0px 0px 10px;
}
#logo h1{
color:#6e6e6e;
font:bold 25px Verdana;
}
#abrir_menu{
display:none;
float:right;
color:#6e6e6e;
font-size:40px;
margin-top:-35px;
padding-right:20px;
cursor:pointer;
}
#menu{
width:550px;
margin:-25px auto;
}
#menu ul a{
text-decoration:none;
color:#6e6e6e;
font:16px Verdana;
padding:10px;
transition: background .6s, color .6s;
-webkit-transition: background .6s, color .6s;
-moz-transition: background .6s, color .6s;
-o-transition: background .6s, color .6s;
}
#menu ul a:hover{
background:#6e6e6e;
color:#f2f2f2;
}
#menu div{
display:none;
height:50px;
}
#cerrar_menu{
float:right;
color:#6e6e6e;
font-size:35px;
padding:10px;
cursor:pointer;
opacity:.6;
}
#cerrar_menu:hover{
opacity:1;
}
Ahora otro Código/Estilos CSS, para un archivo llamado: responsive.css dentro de nuestra carpeta css:
@media screen and (max-width: 800px){
#abrir_menu{
display:block;
}
#menu{
position:fixed;
width:250px;
height:100%;
margin-top:0;
top:0;
background:#fff;
box-shadow:1px 1px 5px #000;
-webkit-box-shadow:1px 1px 5px #000;
-moz-box-shadow:1px 1px 5px #000;
-o-box-shadow:1px 1px 5px #000;
right:-100%;
}
#menu ul a{
display:block;
}
#menu div{
display:block;
}
}
Y por último un Código JS / JQuery, para un archivo llamado: script.js dentro de nuestra carpeta js:
$(document).ready(function(){
$("#abrir_menu").click(function(){
$("#menu").animate({"right":"0"});
});
$("#cerrar_menu").click(function(){
$("#menu").animate({"right":"-100%"});
});
});
Nuestro Proyecto, debe de quedar acomodado de la siguiente forma:
0 comentarios:
Publicar un comentario