Foundation - Responsive Navigation Toggle

Description

data-responsive-toggle attribute is used for menu toggling. The toggle helps to display the menu on the small screen size.

Example

The following example demonstrates the use of responsive navigation menu in Foundation −

Live Demo

<!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/foundation-sites@6.5.1/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/foundation-sites@6.5.1/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>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code responsive_toggle.html file.
Open this HTML file in a browser, an output is displayed as shown below.

foundation_navigation.htm