Open In App

Foundation CSS Magellan Installation

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source and responsive front-end framework built by the 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.

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.

For setup/installation of the Magellan in our code just add the attribute data-magellan to the specific section of our code and give a unique ID to each section.

 

Syntax:

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

Example 1: The following code demonstrates one of the Magellan features of Foundation CSS.

HTML




<!DOCTYPE html>
<html>
<head>
    <title> Foundation CSS Magellan </title>
    <link rel="stylesheet" href=
            
   <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
    <style>
        li>a:hover {
            background-color: rgb(235, 239, 26);
        }
    </style>
</head>
    
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3> Foundation CSS Magellan Setup</h3>    
      
        <ul class="menu expanded" data-magellan>
            <li><a href="#section1">GFG</a></li>
            <li><a href="#section2">GFG</a></li>
            <li><a href="#section3">GFG</a></li>
        </ul>
    </center
  
    <div style="margin:70px;">
        <a id="section1" data-magellan-target="section1">
            <h3>
                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>          
        <a id="section2" data-magellan-target="section2">
            <h3>
                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>          
        <a id="section3" data-magellan-target="section3">
            <h3>
                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>
        </a>
    </div>        
       
    <script>
        $(document).foundation();
    </script>
</body>  
</html>


Output:

 

Example 2: The following code demonstrates another example of the Magellan feature.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Foundation CSS Magellan </title>
  <link rel="stylesheet" href=
  
  <!-- Compressed JavaScript -->
   <script src=
  </script>
  <script src=
  </script>
    <style>
        li>a:hover 
        {
            background-color:cornflowerblue;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks </h1>
        <h3> Foundation CSS Magellan Setup</h3>
  
        <ul class="menu expanded" data-magellan>
            <li><a href="#section1">GFG</a></li>
            <li><a href="#section2">GFG</a></li>
            <li><a href="#section3">GFG</a></li>
        </ul>
    </center>
  
    <div style="margin:70px;">
  
        <a id="section1" data-magellan-target="section1">
            <h3>
                GeeksforGeeks 1
            </h3>
            <p>
                GeeksforGeeks
            </p>
        </a>    
        <a id="section2" data-magellan-target="section2">
            <h3>
                GeeksforGeeks 2
            </h3>
            <p>
                GeeksforGeeks
            </p>
        </a>    
        <a id="section3" data-magellan-target="section3">
            <h3>
                GeeksforGeeks 3
            </h3>
            <p>
                GeeksforGeeks
            </p>
        </a>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output:

 

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



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