Как создать вертикальное выпадающее меню вне холста в Foundation?

В настоящее время Foundation позволяет создавать меню вне холста, которые скользят горизонтально слева или справа. Я хотел бы знать, как создать такой, который мог бы скользить вертикально сверху вниз: перемещая обернутое содержимое вниз.

Я понимаю, что для этого уже есть независимые решения javascript/ajax. Ответ, который я действительно ищу, заключается в том, чтобы как можно больше придерживаться существующего основного кода; используя соответствующий код правого/левого меню в качестве шаблона.

Заранее спасибо :).


javascript menu hamburger-menu zurb-foundation off-screen
person Rhys    schedule 15.06.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я понимаю, что это старый вопрос, и я не уверен, что вы все еще зациклены на этом, но для дальнейшего использования здесь есть очень простое решение css.

Следуя примеру offcanvas на веб-сайте Foundation, мы можем заменить класс position-left на position-top и добавить data-position="top", как показано ниже.

<div class="off-canvas position-top" id="offCanvas" data-off-canvas data-position="top">

В свой CSS добавьте класс is-open-top, который откроет меню вертикально.

.is-open-top
{
    -webkit-transform: translateY(250px);
    -ms-transform: translateY(250px);
    transform: translateY(250px);
}

затем нам нужно переместить пункты меню со следующим классом

.off-canvas.position-top
{
    left: 0px;
    top: -250px;
    width: 100%;
}

и, наконец, удалить полосу прокрутки

.off-canvas-wrapper 
{
  overflow: hidden;
}

Рабочий пример http://codepen.io/rawiki/pen/eZamZL

Когда меню откроется, оно подтолкнет содержимое вашего тела вниз. Обратите внимание, что он не будет автоматически изменять размер при добавлении элементов меню, поэтому вам нужно будет увеличить или уменьшить расстояние «translateY», а также установить «верхнее» на отрицательное значение того же значения.

person Rawiki    schedule 16.05.2016
comment
Отличный ответ, Спасибо! Похоже, что после того, как я задал вопросы, ребята из фонда также добавили дополнительную документацию по этому вопросу под заголовком «Вне холста с любого направления» foundation.zurb.com/sites/docs/v/5.5.3/components/ - person Rhys; 19.05.2016