hola, elabore un pequeño menú HTML responsive, y con jquery hago la animación del menú cuando el max-with es de 800px, pero cuando maximizo la pagina los menus siguen haciendo uso del jquery, o sea que al dar click sobre el menú aparece pero yo desearía que al quitar el enfoque se volviera a ocultar, o simplemente no hiciera caso al click, porque solo es necesario cuando la pantalla es mas pequeña, pero no se si con un if puedo decir if(width<=800) o algo asi para que cuando la pagina este maximizada o mayor a 800px no haga caso a este bloque javascript
$(document).ready(main);
var contador = 1;
function main() {
$('.menu_bar').click(function () {
if (contador == 1) {
$('.navmenu').animate({
left: '0' //aquí le digo que aparezca
}//animate
);
contador = 0;
}//if
else {
contador = 1;
$('.navmenu').animate({
left: '-100%' //aquí le digo que desaparezca
}//animate
);
}//else
});//menu_bar
$('.submenu').click(function () {
$(this).children('.children').slideToggle(); //aquí muestra el submenu
});//submenu
}
Yo usaría CSS Media Queries, te evitas tener que estar realizando un script y pasas directamente a escribir código CSS dentro de esta query:
<style>
@media (max-width: 800px) {
....
}
</style>
Mod: Obligatorio el uso de etiquetas GeSHi.
en efecto eso es lo que hice
@media screen and (max-width: 800px) {
#logo,#antena {
display:none;
}
.menu_bar {
display: block;
width: 100%;
position: fixed;
background: #3ca0e9;
top:0;
}
.menu_bar .btn_menu {
display: block;
padding: 20px;
color: #fff;
overflow: hidden;
font-size: 25px;
font-weight: bold;
text-decoration: none;
}
.menu_bar .btn_menu:hover {
cursor: pointer;
}
.menu_bar span {
float: right;
font-size: 40px;
}
.navmenu {
/*border-bottom: 30px;*/
width: 80%;
position: fixed;
right: 100%;
margin:0;
overflow: scroll;
height: 100%;
}
.navmenu ul li {
display: block;
border-bottom: 1px solid rgba(255,255,255,.5);
}
.navmenu ul li a {
display: block;
font:12px;
}
.navmenu ul li .children {
width: 100%;
position: relative;
}
.navmenu ul li:hover .children {
display: none;
}
.navmenu ul li .children li a {
margin-left:20px;
}
}
pero para la animación utilice el código javascript de arriba, pero cuando se maximiza la pagina el menú se despliega con :hover y con click pero con este ultimo deseo que se oculte sin dar otro click