Fondation - Bascule de navigation réactive

La description

L'attribut data-responsive-toggle est utilisé pour basculer entre les menus. La bascule permet d'afficher le menu sur la petite taille de l'écran.

Exemple

L'exemple suivant illustre l'utilisation du menu de navigation réactif dans Foundation -

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <h2> Example of Responsive Navigation menu</h2>
      <div class = "title-bar" data-responsive-toggle = "example-menu" data-hide-for = "medium">
         <button class = "menu-icon" type = "button" data-toggle></button>
         <div class = "title-bar-title">Menu</div>
      </div>

      <div id = "example-menu">
         <ul class = "menu dropdown" data-dropdown-menu>
            <li><a href = "#">Bike</a>
               <ul class = "menu">
                  <li><a href = "#">Bajaj</a></li>
                  <li><a href = "#">Suzuki</a></li>
                  <li><a href = "#">Honda</a>
                     <ul class = "menu">
                        <li><a href = "#">Activa</a></li>
                        <li><a href = "#">Dio</a></li>
                        <li><a href = "#">Passion</a></li>
                     </ul>
                  </li>
               </ul>
            </li>
            <li><a href = "#">Car</a></li>
            <li><a href = "#">Service</a></li>
            <li><a href = "#">Contact</a></li>
         </ul>
      </div>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code html ci-dessus responsive_toggle.html fichier.

  • Ouvrez ce fichier HTML dans un navigateur, une sortie s'affiche comme indiqué ci-dessous.