<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<style>
/* definimos el cuadrado con las lineas */
.iconoMenuDesplegable {
position: relative;
height: 40px;
width: 40px;
}
.iconoMenuDesplegable>span, .iconoMenuDesplegable>span::after {
position: absolute;
border: 6px solid black; /* border color */
border-width: 6px 0;
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
background: white;
}
.iconoMenuDesplegable>span {
cursor: pointer;
width: 40px;
height: 27px;
}
.iconoMenuDesplegable>span::after {
content: "";
width: 100%;
height: 19%;
top: 19%;
}
.efecto>span,.efecto>span::after {
border-color:#808080;
}
/* definimos el menu */
#menu {
display:none;
list-style: none;
padding:0px;
margin:0px;
}
#menu a:link, a:visited, a:hover {color:#0000ab;text-decoration:none;}
#menu li {
background-color:#aaa;
padding:5px 10px;
border-bottom:1px solid #fff;
}
#menu li:hover {
background-color:#808080;
padding:5px 10px;
border-bottom:1px solid #fff;
}
</style>
<script>
$(document).ready(function(){
$(".iconoMenuDesplegable").click(function(){
if($("#menu").is(":visible"))
{
$("#menu").slideUp("slow");
$(".iconoMenuDesplegable").removeClass("efecto");
}else{
$("#menu").slideDown("slow");
$(".iconoMenuDesplegable").addClass("efecto");
}
});
});
</script>
</head>
<body>
<header>
<nav>
<div class="iconoMenuDesplegable">
<span></span>
</div>
<ul id="menu">
<a href=""><li>link 1</li></a>
<a href=""><li>link 2</li></a>
</ul>
<nav>
</header>
</body>
</html>
