Menu icon Foundation
Slideshow Using Orbit Slider, Off Canvas, & Block Grid Features

i'd love to be able to combine the orbit slider, off canvas, ad block grid features in foundation to create a slideshow like the image below....

Foundation

i've only been able to do this with the code.

need the following done:

slide the off canvas menu up/down
responsive grid blk
contain the off canvas menu inside the orbit slider

Foundation2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Resume Building Exercise</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <script src="js/vendor/modernizr.js"></script>
    <link rel="stylesheet" href="css/resumeTweaks.css">
    <link href='http://fonts.googleapis.com/css?family=Cambo' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="row panel radius"> <!-- wrapper -->
        <div class="off-canvas-wrap">
            <div class="inner-wrap">
                <nav class="tab-bar">
                    <section class="left-small">
                        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
                    </section>

                    <section class="middle tab-bar-section">
                        <h1 class="title">Foundation</h1>
                    </section>

                    <section class="right-small">
                        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
                    </section>
                </nav>

                <aside class="left-off-canvas-menu">
                    <ul class="off-canvas-list">
                        <li><label>Foundation</label></li>
                        <li><a href="#">The Psychohistorians</a></li>
                        ...
                    </ul>
                </aside>

                <aside class="right-off-canvas-menu">
                    <div class="medium-12 columns show-for-medium-up">
                        <ul class="small-block-grid-1">
                            <li><a data-orbit-link="headline-3"><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></a></li>
                            <li><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></li>
                            <li><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></li>
                            <li><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></li>
                            <li><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></li>
                            <li><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></li>
                        </ul>
                    </div>
                </aside>

                <section class="main-section">
                    <ul class="example-orbit" data-orbit>
                        <li>
                            <img src="http://placehold.it/900x600/A92B48/fff" alt="slide 1" />
                            <div class="orbit-caption">
                                Caption One.
                            </div>
                        </li>
                        <li>
                            <img src="http://placehold.it/900x600/EE964D/fff" alt="slide 2" />
                            <div class="orbit-caption">
                                Caption Two.
                            </div>
                        </li>
                        <li data-orbit-slide="headline-3">
                            <img src="http://placehold.it/900x600/FDC43D/fff" alt="slide 3" />
                            <div class="orbit-caption show-for-medium-up">
                                It's released under the MIT license. If you have any
                                questions or feedback you can use the It's released under
                                the MIT license. If you have any questions or feedback you
                                can use the
                            </div>
                        </li>
                    </ul>
                </section>

                <a class="exit-off-canvas"></a>

            </div>
        </div>
    </div>
    
    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation.tooltip.js"></script>
    <script src="js/foundation/foundation.reveal.js"></script>
    <script src="js/foundation/foundation.clearing.js"></script>
    <script src="js/foundation/foundation.orbit.js"></script>
    <script>
        $('#myModal').on('opened', function () {
            $(window).trigger('resize');
        });
        $(document).foundation({
            orbit: {
                animation: 'slide',
                animation_speed: 500,
                navigation_arrows: false,
                timer: false,
                slide_number: false,
                bullets: true,
                swipe: true
            }
        });
    </script>
</body>
</html>
            

         

body {
   background: url(../img/diagonal-noise.png);
   background-attachment: fixed;
   font-family: "Cambo", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
   margin : auto;
   padding-top: 3.75em;
}

dt {
    font-size: 1.5em;
}

.tooltip {
    line-height: .5;
    background: red;
}

.tooltip > .nub {
    border-color: transparent transparent red transparent;
}

H1, H2, H3, H4, H5, H6 {
    font-family: "Cambo", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: 300;

}

#name {
    color: #000000;
}

.panel {
    background-color: #fff;
    padding: 20;
    box-shadow: 3px 3px 3px #ccc;
}

.row {
    max-width: 42em;

}
/*
.row div {
    border : 1px solid red;
}
*/
.cellboarder {
    border : 1px solid red;
}

.email {
    word-break: break-all;
}

em {
    font-weight: 800;
}
            

         

off canvasblock gridOrbit

