1

Tengo una galería pero me queda detrás del menú normal y del menú responsivo. ¿Por qué esta galería me queda detrás del menu normal y menu responsive? ¿Cómo puedo solucionarlo?

Éste es mi código:

$(function() {

  var Page = (function() {

    var $navArrows = $('#nav-arrows').hide(),
      $shadow = $('#shadow').hide(),
      slicebox = $('#sb-slider').slicebox({
        onReady: function() {

          $navArrows.show();
          $shadow.show();

        },
        orientation: 'r',
        cuboidsRandom: true,
        disperseFactor: 30
      }),

      init = function() {

        initEvents();

      },
      initEvents = function() {

        // add navigation events
        $navArrows.children(':first').on('click', function() {

          slicebox.next();
          return false;

        });

        $navArrows.children(':last').on('click', function() {

          slicebox.previous();
          return false;

        });

      };

    return {
      init: init
    };

  })();

  Page.init();

});
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

header {
  height: 50px;
  background: #01A9DB;
  color: aliceblue;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#btn-menu {
  display: none;
}

header label {
  font-size: 35px;
  cursor: pointer;
  display: none;
}

.menu ul {
  background: #01A9DB;
  display: flex;
  list-style: none;
}

.menu ul ul {
  display: none;
}

.menu a {
  display: block;
  padding: 15px 20px;
  color: aliceblue;
  text-decoration: none;
}

.menu a:hover {
  background: #AF7AC5;
}

.menu a span {
  margin-left: 10px;
}

.menu ul li:hover ul {
  display: block;
  position: absolute;
}

@media (max-width:768px) {
  header label {
    display: block;
  }
  .menu {
    position: absolute;
    top: 50px;
    left: 0;
    width: 70%;
    transform: translateX(-100%);
    transition: all 0.3s;
  }
  .menu ul {
    display: block;
    background: #01A9DB;
  }
  .menu ul li:hover ul {
    display: none;
    position: static;
  }
  .menu a span {
    position: absolute;
    right: 5px;
  }
  #btn-menu:checked~.menu {
    transform: translateX(0%);
  }
  .menu ul ul {
    background: rgba(0, 0, 0, 0.4);
  }
  .menu ul ul a {
    padding: 15px 40px;
  }
}
<link rel="stylesheet" type="text/css" href="css4/slicebox.css" />
<link rel="stylesheet" href="https://tympanus.net/Development/Slicebox/css/slicebox.css" />

<script type="text/javascript" src="https://tympanus.net/Development/Slicebox/js/modernizr.custom.46884.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://tympanus.net/Development/Slicebox/js/jquery.slicebox.js"></script>


<header>
  <input type="checkbox" id="btn-menu">
  <label for="btn-menu" class="icon-menu">MENU</label>
  <nav class="menu">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li class="submenu"><a href="#">Quiénes Somos<span class="icon-down-open"></span></a>
        <ul>
          <li><a href="#">Historia</a></li>
          <li><a href="#">Gobierno Corporativo</a></li>
          <li><a href="#">Transparencia Social</a></li>
        </ul>
      </li>
      <li><a href="#">Actividades</a></li>
      <li class="submenu"><a href="#">Oportunidades<span class="icon-down-open"></span></a>
        <ul>
          <li><a href="#">Programa Plan Padrino</a></li>
          <li><a href="#">Programa de Voluntariado</a></li>
          <li><a href="#">Donaciones</a></li>
        </ul>
      </li>
      <li><a href="#">CAMPUS</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </nav>
</header>
<br>
<div class="container">
  <div class="wrapper">
    <ul id="sb-slider" class="sb-slider">
      <li>
        <a target="_blank"><img src="https://placehold.it/600x400" alt="image1" /></a>
        <div class="sb-description">
          <h3><strong><i>"La educación mediante la academia y el juego, es la base fundamental de la integración social."</i></strong></h3>
        </div>
      </li>
      <li>
        <a target="_blank"><img src="https://placehold.it/600x400/#aa4040" alt="image2" /></a>
        <div class="sb-description">
          <h3><strong><i>"No existen límites para explorar el talento de un niño. Aquí, exploramos y reforzamos esa habilidad."</i></strong></h3>
        </div>
      </li>
    </ul>

    <div id="nav-arrows" class="nav-arrows">
      <a href="#">Next</a>
      <a href="#">Previous</a>
    </div>
  </div>

</div>

5
  • 2
    Hola Francisco, te damos la bienvenida a Stack Overflow en español (completa el recorrido para aprender más sobre el sitio y su funcionamiento general y así ganar tu primera medalla). Sería ideal que editases la pregunta para añadir algo más de información: qué es lo que estás intentando hacer con el código compartido y qué error concreto te sale (y dónde). Lee Cómo preguntar para más información y recomendaciones. Commented el 5 ago. 2018 a las 18:45
  • No soy un experto pero creo que deberías detallar un poco más tu pregunta porque no entendí cuál es el origen del problema y solo has puesto... Commented el 5 ago. 2018 a las 18:46
  • No hace falta ser experto alguno, solo hay cachos aleatorios del contenido de su pagina. No hay pregunta alguna.
    – CristianS9
    Commented el 6 ago. 2018 a las 6:23
  • 2
    He recortado el código a lo mínimo, lo he puesto como ejecutable, he incluido las librerías que estaban rotas... y la animación se ve bien por encima del menú y no por detrás. Puede que alguno de los estilos que incluiste en tu CSS estuviera rompiendo eso, pero como no los has incluido todos, no podemos saber qué está fallando. Tal y como está en la pregunta, parece funcionar sin problemas. Lee Cómo preguntar y cómo crear un ejemplo mínimo verificable para más información y recomendaciones para mejorar esta pregunta.
    – Alvaro Montoro
    Commented el 7 ago. 2018 a las 13:47
  • De hecho, parece que el problema es el contrario al que describes: la animación queda por encima del menú y eso hace que no se pueda seleccionar ninguna opción en dispositivos móviles.
    – Alvaro Montoro
    Commented el 7 ago. 2018 a las 13:49

