Open In App

Foundation CSS Magellan

Improve
Improve
Like Article
Like
Save
Share
Report

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 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. 

In this article, we will discuss Foundation CSS Magellan.

Foundation CSS Magellan Topics:

  • Setup: We will create the basic Magellan.
  • Sticky Navigation: We will create Magellan with sticky navigation.

Foundation CSS Magellan classes:

  • data-magellan: This class is used to create the link of the section.
  • data-magellan-target: This class is used to create the targeted section when we click the link.
  • data-magellan-arrival: This class is used to create the fixed navigating Magellan.
  • data-magellan-destination: This class is used to create the destination section when we click the element.

Syntax:

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

Example 1: The following code demonstrates the Foundation CSS Magellan Setup.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Foundation CSS Magellan </title>
  <link rel="stylesheet"
        href=
          
   <!-- Compressed JavaScript -->
  <script src=
  </script>
  <script src=
  </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;"> GeeksforGeeks    </h1>
        <h3> Foundation CSS Magellan</h3>
    </center>
  
    <ul class="menu" data-magellan>
        <li>
          <a href="#section1">
            GeeksforGeeks 1
          </a>
        </li>
        <li>
          <a href="#section2">
            GeeksforGeeks 2
          </a>
        </li>
        <li>
          <a href="#section3">
            GeeksforGeeks 3
          </a>
        </li>
    </ul>
  
   <div class="sections">
        <section id="section1" data-magellan-target="section1">
          <strong>
            GeeksforGeeks 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="section2" data-magellan-target="section2">
          <strong>
            GeeksforGeeks 2
          </strong>
          <p>
            With the idea of imparting programming
            knowledge, Mr. Sandeep Jain,an IIT Roorkee 
            alumnus started a dream, GeeksforGeeks.
            A Computer Science portal for geeks.
          </p>
        </section>
  
    <section id="section3" data-magellan-target="section3">
      <strong>
        GeeksforGeeks 3
      </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>
  </div>
  <script>
    $(document).foundation();
  </script>
</body>
  
</html>


Output:

Foundation CSS Magellan Setup

Example 2: The following code demonstrates the Foundation CSS Magellan Sticky Navigation.

HTML




<!DOCTYPE html>
<html>
<head>
  <title> Foundation CSS Magellan </title>
  <link rel = "stylesheet" 
        href
    
  <!-- Compressed JavaScript -->
  <script src
  </script>
  <script src
  </script>
  <script src
  </script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">  GeeksforGeeks   </h1>
        <h3>  Foundation CSS Magellan   </h3>
     </center>
  
    <div data-magellan-expedition="fixed">
        <section class = "top-bar-section">
          <div class = "sticky-mag">
            <ul class = "menu" data-magellan>
              <li data-magellan-arrival="section1">
                <a href = "#section1"
                  GeeksforGeeks 1
                </a>
              </li>
              <li data-magellan-arrival="section2">
                <a href = "#section2"
                  GeeksforGeeks 2
                </a>
              </li>
              <li data-magellan-arrival="section3">
                <a href = "#section3"
                  GeeksforGeeks 3
                </a>
              </li>
            </ul>
          </div>
        </section>
      </div> <br> <br> <br>
  
     <a name="section1"></a>
     <h3 data-magellan-destination = "section1">
        GeeksforGeeks 1
     </h3>
     <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>
     <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>
  
    <a name="section2"></a>
     <h3 data-magellan-destination = "section2">
        GeeksforGeeks 2
     </h3>
     <p>
        With the idea of imparting programming
        knowledge, Mr. Sandeep Jain,an IIT Roorkee 
        alumnus started a dream, GeeksforGeeks.
        A Computer Science portal for geeks.
     </p>
     <p>
        With the idea of imparting programming
        knowledge, Mr. Sandeep Jain,an IIT Roorkee 
        alumnus started a dream, GeeksforGeeks.
        A Computer Science portal for geeks.
     </p>
  
     <a name = "section3"></a>
     <h3 data-magellan-destination = "section3">
        GeeksforGeeks 3
     </h3>
     <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>
     <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>
     <br> <br> <br><br> <br>
  
     <script>
        $(document).foundation();
     </script>
</body>   
</html>


Output:

Foundation CSS Magellan Sticky Navigation

Reference: https://get.foundation/sites/docs/magellan.html



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads