Меню jQuery не скрыто полностью - PullRequest
Новая
       0

Меню jQuery не скрыто полностью

0 голосов
/ 04 февраля 2019

Итак, у меня есть меню, когда вы нажимаете кнопку, он открывает лайтбокс, полный ссылок.Лайтбокс должен отображаться только при нажатии кнопки, но, к сожалению, небольшая часть (около 183 пикселей в зависимости от размера экрана) отображается в самом низу страницы. 

$(function() {
  $('#trigger, .lightbox').click(function() {
    $('.lightbox').toggleClass('close');
  });
});
#menu {
  text-align: center;
}

#menu ul {
  list-style-type: none
}


/* Button */

button#trigger {
  margin: 20px;
}

button#trigger {
  background: transparent;
  border: 2px solid #ff0000;
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 18px;
  border-radius: 20px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

button#trigger:hover {
  cursor: pointer;
  opacity: 0.85;
}

#menu .lightbox {
  background: #000;
  color: #fff;
  height: 100%;
  opacity: 0.85;
  overflow: hidden;
  padding: 35% 0 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

#menu .lightbox li.current_page_item a {
  border: 2px solid #ff0000;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  padding: 10px 20px;
}

#menu .lightbox li.current_page_item a:hover {
  color: #fff;
  text-decoration: none;
}

#menu .lightbox a {
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 10px;
  text-decoration: none;
  text-transform: uppercase;
}

#menu .lightbox a:hover {
  color: #ddd;
  cursor: pointer;
  text-decoration: underline;
}

#menu .lightbox.close {
  height: 0;
  top: 100%;
}

#menu .ion-android-menu {
  font-size: 20px;
}

#menu .ion-android-close {
  font-size: 40px;
  position: absolute;
  right: 45px;
  top: 18px;
}

#menu .ion-android-close:hover {
  color: #ddd;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <button id="trigger"><span class="ion-android-menu"><!-- --></span>
    </button>
  <div class="lightbox close">
    <span class="ion-android-close"><!-- --></span>
    <ul>
      <li class="current_page_item"><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>

Что-то мне не хватает?Не уверен, почему это там.Вот что у меня есть: https://jsfiddle.net/9dftx1vg/1/

Я почти уверен, что это что-то простое, просто не могу понять, как это сделать!

Ответы [ 3 ]

0 голосов
/ 04 февраля 2019 

$(function() {
  $('#trigger, .lightbox').click(function() {
    $('.lightbox').toggleClass('close');
  });
});
#menu {
  text-align: center;
}

#menu ul {
  list-style-type: none
}


/* Button */

button#trigger {
  margin: 20px;
}

button#trigger {
  background: transparent;
  border: 2px solid #ff0000;
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 18px;
  border-radius: 20px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

button#trigger:hover {
  cursor: pointer;
  opacity: 0.85;
}

#menu .lightbox {
  background: #000;
  color: #fff;
  height: 100%;
  opacity: 0.85;
  overflow: hidden;
  padding: 35% 0 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

#menu .lightbox li.current_page_item a {
  border: 2px solid #ff0000;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  padding: 10px 20px;
}

#menu .lightbox li.current_page_item a:hover {
  color: #fff;
  text-decoration: none;
}

#menu .lightbox a {
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 10px;
  text-decoration: none;
  text-transform: uppercase;
}

#menu .lightbox a:hover {
  color: #ddd;
  cursor: pointer;
  text-decoration: underline;
}

#menu .lightbox.close {
  display: none;
}

#menu .ion-android-menu {
  font-size: 20px;
}

#menu .ion-android-close {
  font-size: 40px;
  position: absolute;
  right: 45px;
  top: 18px;
}

#menu .ion-android-close:hover {
  color: #ddd;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <button id="trigger"><span class="ion-android-menu"><!-- --></span>
    </button>
  <div class="lightbox close">
    <span class="ion-android-close"><!-- --></span>
    <ul>
      <li class="current_page_item"><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>

Просто добавьте отображение none в лайтбокс при закрытии

0 голосов
/ 04 февраля 2019

Это может быть проще, если вы добавите width:0; к правилу стиля #menu .lightbox.close.

См. Фрагмент ниже: 

$(function() {
  $('#trigger, .lightbox').click(function() {
    $('.lightbox').toggleClass('close');
  });
});
#menu {
  text-align: center;
}

#menu ul {
  list-style-type: none
}


/* Button */

button#trigger {
  margin: 20px;
}

button#trigger {
  background: transparent;
  border: 2px solid #ff0000;
  color: #000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  font-size: 18px;
  border-radius: 20px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

button#trigger:hover {
  cursor: pointer;
  opacity: 0.85;
}

#menu .lightbox {
  background: #000;
  color: #fff;
  height: 100%;
  opacity: 0.85;
  overflow: hidden;
  padding: 35% 0 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

#menu .lightbox li.current_page_item a {
  border: 2px solid #ff0000;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  padding: 10px 20px;
}

#menu .lightbox li.current_page_item a:hover {
  color: #fff;
  text-decoration: none;
}

#menu .lightbox a {
  color: #fff;
  display: inline-block;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  font-weight: 300;
  margin: 10px;
  text-decoration: none;
  text-transform: uppercase;
}

#menu .lightbox a:hover {
  color: #ddd;
  cursor: pointer;
  text-decoration: underline;
}

#menu .lightbox.close {
  height: 0;
  width:0; /*ADD THIS ONE*/
  top: 100%;
}

#menu .ion-android-menu {
  font-size: 20px;
}

#menu .ion-android-close {
  font-size: 40px;
  position: absolute;
  right: 45px;
  top: 18px;
}

#menu .ion-android-close:hover {
  color: #ddd;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
  <button id="trigger"><span class="ion-android-menu"><!-- --></span>
    </button>
  <div class="lightbox close">
    <span class="ion-android-close"><!-- --></span>
    <ul>
      <li class="current_page_item"><a href="">Link 1</a></li>
      <li><a href="">Link 2</a></li>
      <li><a href="">Link 3</a></li>
    </ul>
  </div>
0 голосов
/ 04 февраля 2019

Добавьте box-sizing: border-box к правилу CSS лайтбокса, в противном случае 35-процентное верхнее заполнение, которое оно имеет, добавлено к * height: 0 * в «скрытом» состоянии.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...