Barra menú desplegable [ SOLUCIONADO ]

[vickthikor]

Hola, tengo un menú que funciona haciendo click (se abre) y si haces otra vez click (se cierra).

Pero me gustaría que este menú se desplegara solo al pasar por encima con el ratón (puntero) y se cerrara cuando el ratón saliera del menú, pero no tengo mucha idea de JS o Jquery y me pierdo un poco.

 

 

 

Os dejo el código del menú y os adjuntos los archivos del modulo que hace esa función, haber si alguien que tenga mas idea me puede ayudar, yo lo he intentado pero no consigo hacer que realice esta función bien.

 

archivo JS/tptnscript.js

$(document).ready(function(){
	
	$("#back-top").hide();
	$(window).scroll(function () {
		if ($(this).scrollTop() > 300) {
			$('#back-top').fadeIn();
		} else {
			$('#back-top').fadeOut();
		}
	});
	$('#back-top a') .open(function () {
		$('body,html').animate({scrollTop: 0}, 800);
		return false;
	});
	
	$('#footer a.toggler, .tglr').hide(function () {
		$(this).parent().toggleClass('toggle');
		$(this).parent().children('ul').toggleClass('toggle').slideToggle();
	});
	
	$('#continue_product_confirm, #continue_product_error').click(function(){
		$('#bg_overlay, .notifbox').fadeOut();
	});
	
	if ($('body').attr('id') ) {
		$('#categories_block_left').hide();
		$('#top-categ span').click(function() {
			$('#categories_block_left').slideToggle();
			$(this).toggleClass('toggle');
		});
	}
});	

tptntoplinks.zip

Edited November 4, 2015 by vickthikor (see edit history)

[vickthikor]

Alguien podría ayudarme Gracias!

[Dany developer]

Hola vickthikor

 

¿Este modulo es un nuevo menu o es el de default?

Tampoco soy muy habil en jquery pero entiendo algo de las funciones: prueba haciendo lo de este ejemplo:

http://jsfiddle.net/26C7d/

[vickthikor]

Hola Dany developer, muchas gracias por tu respuesta ahora se despliega y se contrae! pero falta una cosa,

me gustaría que cuando se despliega el menú si bajas con ese puntero a ese menu desplegado, este se mantuviera.

 

cuando intentas bajar al menu desplegado para seleccionar una opción se esconde y no te da tiempo a seleccionar nada.

[Dany developer]

a ok, te entendí mal, una pregunta es el menú por default para poder hacer pruebas o podrías pasarme la url de tu pagina para probar unas cosas

[vickthikor]

Se me olvido decirlo utilizo Prestashop 1.5.6.2 la ultima version de la 1.5

[vickthikor]

Podría ayudarme alguien que sepa algo de JQuery o JS, casi lo tengo pero no consigo que el menú se mantenga desplegado cuando bajo el puntero, se lo agradecería muchísimo.

 

Un saludo 

[vickthikor]

Sigo con el mismo problema, Alguien me puede ayudar !!! Moderadores ???  

[vickthikor]

Hola he podido comprobar que si cambio la función "click" del ultimo parrafo 

 

$('#top-categ span').click(function() { ......}

 

Por mouseover 

 

$('#top-categ span').mouseover(function() { ... }

 

 

Al pasar el ratón se habré y se cierra, lo que pasa es que se abre y cierra solo cuando pasar por encima del botón que esta arriba, lo que necesito es que se cierre el menú cuando sales fuera de el, y no cuando al pasar por el botón de arriba.

 

 

no se que mas código debería de agregar

 

 

 

 

 

también he estado intentado solucionarlo con CSS pero no encuentro la manera. gracias

[vickthikor]

if ($('body').attr('id') ) {
        $('#categories_block_left').hide();
        $('#top-categ span').click(function() {
            $('#categories_block_left').slideToggle();
            $(this).toggleClass('toggle');
        });

 

 

 

Lo que me gustaría decirle a #categories_block_left es que cuando mi ratón esta fuera el menú se contraiga.

[vickthikor]

Hola, He dado con casi todo la solución solo me queda un paso pero la idea tiene que ser esta, Solo falta que cuando entras dentro del botón (se abre el menú) y no entras dentro del menú que se despliega, si no que simplemente sales del botón que lo acciona (sin pasar por el menú) este menú se cierre; lo que no se es como añadir una función que me haga eso.

 

Decirle que si entra en el botón "('#top-categ span')" y pasa a la parte del menú ('#categories_block_left') este no se cierre, pero que si entra dentro del botón y sale de el sin pasar por el menú este se cierre. 

if ($('body').attr('id')) {
		$('#categories_block_left').hide();
		$('#top-categ span').mouseenter(function() {
			$('#categories_block_left').slideToggle();
			$(this).toggleClass('categorias_menu');
		});
		
		
		$("#categories_block_left").mouseleave(function(e){
      $('#categories_block_left').slideToggle();
			$(this).toggleClass('categorias_menu');
		
   });
		
		
		
		
		
	}
});	 

Lo he intentado hacer con css pero no me ha salido bien ninguna vez y esto creo que es lo mas que puedo dar dentro de Javascrip no tengo mucha mas idea... 

 

 

Espero la ayuda, Gracias

[vickthikor]

Después de mucho investigar he intentar darle una solución, Dany Developer, me ha dado la solución 

 

 

 

 

Como te mencione pensé que te referías al menú principal, estuve haciendo pruebas y me funciono este script, pruebalo haber que tal te funciona a ti:

<script type="text/javascript">
$("#top-categ span, #categories_block_left").hover(
function () {
$(this).addClass('toggle');
$("#categories_block_left").css("display", "block");
},
function () {
$(this).removeClass('toggle');
$("#categories_block_left").css("display", "none");
}
);    
</script>

 

 

le estoy muy agradecido, 

 

saludos, doy el caso por solucionado