Foundation - Menu de navigation réactif

La description

Pour modifier le menu en une taille d'écran différente, le menu comprend des classes CSS réactives. En utilisant le plugin de menu réactif, un modèle par défaut peut être appliqué au menu, vous pouvez également changer le modèle de menu pour différentes tailles d'é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>

      <ul class = "menu dropdown" data-responsive-menu = "drilldown medium-dropdown">
         <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>

      <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_menu.html fichier.

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