Hola a todos. No se ya que es lo que estoy haciendo mal y me estoy volviéndome loco.
Estoy trasteando con un menu desplegable en jquey. que he encontrado en codepen:
http://codepen.io/jrelwell/pen/tnpcf
El caso es que la página tal cual me la he bajado para jugar con ella. Y no soy capaz de hacer funcionar la acción de jQuery de sacar el desplegable.
No se que estoy haciendo algo mal. Alguien puede echarme una mano porfavor.
Os dejo el código:
Código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<style>
a:link {text-decoration: none; color: #bdc3c7;}
a:visited {text-decoration: none; color: #bdc3c7;}
a:hover {text-decoration: none; color: #bdc3c7;}
a:active {text-decoration: none; color: #bdc3c7;}
body {
background-color: #2c3e50;
font-family: Helvetica;
font-size: 22pt;
}
.menu {
position: absolute;
display: block;
height: 100%;
top: 0px;
left: -200px;
background-color: #34495e;
box-shadow: 5px 5px 10px;
}
#links {
position: relative;
float: left;
}
#link_list {
list-style-type: none;
width: 100%;
padding: 0px 50px 0px 0px;
}
#link_list li {
display: block;
width: 100%;
}
#link_list li:hover {
background-color: #e74c3c;
}
#toggle {
float: right;
position: relative;
top: 50%;
right: -19px;
width: 20px;
height: 20px;
background-color: #7f8c8d;
border: 2px solid #ecf0f1;
border-radius: 20px;
text-align: center;
padding: 5px;
box-shadow: 1px 5px 20px #333333 inset;
}
</style>
</head>
<body>
<div id="sidebar" class="menu">
<div id="links">
<ul id="link_list">
<a href=""><li>Example</li></a>
<a href=""><li>Example</li></a>
<a href=""><li>Example</li></a>
</ul>
</div>
<div id="toggle">
</div>
</div>
<!-- script -->
<script>
$("#toggle").click(function(){
var w = $('#sidebar').width();
var pos = $('#sidebar').offset().left;
if(pos == 0){
$("#sidebar").animate({"left": -w}, "slow");
}
else
{
$("#sidebar").animate({"left": "0"}, "slow");
}
});
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
</body>
</html>