i'd love to be able to combine the orbit slider, off canvas, ad block grid features in foundation to create a slideshow like the image below....

Foundation

i've only been able to do this with the code.

need the following done:

slide the off canvas menu up/down
responsive grid blk
contain the off canvas menu inside the orbit slider

Foundation2

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>Resume Building Exercise</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <link rel="stylesheet" href="css/font-awesome.css">
    <script src="js/vendor/modernizr.js"></script>
    <link rel="stylesheet" href="css/resumeTweaks.css">
    <link href='http://fonts.googleapis.com/css?family=Cambo' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="row panel radius"> <!-- wrapper -->
        <div class="off-canvas-wrap">
            <div class="inner-wrap">
                <nav class="tab-bar">
                    <section class="left-small">
                        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
                    </section>

                    <section class="middle tab-bar-section">
                        <h1 class="title">Foundation</h1>
                    </section>

                    <section class="right-small">
                        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
                    </section>
                </nav>

                <aside class="left-off-canvas-menu">
                    <ul class="off-canvas-list">
                        <li><label>Foundation</label></li>
                        <li><a href="#">The Psychohistorians</a></li>
                        ...
                    </ul>
                </aside>

                <aside class="right-off-canvas-menu">
                    <div class="medium-12 columns show-for-medium-up">
                        <ul class="small-block-grid-1">
                            <li><a data-orbit-link="headline-3"><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></a></li>
                            <li><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></li>
                            <li><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></li>
                            <li><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></li>
                            <li><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></li>
                            <li><img class="th" src="http://placehold.it/900x600&text=Icon" alt="Icon"></li>
                        </ul>
                    </div>
                </aside>

                <section class="main-section">
                    <ul class="example-orbit" data-orbit>
                        <li>
                            <img src="http://placehold.it/900x600/A92B48/fff" alt="slide 1" />
                            <div class="orbit-caption">
                                Caption One.
                            </div>
                        </li>
                        <li>
                            <img src="http://placehold.it/900x600/EE964D/fff" alt="slide 2" />
                            <div class="orbit-caption">
                                Caption Two.
                            </div>
                        </li>
                        <li data-orbit-slide="headline-3">
                            <img src="http://placehold.it/900x600/FDC43D/fff" alt="slide 3" />
                            <div class="orbit-caption show-for-medium-up">
                                It's released under the MIT license. If you have any
                                questions or feedback you can use the It's released under
                                the MIT license. If you have any questions or feedback you
                                can use the
                            </div>
                        </li>
                    </ul>
                </section>

                <a class="exit-off-canvas"></a>

            </div>
        </div>
    </div>
    
    <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation.tooltip.js"></script>
    <script src="js/foundation/foundation.reveal.js"></script>
    <script src="js/foundation/foundation.clearing.js"></script>
    <script src="js/foundation/foundation.orbit.js"></script>
    <script>
        $('#myModal').on('opened', function () {
            $(window).trigger('resize');
        });
        $(document).foundation({
            orbit: {
                animation: 'slide',
                animation_speed: 500,
                navigation_arrows: false,
                timer: false,
                slide_number: false,
                bullets: true,
                swipe: true
            }
        });
    </script>
</body>
</html>
            

         

body {
   background: url(../img/diagonal-noise.png);
   background-attachment: fixed;
   font-family: "Cambo", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
   margin : auto;
   padding-top: 3.75em;
}

dt {
    font-size: 1.5em;
}

.tooltip {
    line-height: .5;
    background: red;
}

.tooltip > .nub {
    border-color: transparent transparent red transparent;
}

H1, H2, H3, H4, H5, H6 {
    font-family: "Cambo", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: 300;

}

#name {
    color: #000000;
}

.panel {
    background-color: #fff;
    padding: 20;
    box-shadow: 3px 3px 3px #ccc;
}

.row {
    max-width: 42em;

}
/*
.row div {
    border : 1px solid red;
}
*/
.cellboarder {
    border : 1px solid red;
}

.email {
    word-break: break-all;
}

em {
    font-weight: 800;
}