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. 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... 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
    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
    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
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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