0

Hola estoy teniendo un problema con el menu de este sitio El problema es que cuando paso por encima de conocenos y se despliega me cuesta acceder a los items que estan dentro, ya que se me va. adjunto el código

var hoverProgramas = false; 
var flotanteProgramasLoaded = false;
var hoverConocenos = false;
var flotanteConocenosLoaded = false;

jQuery(document).ready(function(){  

  //Accion: Conocenos
  $("#conocenos-flotar").hover(function() {
      $(".flotante").hide();
      $("#flotante_c").show();
      $(".flotante-conocenos").toggle();
      $('#desvanecimiento-01').hide();
      $('#desvanecimiento-02').toggle();
      hoverConocenos = !hoverConocenos;
  });
  
  $('#desvanecimiento-02').hover(function() {
      $(".flotante-conocenos").hide();
      $('#desvanecimiento-02').hide();
      $("#ArtistasLetraSeleccionada").html("");
      $("#ArtistasLetraSeleccionada").hide();
      $(".seleccionConocenosLetra li").removeClass("seleccionado");
      hoverConocenos = !hoverConocenos;
  });

   $(".flotante-conocenos").hover(function(){
      $(".flotante-conocenos").show();
      $('#desvanecimiento-02').show();
      hoverConocenos = true;
   });
  
//Accion: Programas 
  $("#noticias-flotar").hover(function(){
      $(".flotante").hide();
      $("#flotante_p").show();
      if(!hoverProgramas){
          $(".flotante-programas").toggle();
      $('#desvanecimiento-02').hide();
      $('#desvanecimiento-01').toggle();
          hoverProgramas = true; 
      }
  });

  $(".flotante-programas").hover(function(){
      $(this).show();
      $('#desvanecimiento-01').show();
      hoverProgramas = true;
      
  });

  $("#desvanecimiento-01").hover(function(){
      $(".flotante-programas").hide();
      $('#desvanecimiento-01').hide();
      hoverProgramas = false; 
  });

});  

que hice.

2

1 respuesta 1

1

Después de batallar con tu código logre la función que buscas que haga tu menú. En primer lugar las funciones que necesitas es mouseleave() y mouseenter().

Como primer paso en el html agregue las ids flotante-conocenos y flotante-programas a los div con class flotante ya que ellos son los contenedores de tu menú desplegable. Hice lo mismo también con las opciones restantes.

A nivel de CSS cambie el class flotante:

.flotante {
  position: absolute;
  width: 100%;
  background-color: #e03131;
  z-index:11;
  top: 134px;
  display:none; //agregue esto para que no se muestre inicialmente los divs
}

Y elimine el estilo de sus hijos que tenían la propiedad display:none;

/*.flotante-noticias,
.flotante-artistas,*/
#desvanecimiento-01,
#desvanecimiento-02 {
   display: none; 
}

La lógica que debes emplear seria usar mouseenter para activar una función cuando el puntero ingrese a la opción CONOCENOS o PROGRAMAS , en este caso visualizar tus divs que le agregue ids según sea el caso. Después sobre esos mismos divs activar la función mouseleave para ocultarlo si es que salen del área del elemento. Finalmente hice una validaciones para que cuando entren en las opciones del menú se oculten o visualicen los menus

var hoverConocenos = false;
var hovePrograma = false;

