Zurb Foundation 6: липкий заголовок и меню вне экрана

Question

Я искал в интернете поиски решения, но пока не нашел.

У меня есть сайт с липким заголовком / навигацией, на котором есть кнопка гамбургера, чтобы открыть меню вне холста. Обертка вне холста оборачивает все, включая заголовок. Навигация заголовка работает, но когда вы открываете меню вне холста, заголовок исчезает. Кроме того, если вы прокручиваете страницу вниз, вы не видите пунктов меню в меню вне холста - вам нужно прокрутить вверх.

Кто-то в сети предложил убрать заголовок / навигацию из off-canvas-wrapper-inner, что предотвращает исчезновение панели, но вы не можете щелкнуть по строке меню, чтобы закрыть меню вне холста.

Кто-нибудь еще нашел решение для этого?

Answer 1

У меня есть решение:

Переместите закрепленный / фиксированный div за пределы "содержимого вне холста".

<div class="off-canvas-wrapper">
 <div class="off-canvas position-left" data-off-canvas id="offCanvasL">
   <!-- LEFT MENU -->
 </div>
 <div class="off-canvas position-right" data-off-canvas id="offCanvasR">
   <!-- RIGHT MENU -->
 </div>
 <div class="fixed_div">
   <div class="menu_left" data-toggle="offCanvasL"><!-- OPEN LEFT MENU  --></div>
   <div class="menu_right" data-toggle="offCanvasR"><!-- OPEN RIGHT MENU --></div>
 </div>
 <div class="off-canvas-content" data-off-canvas-content>
  <!-- YOUR CONTENT-->
 </div>
</div>

Тогда нам нужны некоторые правила CSS:

.fixed_div {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  transform: none;
  transition: transform .5s ease;
  backface-visibility: hidden;
}

.fixed_div.is-open-right.has-transition-push {
    transform: translateX(-250px);
}

.fixed_div.is-open-left.has-transition-push {
    transform: translateX(250px);
}

Последнее, что нам нужно сделать, это добавить JQUERY в наш app.js:

$('.menu_left').click(function() {
    $('.fixed_div').toggleClass('is-open-right has-transition-push has-position-right');
});
$('.menu_right').click(function() {
    $('.fixed_div').toggleClass('is-open-left has-transition-push has-position-left');
});
$('.close-button, .js-off-canvas-overlay').click(function() {
    $('.fixed_div').removeClass('is-open-right is-open-left has-transition-push has-position-right has-position-left');
});

и это все:)