1 respuesta 1

1

En resoluciones pequeñas, tu galería queda por encima del menú. Para solucionarlo, tienes que usar la propiedad z-index, que determina la capa en la que se muestra tu menú.

Como tu cartel de "La educación..." tiene z-index: 1000, al .menu le puse z-index: 1001;, y ahora puedes ver el menú completo.

Aquí lo puedes ver funcionando:

$(function() {

  var Page = (function() {

    var $navArrows = $('#nav-arrows').hide(),
      $shadow = $('#shadow').hide(),
      slicebox = $('#sb-slider').slicebox({
        onReady: function() {

          $navArrows.show();
          $shadow.show();

        },
        orientation: 'r',
        cuboidsRandom: true,
        disperseFactor: 30
      }),

      init = function() {

        initEvents();

      },
      initEvents = function() {

        // add navigation events
        $navArrows.children(':first').on('click', function() {

          slicebox.next();
          return false;

        });

        $navArrows.children(':last').on('click', function() {

          slicebox.previous();
          return false;

        });

      };

    return {
      init: init
    };

  })();

  Page.init();

});
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

header {
  height: 50px;
  background: #01A9DB;
  color: aliceblue;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#btn-menu {
  display: none;
}

header label {
  font-size: 35px;
  cursor: pointer;
  display: none;
}

.menu ul {
  background: #01A9DB;
  display: flex;
  list-style: none;
}

.menu ul ul {
  display: none;
}

.menu a {
  display: block;
  padding: 15px 20px;
  color: aliceblue;
  text-decoration: none;
}

.menu a:hover {
  background: #AF7AC5;
}

.menu a span {
  margin-left: 10px;
}

.menu ul li:hover ul {
  display: block;
  position: absolute;
}

@media (max-width:768px) {
  header label {
    display: block;
  }
  .menu {
    position: absolute;
    top: 50px;
    left: 0;
    width: 70%;
    transform: translateX(-100%);
    transition: all 0.3s;
    z-index: 1001;
  }
  .menu ul {
    display: block;
    background: #01A9DB;
  }
  .menu ul li:hover ul {
    display: none;
    position: static;
  }
  .menu a span {
    position: absolute;
    right: 5px;
  }
  #btn-menu:checked~.menu {
    transform: translateX(0%);
  }
  .menu ul ul {
    background: rgba(0, 0, 0, 0.4);
  }
  .menu ul ul a {
    padding: 15px 40px;
  }
}
<link rel="stylesheet" type="text/css" href="css4/slicebox.css" />
<link rel="stylesheet" href="https://tympanus.net/Development/Slicebox/css/slicebox.css" />

<script type="text/javascript" src="https://tympanus.net/Development/Slicebox/js/modernizr.custom.46884.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://tympanus.net/Development/Slicebox/js/jquery.slicebox.js"></script>


<header>
  <input type="checkbox" id="btn-menu">
  <label for="btn-menu" class="icon-menu">MENU</label>
  <nav class="menu">
    <ul>
      <li><a href="#">Inicio</a></li>
      <li class="submenu"><a href="#">Quiénes Somos<span class="icon-down-open"></span></a>
        <ul>
          <li><a href="#">Historia</a></li>
          <li><a href="#">Gobierno Corporativo</a></li>
          <li><a href="#">Transparencia Social</a></li>
        </ul>
      </li>
      <li><a href="#">Actividades</a></li>
      <li class="submenu"><a href="#">Oportunidades<span class="icon-down-open"></span></a>
        <ul>
          <li><a href="#">Programa Plan Padrino</a></li>
          <li><a href="#">Programa de Voluntariado</a></li>
          <li><a href="#">Donaciones</a></li>
        </ul>
      </li>
      <li><a href="#">CAMPUS</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </nav>
</header>
<br>
<div class="container">
  <div class="wrapper">
    <ul id="sb-slider" class="sb-slider">
      <li>
        <a target="_blank"><img src="https://placehold.it/600x400" alt="image1" /></a>
        <div class="sb-description">
          <h3><strong><i>"La educación mediante la academia y el juego, es la base fundamental de la integración social."</i></strong></h3>
        </div>
      </li>
      <li>
        <a target="_blank"><img src="https://placehold.it/600x400/#aa4040" alt="image2" /></a>
        <div class="sb-description">
          <h3><strong><i>"No existen límites para explorar el talento de un niño. Aquí, exploramos y reforzamos esa habilidad."</i></strong></h3>
        </div>
      </li>
    </ul>

    <div id="nav-arrows" class="nav-arrows">
      <a href="#">Next</a>
      <a href="#">Previous</a>
    </div>
  </div>

</div>

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.