jQuery(document).ready(function() {

  //Accion: Conocenos
  $("#conocenos-flotar").mouseenter(function() {
    // pregunto si esta activo el hover de noticias de ser true  lo cierro
    if(hovePrograma){
    $("#flotante-programas").hide();
    $('#desvanecimiento-01').hide();
    hovePrograma = false;
    }
    
    //muestro la informacion
    $("#flotante-conocenos").show();
    $('#desvanecimiento-02').show();
    hoverConocenos = true;
  });

  $("#flotante-conocenos").mouseleave(function() {
  // cuando salga el mouse del elemento div este se escondera
    $("#flotante-conocenos").hide();
    $('#desvanecimiento-02').hide();
    hoverConocenos = false;
  });

  //Accion: Programas 
  $("#programas-flotar").mouseenter(function() {
  
  // pregunto si esta activo el hover de concenos de ser true  lo cierro
    if(hoverConocenos){
      $("#flotante-conocenos").hide();
      $('#desvanecimiento-02').hide();
      hoverConocenos = false;
    }
  
      $("#flotante-programas").show();
      $('#desvanecimiento-01').show();
      hovePrograma = true;

  });

  $("#flotante-programas").mouseleave(function() {
    // cuando salga el mouse del elemento div este se escondera
    $("#flotante-programas").hide();
    $('#desvanecimiento-01').hide();
    hovePrograma = false;

  });
  
  //agrego esto para que cuando entres a unas de las opciones restantes se cierre los divs desplegados
  $("#menu-novedad").mouseenter(HideAll);
  $("#menu-contacto").mouseenter(HideAll);

  function HideAll(){
    // pregunto si esta activo el hover de noticias de ser true  lo cierro
    if(hovePrograma){
    $("#flotante-programas").hide();
    $('#desvanecimiento-01').hide();
    hovePrograma = false;
    }
    
    // pregunto si esta activo el hover de artista de ser true  lo cierro
    if(hoverConocenos){
      $("#flotante-conocenos").hide();
      $('#desvanecimiento-02').hide();
      hoverConocenos = false;
    }
    
  }

});
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
  background-color: transparent;
}

.nav-inline .nav li {
  position: static;
}

.nav-inline .nav li.open:before {
  content: " ";
  display: block;
  /*  background: #e7e7e7; */
  position: absolute;
  width: 100%;
  height: 50px;
  top: 75px;
  right: 0;
  left: 0;
}

.nav-inline .nav .dropdown-menu {
  left: 0 !important;
  right: 0 !important;
  box-shadow: none;
  border: none;
  margin: 0 auto;
  max-width: 100%;
  background: transparent;
  padding: 0;
  margin-top: 19px;
}

.nav-inline .nav .dropdown-menu li {
  float: left;
}

.nav-inline .nav .dropdown-menu li a {
  width: auto !important;
  background: transparent;
  line-height: 49px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  color: #888;
}

.nav-inline .nav .dropdown-menu li a:hover {
  color: #000;
}

.navbar-nav {
  float: right;
  margin-top: 19px;
}

.navbar-default {
  background-color: initial;
  border-color: initial;
  border: initial;
  position: relative;
  z-index: 10;
}

.navbar-default .navbar-nav>li>a {
  color: #9d9d9c;
  padding: 15px 12px;
  font-family: 'stainlesscond-regularregular';
  font-size: 15px;
}

.navbar-default .navbar-nav>li>a:hover {
  color: #e41c14;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover {
  background-color: initial;
}


/*redes sociales*/

.navbar-default .navbar-nav>li>a>.fa-facebook {
  color: #e41c14;
  font-size: 19px;
}

.navbar-default .navbar-nav>li>a>.fa-twitter {
  color: #e41c14;
  font-size: 19px;
}

.navbar-default .navbar-nav>li>a>.fa-youtube-play {
  color: #e41c14;
  font-size: 19px;
}

.navbar-default .navbar-nav>li>a>.fa:hover {
  color: #9d9d9c;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar-toggle {
  margin-top: 28px;
  background-color: #ce3629
}

.caja-menu {
  background-color: #f5f5f5;
  padding: 40px 0px 13px 106px;
  height: 234px;
}

.caja-menu ul li {
  list-style: none;
  display: block!important;
  float: initial;
}

.caja-menu ul li a {
  padding: 8px 0;
  color: #363636;
  line-height: 42px;
  text-decoration: none;
  text-transform: uppercase
}

.caja-menu ul li a:hover {
  color: #ce3629
}

.caja-accion {
  background-color: #ce3629;
  padding: 30px 30px 30px 30px;
  height: 234px;
}

.caja-accion ul li {
  list-style: none;
  float: inherit;
}

.caja-accion ul .slogan {
  text-align: center;
  color: #fff;
  margin-top: 26px;
  font-size: 26px;
  font-family: 'stainlesscond-lightregular';
  line-height: 29px;
}

.navbar-default .navbar-toggle {
  border-color: #c3360e;
}

.navbar-nav .programas-drop {
  padding: 40px 0;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #e41c14!important
}

.fondo-programa-puente {
  background-image: url('http://qkstudiodemo.com/fundacionlomanegra/images/img-puente-menu.jpg');
  background-repeat: no-repeat;
  height: 234px;
  background-size: cover;
}

