He creado un menú que se despliega en hover
sobre el ícono y submenú, lo mismo sobre el enlace Servicios. La idea es que se despliegue en hover
en pantallas grandes y clickeando, en pantallas pequeñas. Pero no funciona.
Código:
/* Determina si mostrar o no el icono para desplegar */
function ponerDespliegue(){
if($(window).width() > 979){ return; }
// Pongo todo a cerrado
$(".nivel1, .nivel1, .itemN2 > a > .hijos").css({"display":"none"});
$(".hijos").removeClass("hijos_close");
$(".hijos").removeClass("hijos_open");
$(".hijos").addClass("hijos_close");
// Mostrar iconos
var hermanos = null;
$(".nivel3").each(function(i, e) {
hermanos = $(this).parent().find(".hijos").eq(0);
if($(hermanos).length){
$(hermanos).css({"display":"block"});
}
});
}
/* Función que abre el nivel inferior */
function toggleResponsivo(nodo, nivel){
event.preventDefault();
var superior = null;
if(nivel == '1'){
superior = $(nodo).parent().parent();
$(superior).find(".nivel2").eq(0).toggle(function(){
var cambio = $(this).parent().siblings("a").eq(0).find(".hijos").eq(0);
if( $(this).css("display") == "block" ){
$(cambio).removeClass("hijos_close");
$(cambio).addClass("hijos_open");
}
else{
$(cambio).removeClass("hijos_open");
$(cambio).addClass("hijos_close");
}
});
}
else{
$(nodo).parent().parent().find(".nivel3").eq(0).toggle(function(){
var cambio = $(this).siblings("a").eq(0).find(".hijos").eq(0);
if( $(this).css("display") == "block" ){
$(cambio).removeClass("hijos_close");
$(cambio).addClass("hijos_open");
}
else{
$(cambio).removeClass("hijos_open");
$(cambio).addClass("hijos_close");
}
});
}
}
/* LLAMADAS EN CARGAS */
$(document).ready(function(e){
ponerDespliegue();
$("#pull").unbind().click(function(){
$(".hijos").removeClass("hijos_close");
$(".hijos").removeClass("hijos_open");
$(".hijos").addClass("hijos_close");
$("#menu").toggle();
if($(window).width() < 980){
$(".nivel2, .nivel3").css("display", "none");
}
});
});
$(window).resize(function(e) {
ponerDespliegue();
if($(window).width() > 979){
$(".nivel2, .nivel3").removeAttr("style");
$(".hijos").css("display","none");
}
});
/* GENERAL */
/*- General -*/
#menu{ background-color:#000; height:220px; clear:both; }
#menu > ul{ margin:0 auto; height: 500px; z-index:9999; }
#menu li{ position:relative; }
#menu a{ font-size:112.5%; height:100%; line-height:30px; padding:0px 13px; display:block; }
#menu a,
#menu a:visited{ color:#FFF; }
#menu a:hover,
#menu li.activo > a{ color:#a88c30 !important; opacity:1; cursor:pointer; }
.menu_fixed{ position:fixed; top:0px; left:0px; right:0px; margin:0px; z-index:8888; border-bottom:1px solid #FFF; }
.hijos{ position: absolute; top:1px; right: 5px; display:block; height:22px; width:22px; outline:1px solid; text-align:center; font-size:22px; line-height:1em; font-weight:bold; color:#a88c30; background-color:#FFF; }
.hijos_close:after{ content:'+'; margin-top:2px; }
.hijos_open:after{ content:'-'; margin-top:2px; }
/*- Nivel 1 -*/
.nivel1{ }
/*- Nivel 2 -*/
.nivel2{ background-color:red; }
/*- Nivel 3 -*/
.nivel3{ background-color:red; }
/* MENÚ COMÚN TABLET + MOVIL */
@media screen and (min-width: 200px) and (max-width: 980px) {
/* General */
#menu{ display:none; height:0px; width:280px; position:absolute; right:0px; top:63px; }
#menu > ul { background-color:#000; width:100%; }
.hijos{ display:block; }
#pull{ width:96%; display:inline-block; position: relative; line-height:30px; color:#FFF; text-align:left; margin-left: 40px; }
#pull:after { content:""; background: url('../images/comun/nav-icon.png') no-repeat; background-size:cover; width: 40px; height: 40px; position: absolute; right: 30px; top:-12px; }
}
/* PC */
@media screen and (min-width: 980px) {
/*- General -*/
.hijos{ display:none; }
/*- Nivel 1 -*/
.nivel1 > li{ vertical-align:top; border-right:1px solid #FFF; margin-right:-4px; }
.nivel1 > li:last-child{ border-right:none; }
.nivel1 > li:hover .nivel2{ display:block; }
/*- Nivel 2 -*/
.nivel2{ display:none; position: absolute; top:30px; }
.nivel2 > li:hover .nivel3{ display:block; }
/*- Nivel 3 -*/
.nivel3{ display:none; position: absolute; top:0px; left: 100%; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="menuHamburguesa">
<img src="images/comun/menu-ico.png" alt="">
</a>
<nav id="menu">
<ul class="nivel1">
<li>
<a href="index.php" class="link_nivel1">
INICIO
<span class="hijos" onclick="toggleResponsivo(this, 2)"></span>
</a>
</li>
<li>
<a href="labelle.php" class="link_nivel1">
LA BELLE
<span class="hijos" onclick="toggleResponsivo(this, 2)"></span>
</a>
</li>
<li>
<a class="link_nivel1">
SERVICIOS
<span class="hijos" onclick="toggleResponsivo(this, 2)"></span>
</a>
<ul class="nivel2">
<li><a>PELUQUERIA</a></li>
<li><a>ESTETICA</a></li>
<li><a>TRATAMIENTO FACIAL</a></li>
<li><a>TRATAMIENTO CORPORAL</a></li>
<li><a>LASER</a></li>
<li><a>MAQUILLAJE</a></li>
</ul>
</li>
<li>
<a class="link_nivel1">
PROMOCIONES
<span class="hijos" onclick="toggleResponsivo(this, 2)"></span>
</a>
</li>
<li>
<a class="link_nivel1">
RESERVAR
<span class="hijos" onclick="toggleResponsivo(this, 2)"></span>
</a>
</li>
<li>
<a class="link_nivel1">
NOTICIAS
<span class="hijos" onclick="toggleResponsivo(this, 2)"></span>
</a>
</li>
<li>
<a class="link_nivel1">
CONTACTO
<span class="hijos" onclick="toggleResponsivo(this, 2)"></span>
</a>
</li>
</ul>
</nav>