Hola!, estoy iniciandome en esto de Html/jquery/java/php etc etc. Estoy pegado hace muchos días en algo que creo es muy sencillo.
Se trata de un menu despegable que funciona de maravillas pero no logro que se oculte al hacer un click con la opción elegida.
gracias!
El código script.js
Código Java:
Ver originalvar ww = document.body.clientWidth;
$(document).ready(function() {
$(".nav li a").each(function() {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
$(".toggleMenu").click(function(e) {
e.preventDefault();
$(this).toggleClass("active");
$(".nav").toggle();
});
adjustMenu();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustMenu();
});
var adjustMenu = function() {
if (ww < 768) {
$(".toggleMenu").css("display", "inline-block");
if (!$(".toggleMenu").hasClass("active")) {
$(".nav").hide();
} else {
$(".nav").show();
}
$(".nav li").unbind('mouseenter mouseleave');
$(".nav li a.parent").unbind('click').bind('click', function(e) {
// must be attached to anchor element to prevent bubbling
e.preventDefault();
$(this).parent("li").toggleClass("hover");
});
}
else if (ww >= 768) {
$(".toggleMenu").css("display", "none");
$(".nav").show();
$(".nav li").removeClass("hover");
$(".nav li a").unbind('click');
$(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
// must be attached to li so that mouseleave is not triggered when hover over submenu
$(this).toggleClass('hover');
});
}
}
Cotigo html:
Código HTML:
<body>
<div class="container">
<a class="toggleMenu" >Menu</a>
<ul class="nav">
<li class="test"><a >Ingresos</a>
<ul>
<li>
<a name="ID" id="ID" style="cursor:pointer;">ID</a>
</li>
<li>
<a href="#" onclick="EST_FECHA();" style="cursor:pointer;">Fecha</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu2</a>
<ul>
<li>
<a href="#">submenu2</a>
<ul>
<li><a href="#">opcion1</a></li>
<li><a href="#">opcion2</a></li>
<li><a href="#">opcion3</a></li>
</ul>
</li>
<li>
<a href="#">submenu3</a>
<ul>
<li><a href="#">opcion1</a></li>
<li><a href="#">opcion2</a></li>
<li><a href="#">opcion3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="script.js"></script> El codigo css
Código CSS:
Ver originalbody, nav, ul, li, a {margin: 0; padding: 0;}
.container {
width: 90%;
max-width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#9EB847;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
}
.nav > li > .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
@media screen and (max-width: 768px) {
.active {
display: block;
}
.nav > li {
float: none;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}