Создание раскрывающегося меню css на всю высоту медиа-браузера

Я создал полностью отзывчивое меню CSS, которое становится раскрывающимся при меньших размерах браузера.

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

Я попытался изменить несколько атрибутов, но на данный момент я не уверен, возможно ли это так или нет. У кого-нибудь есть мысли о том, как это сделать?

JSFIDDLE ЗДЕСЬ

CSS

body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #f4f4f4;
}

a {
  color: #000;
}

/* pagenav */

.pagenav {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 3;
}

.pagenav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.pagenav li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.pagenav li a:hover,
.pagenav .nav-right-btn:hover {
  background-color: #f4f4f4;
}

/* nav-right */

.pagenav .nav-right {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* nav-right icon */

.pagenav .nav-right-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.pagenav .nav-right-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.pagenav .nav-right-icon .navicon:before,
.pagenav .nav-right-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.pagenav .nav-right-icon .navicon:before {
  top: 5px;
}

.pagenav .nav-right-icon .navicon:after {
  top: -5px;
}

/* nav-right btn */

.pagenav .nav-right-btn {
  display: none;
}

.pagenav .nav-right-btn:checked ~ .nav-right {
  max-height: 240px;
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon .navicon {
  background: transparent;
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon .navicon:before {
  transform: rotate(-45deg);
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon .navicon:after {
  transform: rotate(45deg);
}

.pagenav .nav-right-btn:checked ~ .nav-right-icon:not(.steps) .navicon:before,
.pagenav .nav-right-btn:checked ~ .nav-right-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .pagenav li {
    float: left;
  }
  .pagenav li a {
    padding: 20px 30px;
  }
  .pagenav .nav-right {
    clear: none;
    float: right;
    max-height: none;
  }
  .pagenav .nav-right-icon {
    display: none;
  }
}

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

      <link href="cover4.css" rel="stylesheet">


    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">


  </head>
  <body>

<header class="pagenav">

  <input class="nav-right-btn" type="checkbox" id="nav-right-btn" />
  <label class="nav-right-icon" for="nav-right-btn"><span class="navicon"></span></label>
  <ul class="nav-right">
    <li><a href="#reel">Link1</a></li>
    <li><a href="#bio">Link2</a></li>
    <li><a href="#contact">Link3</a></li>
  </ul>
</header>


  </body>
</html>

html,css,

0

Ответов: 2

1

TL; DR - оживить меню до height: calc(100vh - $nav-height)щелчка.

Я считаю, что вы ищете vh и vw , ширину видового экрана и высоту видового экрана. Они работают как проценты, но вместо того, чтобы относиться к родительскому контейнеру (например, к настройке width: 100%), они относятся к окну просмотра. Так, например, width: 100vwэто означает 100% ширины окна просмотра , а не его родительский контейнер.

Эти устройства имеют очень хорошую поддержку во всех существующих браузерах: https://caniuse.com/#feat=viewport-units

Если вы хотите, чтобы выпадающие элементы также занимали всю высоту страницы, вы можете использовать Flexbox для этого. Оберните элементы списка в display: flexконтейнере и поиграйте с justify-contentи align-itemsатрибутом (возможно , используя space-aroundсвойство) , так что элементы автоматически распространяться. Вот блестящее руководство по спецификациям Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Редактировать : Благодаря Mark E для обеспечения рабочей скрипки. Включая здесь измененную версию, которая использует display: flexсвойство для распространения элементов по всей высоте страницы: https://jsfiddle.net/od5g8v4a/14/ . Кажется, это не нарушает настольную версию меню. Я включил комментарии, чтобы показать, что было изменено.

Обратите внимание, что технически высота не должна анимироваться 100vhточно - это должно быть 100vh - $navbar-height. Вы можете использовать этуcalc() функцию для достижения этой цели.

0

Как насчет использования onclickфункции javascript для кнопки, которая получает размер окна в виде переменной. Затем вы можете использовать оператор if then, чтобы определить, хотите ли вы использовать решение Daniel H.. Что-то вроде этого-

<script>
    function getWindowSizeOnclick() {
        var h = window.innerHeight;
        if (h > [however high you need it to be]) {
          document.getElementByID("menuInQuestion").style.height = "100vh";
        }
     }
    function sizeOnWindowResize() {
          document.getElementByID("menuInQuestion").style.height = "original-size"
     }
</script>

поставьте нижнюю часть страницы перед закрывающим </body>тегом, а затем в открывающий тег вашей кнопки. onclick="getWindowSizeOnClick()"Затем поместите это в тег открытия телаonresize="sizeOnWindowResize()"

Думаете, это будет трюк?

HTML, CSS,
Похожие вопросы
Яндекс.Метрика