Foundation 6 : Barre de navigation off canvas

Ce tutoriel sur Foundation 6 permet de créer une barre de navigation latéral

Fichier index.html

 <!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apprendre DEV</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>

  <body >  
    <div class="off-canvas-wrapper">
      <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
        <div class="title-bar" data-responsive-toggle="menu-principal-horizontal" data-hide="medium">
          <div class="title-bar-left">
            <button class="menu-icon" type="button" data-open="menu-principal-responsive"></button>
            <span class="title-bar-title">Apprendre DEV</span>
          </div>

        </div>

        <nav  class="off-canvas position-left" id="menu-principal-responsive" data-off-canvas >

                    <!-- Close button -->
          <button class="close-button" aria-label="Close menu" type="button" data-close>
            <span aria-hidden="true">&times;</span>
          </button>

          <ul  class="dropdown vertical menu" data-responsive-menu="accordion">
             <li >  <a href="index.html">Accueil</a> </li>
             <li>  <a href="#" >Language </a>
                <ul class="menu vertical">
                     <li><a href="#">PHP</a></li>
                     <li><a href="java.html">JAVA</a></li>
                     <li><a href="#">C</a></li>
                     <li><a href="#">C++</a></li>
                     <li><a href="#">C#</a></li>
                 </ul>
             </li>
             <li>  <a href="#" >Framework PHP</a>
                 <ul class="menu vertical">
                     <li><a href="#">Symfony</a></li>
                     <li><a href="#">Laravel</a></li>
                     <li><a href="#">Cakephp</a></li>
                     <li><a href="#">Yii</a></li>
                 </ul>
             </li>
             <li>  <a href="#" >Framework JS </a>
                 <ul class="menu vertical">
                     <li><a href="#">Backbone.js</a></li>
                     <li><a href="#">AngularJS</a></li>
                     <li><a href="#">React</a></li>
                     <li><a href="#">Meteor</a></li>
                 </ul>
             </li>
             <li >  <a href="#" >CMS </a>
                 <ul class="menu vertical">
                     <li><a href="#">Drupal</a></li>
                     <li><a href="#">Wordpress</a></li>
                     <li><a href="#">Joomla</a></li>
                     <li><a href="#">Prestashop</a></li>
                 </ul>
             </li>
             <li>  <a href="#" >ERP</a>
                 <ul class="menu vertical">
                     <li><a href="#">Odoo</a></li>
                     <li><a href="#">Dolibarr</a></li>
                 </ul>
             </li>
             <li>  <a href="#" >Logiciel</a>
                 <ul class="menu vertical">
                     <li><a href="#">Adobe Premier</a></li>
                     <li><a href="#">Illustrator</a></li>
                     <li><a href="#">InDesign</a></li>
                     <li><a href="#">Gimp</a></li>
                     <li><a href="#">Sublimtext</a></li>
                     <li><a href="#">Notepad++</a></li>
                 </ul>
             </li>
           </ul> 
        </nav>  

          <!-- ************************** -->
          <!--  Barre de menu Horizontal  -->
          <!-- ************************** -->

        <nav class="top-bar" id="menu-principal-horizontal">
          <div  class="row column"> 
           <ul  class="dropdown menu" data-dropdown-menu>
             <li class="menu-text">Apprendre DEV</li>
             <li >  <a href="index.html">Accueil</a> </li>
             <li>  <a href="#" >Language </a>
                <ul class="menu vertical">
                     <li><a href="#">PHP</a></li>
                     <li><a href="java.html">JAVA</a></li>
                     <li><a href="#">C</a></li>
                     <li><a href="#">C++</a></li>
                     <li><a href="#">C#</a></li>
                 </ul>
             </li>
             <li>  <a href="#" >Framework PHP</a>
                 <ul class="menu vertical">
                     <li><a href="#">Symfony</a></li>
                     <li><a href="#">Laravel</a></li>
                     <li><a href="#">Cakephp</a></li>
                     <li><a href="#">Yii</a></li>
                 </ul>
             </li>
             <li>  <a href="#" >Framework JS </a>
                 <ul class="menu vertical">
                     <li><a href="#">Backbone.js</a></li>
                     <li><a href="#">AngularJS</a></li>
                     <li><a href="#">React</a></li>
                     <li><a href="#">Meteor</a></li>
                 </ul>
             </li>
             <li >  <a href="#" >CMS </a>
                 <ul class="menu vertical">
                     <li><a href="#">Drupal</a></li>
                     <li><a href="#">Wordpress</a></li>
                     <li><a href="#">Joomla</a></li>
                     <li><a href="#">Prestashop</a></li>
                 </ul>
             </li>
             <li>  <a href="#" >ERP</a>
                 <ul class="menu vertical">
                     <li><a href="#">Odoo</a></li>
                     <li><a href="#">Dolibarr</a></li>
                 </ul>
             </li>
             <li>  <a href="#" >Logiciel</a>
                 <ul class="menu vertical">
                     <li><a href="#">Adobe Premier</a></li>
                     <li><a href="#">Illustrator</a></li>
                     <li><a href="#">InDesign</a></li>
                     <li><a href="#">Gimp</a></li>
                     <li><a href="#">Sublimtext</a></li>
                     <li><a href="#">Notepad++</a></li>
                 </ul>
             </li>
           </ul> 
          </div> 
        </nav>
       </div>
    </div>   
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>