We will now cover how to make an off-canvas menu; this type of menu has normally just been used on mobile phones, but over the last year, there have been some sites that have used this type of menu on a tablet and desktop/laptop as well. An off-canvas menu is a menu that slides the content and menu from any side of the screen.
So let's try adding the following code right after the opening body tag:
<div class="off-canvas-wrap" data-offcanvas> <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">Learning Zurb Foundation</h1> </section> </nav> <aside class="left-off-canvas-menu"> <ul class="off-canvas-list"> <li><label>Left Off-canvas</label>...