Foundation CSS Kitchen Sink Responsive Toggle

Last Updated : 16 Mar, 2022

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Kitchen Sink Responsive Toggle Classes in Foundation CSS.

Kitchen Sink has the foundation elements to work well in our websites and applications. The Kitchen Sink Responsive Toggle is used to add the responsive top bar with a toggle button that triggers on mobile.

Foundation CSS Kitchen Sink Responsive Toggle Classes:

title-bar: This class is used to specify the title of the navbar.
menu-icon: This class is used to define the toggle icon of the navbar.
title-bar-title: This class is used to specify the title of the toggle on the mobile screen.
top-bar: This class is used to define the top bar container. It has two parts- top-bar-left and top-bar-right. Note that in the mobile screen both of these stacks over top and bottom of each other.
top-bar-right: This class is used to define the right content of the top bar.
top-bar-left: This class is used to define the left content of the top bar.

Syntax:

<div class="title-bar" 
     data-responsive-toggle="gfg-menu" 
     data-hide-for="large">
      <button class="menu-icon" 
          type="button" data-toggle>
          ...
      </button>
      
      <div class="title-bar-title">
          ...
      </div>
</div>

Example 1: Below is the example that illustrates the use of Kitchen Sink Responsive Toggle.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Kitchen Sink Responsive toggle</title> 
      <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" 
          crossorigin="anonymous"> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" 
          crossorigin="anonymous"> 
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script crossorigin="anonymous" 
            src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
  <center> 
    <h1 style="color:green;"> 
      GeeksforGeeks 
    </h1> 
  
    <h3>Foundation CSS Kitchen Sink Responsive toggle</h3> 
  
    <div class="title-bar" data-responsive-toggle="gfg-menu" 
       data-hide-for="large"> 
      <button class="menu-icon" type="button" 
         data-toggle> 
      </button> 
  
      <div class="title-bar-title"> 
        GfG-Menu 
      </div> 
    </div> 
      
    <div class="top-bar" id="gfg-menu"> 
      <div class="top-bar-left"> 
        <ul class="dropdown menu" data-dropdown-menu> 
          <li class="menu-text"> 
            GeeksforGeeks 
          </li> 
  
          <li class="has-submenu"> 
            <a href="#">Courses</a> 
            <ul class="submenu menu vertical" data-submenu> 
              <li><a href="#">DSA</a></li> 
              <li><a href="#">OOP's</a></li> 
              <li><a href="#">DBMS</a></li> 
              <li><a href="#">OS</a></li> 
            </ul> 
          </li> 
          <li><a href="#0"> 
            Interview Preparation 
          </a></li> 
  
          <li><a href="#0"> 
            Test Series 
          </a></li> 
        </ul> 
      </div> 
    </div> 
  </center> 
  
  <script> 
    $(document).ready(function () { 
      $(document).foundation(); 
    }) 
  </script> 
</body> 
  
</html>

Output:

Foundation CSS Kitchen Sink Responsive toggle

Example 2: Below is another example that illustrates the use of Kitchen Sink Responsive Toggle.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>Foundation CSS Kitchen Sink Responsive toggle</title> 
  
      <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" 
          crossorigin="anonymous"> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" 
          crossorigin="anonymous"> 
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script crossorigin="anonymous" 
            src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
  <center> 
    <h1 style="color:green;"> 
      GeeksforGeeks 
    </h1> 
  
    <h3>Foundation CSS Kitchen Sink Responsive toggle</h3> 
  
    <div class="title-bar"
         data-responsive-toggle="gfg-menu" 
         data-hide-for="large"> 
      <button class="menu-icon" 
              type="button" 
        data-toggle> 
      </button> 
  
      <div class="title-bar-title"> 
        GfG-Menu 
      </div> 
    </div> 
  
    <div class="top-bar" id="gfg-menu"> 
      <div class="top-bar-left"> 
        <ul class="menu"> 
          <li><input type="search" 
                     class="rounded bordered shadow" 
                     placeholder="Search any Course"> 
          </li> 
  
          <li> 
            <button type="button" 
                    class="button rounded shadow success"> 
              SEARCH 
            </button> 
          </li> 
        </ul> 
      </div> 
    </div> 
  </center> 
  
  <script> 
    $(document).ready(function () { 
      $(document).foundation(); 
    }) 
  </script> 
</body> 
  
</html>