Foundation CSS Kitchen Sink Magellan

Last Updated : 10 Mar, 2022

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

Foundation CSS Kitchen Sink has the foundation elements to work well in our websites and applications. Magellan is used to jump to the given target when the link is clicked. It is used when we want to jump to some specific section directly without scrolling down the webpage.

Foundation CSS Kitchen Sink Magellan Attributes:

data-magellan: It is used to create the link of the section.
data-magellan-target: It is used to create the targeted section when the link is clicked.

Syntax:

<ul class="horizontal menu" data-magellan>
   ....
</ul>
<div class="sections">
   ....
</div>

Example 1: The following code demonstrates the horizontal menu links.

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <link rel="stylesheet"
        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        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"
      crossorigin="anonymous"> 
  </script> 
</head> 
  
<body> 
  <h1 style="color: green;"> 
    GeeksforGeeks 
  </h1> 
  <h3> 
    Foundation CSS Kitchen Sink Magellan 
  </h3> 
  <ul class="horizontal menu" data-magellan> 
    <li> 
      <a href="#first-section"> 
        Section 1 
      </a> 
    </li> 
    <li> 
      <a href="#second-section"> 
        Section 2 
      </a> 
    </li> 
    <li> 
      <a href="#third-section"> 
        Section 3 
      </a> 
    </li> 
  </ul> 
  
  <div class="sections"> 
    <section id="first-section" 
        data-magellan-target="first-section"> 
      <strong> 
        Section 1 
      </strong> 
      <p> 
        A Computer Science portal for geeks.  
        It contains well written, well thought 
        and well explained computer science and 
        programming articles.A Computer Science 
        portal for geeks.    
      </p> 
  
    </section> 
    <section id="second-section" 
             data-magellan-target="second-section"> 
      <strong> 
        Section 2 
      </strong> 
      <p> 
        With the idea of imparting programming 
        knowledge, Mr. Sandeep Jain,an IIT Roorkee  
        alumnus started a dream, GeeksforGeeks. 
      </p> 
  
    </section> 
    <section id="third-section" 
             data-magellan-target="third-section"> 
      <strong> 
        Section 3 
      </strong> 
      <p> 
        With the idea of imparting programming knowledge, 
        Mr. Sandeep Jain, an IIT Roorkee alumnus started 
        a dream, GeeksforGeeks.  
      </p> 
  
    </section> 
  </div> 
  <script> 
    $(document).ready(function () { 
      $(document).foundation(); 
    }) 
  </script> 
  
</body> 
  
</html>

Output:

Foundation CSS Kitchen Sink Magellan

Example 2: The following code demonstrates the vertical menu links.

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <link rel="stylesheet"
        href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        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"
      crossorigin="anonymous"> 
  </script> 
</head> 
  
<body> 
  
  <h1 style="color: green;"> 
      GeeksforGeeks 
  </h1> 
  
  <h3> 
    Foundation CSS Kitchen Sink Magellan 
  </h3> 
  
  <ul class="vertical menu" data-magellan> 
    <li> 
      <a href="#first-section"> 
        Section 1 
      </a> 
    </li> 
  
    <li> 
      <a href="#second-section"> 
        About GeeksforGeeks 
      </a> 
    </li> 
  
    <li> 
      <a href="#third-section"> 
        GeeksforGeeks Image 
      </a> 
    </li> 
  </ul> 
  
  
  <div class="sections"> 
    <section id="first-section" 
             data-magellan-target="first-section"> 
      <strong> 
        Section 1 
      </strong> 
  
      <p> 
        A Computer Science portal for geeks. 
        It contains well written, well 
        thought and well explained computer 
        science and programming articles. 
      </p> 
  
    </section> 
  
    <section id="second-section" 
             data-magellan-target="second-section"> 
      <strong> 
        About GeeksforGeeks 
      </strong> 
  
      <p> 
        A Computer Science portal for geeks. 
        It contains well written, well 
        thought and well explained computer 
        science and programming articles. 
      </p> 
  
    </section> 
  
    <section id="third-section" 
             data-magellan-target="third-section"> 
      <strong> 
        GeeksforGeeks Image 
      </strong> <br> 
  
      <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
           alt="GFG image"> 
    </section> 
  </div> 
  
  
  <script> 
    $(document).ready(function () { 
      $(document).foundation(); 
    }) 
  </script> 
  
</body> 
  
</html>