.fondo-programa-puente .btn-ingresar,
.fondo-programa-compromiso .btn-ingresar,
.fondo-programa-negocios .btn-ingresar {
  background-color: #cd3128;
  color: #fff;
  display: table;
  margin: auto;
  padding: 5px 28px;
  margin-top: 8px;
  line-height: 33px;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  border-radius: initial
}

.fondo-programa-puente .btn-ingresar:hover,
.fondo-programa-compromiso .btn-ingresar:hover,
.fondo-programa-negocios .btn-ingresar:hover {
  background-color: #fff;
  color: #cd3128;
}

.fondo-programa-puente img,
.fondo-programa-compromiso img,
.fondo-programa-negocios img {
  margin-top: 50px;
}

.fondo-programa-compromiso {
  background-image: url('../images/img-compromiso-menu.jpg');
  background-repeat: no-repeat;
  height: 234px;
  background-size: cover;
}

.fondo-programa-negocios {
  background-image: url('http://qkstudiodemo.com/fundacionlomanegra/images/img-negocio-menu.jpg');
  background-repeat: no-repeat;
  height: 234px;
  background-size: cover;
}

.fondo-programa-negocios span {
  color: #fff;
  font-size: 20px;
  margin-top: 45px;
  text-align: center;
  text-transform: uppercase;
  display: block;
}

.flotante {
  position: absolute;
  width: 100%;
  background-color: #e03131;
  z-index:11;
  top: 134px;
  display:none;
}

.flotante-noticias {
  height: 234px;
}

.flotante-noticias a {
  margin-top: 20px;
}

.desvanecimiento {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.56);
  position: fixed;
}

/*.flotante-noticias,
.flotante-artistas,*/
#desvanecimiento-01,
#desvanecimiento-02 {
  display: none;
}

