<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu2-Responsive</title>
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<link rel="stylesheet" type="text/css" href="testing.css">
<link rel="stylesheet" type="text/css" href="css/all.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body >
<section class="menu-responcive" >
<div class="perfil" id="perfil">
<div class="box-image">
<img src="recursos/eduard.jpg" alt="" onclick="cerarperfil();">
</div>
<div class="box-texto">
<span>Eduard Fabricio</span>
<span>Martinez Rivera</span>
<span>Estudiante De Informatica</span>
<span>Estudio En: </span>
<br>
<span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit fuga voluptatem, aliquam voluptatum quam pariatur dignissimos voluptatibus ipsa dolorem dolore odit accusantium suscipit ratione aut, consectetur nihil! Consequatur id quas doloremque reprehenderit quo sint tempore fuga? Explicabo et ut eveniet?</span>
</div>
</div>
<nav class="menu" id="menu">
<div class="header">
<h5>Menu Responsive</h5>
<i class="fas fa-bars"></i>
</div>
<ul class="lista">
<li onclick="cerartodo();">
<span class="content">
<div class="bar">
<div class="var"></div>
</div>
<span>inicio</span>
<i class="fas fa-home"></i>
</span>
</li>
<li onclick="abrirs();" id="abrirs">
<span class="content">
<div class="bar">
<div class="var"></div>
</div>
<span >servicios</span>
<i class="fas fa-globe"></i>
</span>
<div class="box">
<span id="iconos">+</span>
</div>
</li>
<ul class="sub-lista" id="listahome">
<li>
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>dominio</span>
<i class="fas fa-globe"></i>
</span>
</a>
</li>
<li>
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>hosting</span>
<i class="fas fa-server"></i>
</span>
</a>
</li>
<li>
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>servicios</span>
<i class="fas fa-users"></i>
</span>
</a>
</li>
<li>
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>cloud</span>
<i class="fas fa-cloud"></i>
</span>
</a>
</li>
</ul>
<li onclick="abrirp();" id="abrirs">
<span class="content">
<div class="bar">
<div class="var"></div>
</div>
<span >portafolio</span>
<i class="fas fa-toolbox"></i>
</span>
<div class="box">
<span id="iconop">+</span>
</div>
</li>
<ul class="sub-lista" id="listap">
<li>
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>proyectos</span>
<i class="fas fa-tools"></i>
</span>
</a>
</li>
<li>
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>diseño web</span>
<i class="fas fa-laptop-code"></i>
</span>
</a>
</li>
<li>
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>servidor</span>
<i class="fab fa-github"></i>
</span>
</a>
</li>
<li onclick="lenguajes();">
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>lenguajes</span>
<i class="fab fa-html5"></i>
</span>
<div class="box">
<span id="iconol">+</span>
</div>
</a>
</li>
</ul>
<ul class="sub-lista2" id="lista-lengujes">
<li>
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>html</span>
<i class="fab fa-html5"></i>
</span>
</a>
</li>
<li>
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>css</span>
<i class="fab fa-css3"></i>
</span>
</a>
</li>
<li>
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>javascrip</span>
<i class="fab fa-js"></i>
</span>
</a>
</li>
</ul>
<li onclick="ajustes();">
<span class="content">
<div class="bar">
<div class="var"></div>
</div>
<span>ajustes</span>
<i class="fas fa-cog" id="iconoj"></i>
</span>
</li>
<ul class="sub-lista2" id="lista-ajustes">
<li onclick="perfil();">
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>perfil</span>
<i class="fas fa-user-circle"></i>
</span>
</a>
</li>
<li onclick="windowinfo();">
<a>
<span class="sub-content">
<div class="bar">
<div class="var"></div>
</div>
<span>abrir ventana de informacion</span>
<i class="fas fa-info-circle"></i>
</span>
</a>
</li>
</ul>
<li onclick="cerartodo();">
<span class="content">
<div class="bar">
<div class="var"></div>
</div>
<span>nosotros</span>
<i class="fas fa-users" id="iconoj"></i>
</span>
</li>
<li onclick="cerartodo();">
<span class="content">
<div class="bar">
<div class="var"></div>
</div>
<span>contactar</span>
<i class="fas fa-mobile" id="iconoj"></i>
</span>
</li>
</ul>
<div class="pro">
<p>Eduard Martinez - Todos los derechos recervados</p>
</div>
</nav>
<div class="informacion-box" id="informacion-box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="btn btn-success" onclick="cerarinformacionextra();">volver</button>
</div>
</section>
<script src="js/style.js"></script>
</body>
</html>
@import "path/to/font-awesome/less/font-awesome.less";
*{
margin: 0;
padding: 0;
font-family: sans-serif;
text-decoration: none;
box-sizing: border-box;
list-style: none;
font-size: 14px;
color: #504141;
}
a:hover{
text-decoration: none;
}
body{
font-family: sans-serif;
background: #4c08eb;
}
.menu-responcive{
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.menu{
width: 300px;
height: 450px;
background: #fff;
border-radius: 4px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.menu .header{
width: 100%;
height: 60px;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu .lista{
width: 100%;
display: flex;
flex-direction: column;
}
.lista li{
width: 100%;
height: 32px;
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
.lista li .content{
width: 85%;
height: 100%;
display: flex;
align-items: center;
flex-direction: row;
}
.bar{
width: 5%;
height: 100%;
overflow: hidden;
}
.var{
width: 30%;
height: 100%;
background: #504141;
border-radius: 2px;
transform: translateX(-100%);
transition: 0.5s;
}
.lista li:hover{
background: #50414133;
}
.lista li:hover .content .bar .var, .sub-lista li:hover a .sub-content .bar .var,.sub-lista2 li:hover a .sub-content .bar .var{
transform: translateX(0%);
transition: 0.3s;
}
.lista li .content span{
margin-right: 5px;
}
.lista li .box{
width: 15%;
height: 100%;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
}
.lista li .box span{
width: 20px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}
.sub-lista{
width: 100%;
height: 0;
background: #50414133;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sub-lista li a{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.sub-lista li a .sub-content{
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
.sub-lista li a .sub-content .bar{
width: 5%;
height: 100%;
overflow: hidden;
}
.sub-lista li a .sub-content span, .sub-lista li a .sub-content i{
font-size: 12px;
}
.sub-lista2 li a .sub-content span, .sub-lista2 li a .sub-content i{
font-size: 12px;
}
.lista li .content span, .sub-lista li a .sub-content span{
margin-right: 5px;
}
.lista2 li .content span, .sub-lista2 li a .sub-content span{
margin-right: 5px;
}
.sub-lista2{
width: 100%;
height: 0;
background: #50414133;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sub-lista2 li a{
width: 100%;
height: 32px;
display: flex;
align-items: center;
flex-direction: row;
}
.sub-lista2 li a .sub-content{
width: 100%;
height: 100%;
display: flex;
align-items: center;
flex-direction: row;
}
.pro{
width:100%;
height: 60px;
margin-top: 50px;
display: flex;
justify-content:center;
align-items: center;
}
.pro p{
width: 90%;
height: 50px;
font-size: 12px;
display: flex;
justify-content:center;
align-items: center;
}
.menu-responcive .perfil{
width: 300px;
height: 0px;
background: #fff;
border-radius: 4px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.perfil .box-image{
width: 100%;
height: 100px;
display: flex;
justify-content:center;
align-items: center;
margin-bottom: 0;
}
.box-image img{
width: 70px;
height: 70px;
border-radius: 50%;
cursor: pointer;
}
.box-texto{
width: 100%;
margin-top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box-texto span{
width: 90%;
height: 20px;
font-size: 12px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.informacion-box{
width: 0px;
height: 0px;
border-radius: 4px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: fixed;
transform: translateX(-110%);
overflow: hidden;
}
.informacion-box p{
width: 90%;
}
function cerartodo(){
document.getElementById('listahome').style.height = "0px";
document.getElementById('listahome').style.transition = "1s";
document.getElementById('iconos').style.transform = "rotate(0deg)";
document.getElementById('iconos').style.transition = "0.5s";
document.getElementById('listap').style.height = "0px";
document.getElementById('listap').style.transition = "2s";
document.getElementById('iconop').style.transform = "rotate(0deg)";
document.getElementById('iconop').style.transition = "0.5s";
document.getElementById('lista-lengujes').style.height = "0px";
document.getElementById('lista-lengujes').style.transition = "0.3s";
document.getElementById('iconol').style.transform = "rotate(0deg)";
document.getElementById('iconol').style.transition = "0.3s";
document.getElementById('lista-ajustes').style.height = "0px";
document.getElementById('lista-ajustes').style.transition = "1s";
document.getElementById('iconoj').style.transform = "rotate(-180deg)";
document.getElementById('iconoj').style.transition = "2s";
}
function abrirs(){
document.getElementById('listahome').style.height = "130px";
document.getElementById('listahome').style.transition = "1s";
document.getElementById('iconos').style.transform = "rotate(45deg)";
document.getElementById('iconos').style.transition = "0.5s";
document.getElementById('listap').style.height = "0px";
document.getElementById('listap').style.transition = "2s";
document.getElementById('iconop').style.transform = "rotate(0deg)";
document.getElementById('iconop').style.transition = "0.5s";
document.getElementById('lista-lengujes').style.height = "0px";
document.getElementById('lista-lengujes').style.transition = "0.3s";
document.getElementById('iconol').style.transform = "rotate(0deg)";
document.getElementById('iconol').style.transition = "0.5s";
document.getElementById('lista-ajustes').style.height = "0px";
document.getElementById('lista-ajustes').style.transition = "1s";
document.getElementById('iconoj').style.transform = "rotate(-180deg)";
document.getElementById('iconoj').style.transition = "2s";
}
function abrirp(){
document.getElementById('listahome').style.height = "0px";
document.getElementById('listahome').style.transition = "1s";
document.getElementById('iconos').style.transform = "rotate(0deg)";
document.getElementById('iconos').style.transition = "0.5s";
document.getElementById('listap').style.height = "130px";
document.getElementById('listap').style.transition = "1s";
document.getElementById('iconop').style.transform = "rotate(45deg)";
document.getElementById('iconop').style.transition = "0.5s";
document.getElementById('lista-ajustes').style.height = "0px";
document.getElementById('lista-ajustes').style.transition = "1s";
document.getElementById('iconoj').style.transform = "rotate(-180deg)";
document.getElementById('iconoj').style.transition = "2s";
}
function lenguajes(){
document.getElementById('lista-lengujes').style.height = "96px";
document.getElementById('lista-lengujes').style.transition = "1s";
document.getElementById('iconol').style.transform = "rotate(45deg)";
document.getElementById('iconol').style.transition = "0.5s";
}
function ajustes(){
document.getElementById('lista-ajustes').style.height = "64px";
document.getElementById('lista-ajustes').style.transition = "1s";
document.getElementById('iconoj').style.transform = "rotate(180deg)";
document.getElementById('iconoj').style.transition = "2s";
document.getElementById('listap').style.height = "0px";
document.getElementById('listap').style.transition = "2s";
document.getElementById('iconop').style.transform = "rotate(0deg)";
document.getElementById('iconop').style.transition = "0.5s";
document.getElementById('lista-lengujes').style.height = "0px";
document.getElementById('lista-lengujes').style.transition = "0.3s";
document.getElementById('iconol').style.transform = "rotate(0deg)";
document.getElementById('iconol').style.transition = "0.5s";
document.getElementById('listahome').style.height = "0px";
document.getElementById('listahome').style.transition = "0.3s";
document.getElementById('iconoh').style.transform = "rotate(0deg)";
document.getElementById('iconoh').style.transition = "0.5s";
}
function perfil(){
document.getElementById('lista-ajustes').style.height = "0px";
document.getElementById('lista-ajustes').style.transition = "2s";
document.getElementById('iconoj').style.transform = "rotate(-180deg)";
document.getElementById('iconoj').style.transition = "2s";
document.getElementById('perfil').style.height = "350px";
document.getElementById('perfil').style.transition = "2s";
document.getElementById('menu').style.height = "0px";
document.getElementById('menu').style.transition = "2s";
document.getElementById('iconoj').style.transform = "rotate(-180deg)";
}
function cerarperfil(){
document.getElementById('perfil').style.height = "0px";
document.getElementById('perfil').style.transition = "1s";
document.getElementById('menu').style.height = "450px";
document.getElementById('menu').style.transition = "2s";
}
function windowinfo(){
document.getElementById('informacion-box').style.width = "300px";
document.getElementById('informacion-box').style.height = "450px";
document.getElementById('informacion-box').style.transition = "2s";
document.getElementById('informacion-box').style.transform = "translateX(0%)";
document.getElementById('lista-ajustes').style.height = "0px";
document.getElementById('iconoj').style.transform = "rotate(-180deg)";
}
function cerarinformacionextra(){
document.getElementById('informacion-box').style.width = "0px";
document.getElementById('informacion-box').style.height = "0px";
document.getElementById('informacion-box').style.transition = "2s";
document.getElementById('informacion-box').style.transform = "translateX(-110%)";
}
