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>...