.btn_descarga {
  background-color: #e41b13;
  border-color: #fff;
  padding: 16px 29px;
  color: #fff;
  font-family: 'stainlesscond-lightregular';
  font-size: 19px;
  position: relative;
  z-index: 10;
  left: 0;
  border-radius: initial;
  -webkit-transition: all;
  text-transform: uppercase;
  /* margin-top: 30px; */
  display: table;
  margin: auto;
  margin-top: 30px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lineas">
  <div class="box">
    <div class="box-sm red"></div>
    <div class="box-sm gray"></div>
    <div class="box-sm red "></div>
    <div class="box-sm gray "></div>
    <div class="box-sm red "></div>
  </div>
</div>
<!-- LINEAS DECORATIVAS -->
<header>
  <div class="navbar navbar-default nav-inline" role="navigation">
    <div class="container">
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="dropdown">
            <a href="#" class="dropdown-toggle hidden-lg hidden-md hidden-sm" data-toggle="dropdown">CONOCENOS <span class="caret"></span></a>
            <ul class="hidden-lg hidden-md hidden-sm dropdown-menu megamenu row">
              <li class="col-sm-4 col-md-3 col-lg-3 caja-accion">
                <ul>
                  <li><img class="center-block" src="<?php echo THEME_IMAGES; ?>/nuestra-accion.png" alt="nuestra accion"></li>
                  <li class="slogan">Nuestra acción se sustenta en<strong style="letter-spacing: 1.5px;"> 4 líneas estratégicas</strong></li>
                </ul>
              </li>
              <li class="col-sm-5 col-md-6 col-lg-6 sin-padding">
                <ul class="imagen-overflow">
                  <li style="list-style: none">
                    <img class="img-responsive center-block" src="<?php echo THEME_IMAGES; ?>/personas.jpg" alt=""></li>
                </ul>
              </li>
            </ul>
            <a href="#" id="conocenos-flotar" title="Artistas" class="link hidden-xs">CONOCENOS <span class="caret"></span></a>
          </li>
          <li class="dropdown programas">
            <a href="#" class="dropdown-toggle hidden-lg hidden-md hidden-sm" data-toggle="dropdown">PROGRAMAS <span class="caret"></span></a>

            <ul class="dropdown-menu programas-drop hidden-lg hidden-md hidden-sm" role="menu">
              <li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-puente">
                <a href=""><img class="img-responsive center-block" src="" alt="">
                  <a href="" class="btn btn-ingresar" title="">INGRESAR</a>
                </a>
              </li>
              <li class="hidden-sm hidden-md hidden-lg"><a href="" title="">PROGRAMA PUENTE</a></li>

              <li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-compromiso">
                <a href=""><img class="img-responsive center-block" src="" alt="">
                  <a href="" class="btn btn-ingresar" title="">INGRESAR</a>
                </a>
              </li>
              <li class="hidden-sm hidden-md hidden-lg"><a href="" title="">PROGRAMA COMPROMISO</a></li>

              <li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-negocios">
                <a href=""><img class="img-responsive center-block"><span>Programa de negocios exclusivos</span>
                  <a href="" class="btn btn-ingresar" title="">INGRESAR</a></a>
              </li>

              <li class="hidden-sm hidden-md hidden-lg"><a href="" title="">NEGOCIOS INCLUSIVOS</a></li>
            </ul>


            <a href="" id="programas-flotar" title="Programas" class="link hidden-xs">PROGRAMAS <span class="caret"></span></a>


          </li>
          <li class="dropdown">
            <a id="menu-novedad"  href="">NOVEDADES <!-- <span class="caret"></span> --></a>
          </li>

          <li><a id="menu-contacto" href="">CONTACTO</a></li>
          <li><a href="" title=""><i class="fa" aria-hidden="true"></i></a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>

    <div class="desvanecimiento" id="desvanecimiento-01"></div>
    <div class="desvanecimiento" id="desvanecimiento-02"></div>
  </div>
  <div id="flotante-conocenos" class="flotante">
    <div class="flotante-artistas" >
      <ul class="hidden-xs">

        <li class="col-sm-3 col-md-3 col-lg-3 caja-menu">
          <ul>
            <li><a href="" title="">somos f.n.l.</a></li>
            <li><a href="" title="">cómo y donde trabajamos</a></li>
            <li><a href="" title="">AUTORIDADES Y EQUIPO</a></li>
            <li><a href="" title="">informes de gestión</a></li>
          </ul>
        </li>
        <li class="col-sm-4 col-md-3 col-lg-3 caja-accion">
          <ul>
            <li><img class="center-block"></li>
            <li class="slogan">Nuestra acción se sustenta en<strong style="letter-spacing: 1.5px;"> 4 líneas estratégicas</strong></li>
          </ul>
        </li>
        <li class="col-sm-5 col-md-6 col-lg-6 sin-padding">
          <ul class="imagen-overflow">
            <li style="list-style: none">
              <img class="img-responsive center-block"></li>
          </ul>
        </li>

      </ul>
    </div>
  </div>
  <div id="flotante-programas" class="flotante">
    <!--DESPLEGABLE MENU-->
    <div class="container-fluid flotante-noticias sin-padding">
      <ul class="hidden-xs">
        <li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-puente">
          <a href=""><img class="img-responsive center-block" src="" alt="">
            <a href="" class="btn btn-ingresar" title="">INGRESAR</a>
          </a>
        </li>
        <li class="hidden-sm hidden-md hidden-lg">
          <a href="" title="">PROGRAMA PUENTE</a>
        </li>

        <li class="hidden-xs col-sm-4 col-md-4 col-lg-4 fondo-programa-compromiso">
          <a href=""><img class="img-responsive center-block" src="" alt="">
            <a href="" class="btn btn-ingresar" title="">INGRESAR</a>
          </a>
        </li>
        <li class="hidden-sm hidden-md hidden-lg">
          <a href="" title="">PROGRAMA COMPROMISO</a>
        </li>

      </ul>
    </div>
  </div>
</header>

.

3
  • Sos un genio! estuve todo el día tratando de resolverlo y no pude. la verdad que me has dado una re mano. Muchas gracias
    – MarianoF
    Commented el 1 mar. 2018 a las 22:35
  • Solo como recomendación trata de leer bien la documentación de las funciones de Jquery o Javascript para que encuentres la solución que buscas, en este caso el hover no era una muy buena. Commented el 1 mar. 2018 a las 22:40
  • Si pasa que recién estoy arrancando y todavía me queda mucho por aprender sobre el tema, pero si lo voy a tener en cuenta.
    – MarianoF
    Commented el 1 mar. 2018 a las 23:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.