How to create a vertical off-canvas drop down menu in Foundation?

Question

Currently Foundation allows you create off-canvas menus that slide in horizontally from the left or the right. I'd love to know how to create one that could slide vertically from top to bottom: moving the wrapped content downwards.

I understand that there are already independent javascript/ajax solutions for this. The answer I'm really looking for is to adhere to the existing foundation code as much as possible; using the relevant right/left menu code as a template.

Thanks in advance :).

Answer 1

I realise this is an old question and I'm unsure if you're still hung-up on this but for the sake of future reference here is a very simple css solution.

Following the offcanvas example on the Foundation website we can replace the class 'position-left' with 'position-top' and add 'data-position="top"' as below.

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

In your CSS add the class 'is-open-top' which will open the menu vertically.

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

then we need to re-position the menu items with the following class

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

and finally remove the scroll bar

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

Working example http://codepen.io/rawiki/pen/eZamZL

As the menu opens it will push your body content downwards. Note that it will not automatically resize as you add menu items so you will need to increase or decrease the 'translateY' distance as well as setting 'top' to the negative of the same value.