Tutoriel sur la création d'une barre de navigation responsive sur Foundation 6
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 > <!-- ************************** --> <!-- Barre de menu responsive --> <!-- ************************** --> <div class="title-bar" data-responsive-toggle="menu-principal" data-hide-for="medium"> <button class="menu-icon" type="button" data-toggle></button> <div class="title-bar-title">Apprendre DEV</div> </div> <!-- ************************** --> <!-- Barre de menu Horizontal --> <!-- ************************** --> <nav id="menu-principal" class="top-bar"> <div class="row column"> <ul class="dropdown menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown"> <li class="menu-text hide-for-small-only">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> <script src="js/vendor/jquery.js"></script> <script src="js/vendor/foundation.js"></script> <script src="js/app.js"></script> </body> </html>