Open In App

Foundation CSS Magellan Navigation

Last Updated : 02 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source front-end framework that is used to create stunning responsive websites, emails, or apps quickly and easily. ZURB released it in September 2011. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This platform, which resembles SaaS, is built on the Bootstrap framework. It is more unique, flexible, and complex. Working with module bundlers is also simple due to its command-line interface. Email framework creates HTML emails that are accessible on all devices and mobile-friendly. Using Foundation for Apps, you can make fully responsive web applications.

Foundation CSS Magellan is mainly used to build local navigation or navigation which contains the utility of jumping to specific parts of a webpage. When the links in the Magellan are clicked, the viewport sprints to the given target without scrolling down the webpage. 

Foundation CSS Magellan Navigation is of two types of navigation that are provided by Magellan, one is the basic one and the other is the sticky one. Now, you can sprint to example 1 below and see how the basic Magellan is just not the perfect way to implement the Magellan. On the other hand, look at example 2 and you can see that the Sticky Navigation is more of a practical example where no matter where you are on the Webpage you can Navigate quickly to any other part of the Webpage. You can use any type of the Navigation Component to create a Magellan, you don’t need to take any specific classes in to make a Magellan. There are some specific attributes that are needed to create a Magellan.

Foundation CSS Magellan Navigation Attributes:

Basic Magellan:

  • [data-magellan]: This class is used to create the navigation of links to the respective sections.
  • [data-magellan-target=id]: This class is used to indicate the sections where the viewport will jump when we click the respective links. It takes the value of the div that 

Syntax:

<ul class="menu" data-magellan>
    <li><a href="#first">..</a></li>
    <li><a href="#second">..</a></li>
    <li><a href="#third">..</a></li>
</ul>

<div class="sections">
    <section id="first" 
        data-magellan-target="first">
        ...
    </section>
    <section id="second" 
        data-magellan-target="second">
        ...
    </section>
    <section id="third" 
        data-magellan-target="third">
        ...
    </section>
</div>

Sticky Magellan Navigation: We need to add that Magellan is inside a Sticky container.

  • [data-sticky-container]: This attribute is used for the container, which is designed to be sticky. There is no value in this attribute.
  • [data-sticky]: This attribute is used with the element which is meant to be a sticky element. This attribute doesn’t take any value.

Syntax:

<!-- Add a Sticky Menu -->
<div data-sticky-container>
    <div class=".." data-sticky>
        ...
    </div>
</div>

<div class="sections">
    <section id="first" 
        data-magellan-target="first">
        ...
    </section>
    <section id="second" 
        data-magellan-target="second">
        ...
    </section>
    <section id="third" 
        data-magellan-target="third">
        ...
    </section>
</div>

Example 1: This code below demonstrates how to use a simple menu with buttons to make a basic Magellan Navigation.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet" href=
    <!-- Compressed JavaScript -->
    </script>
    <script src=
    </script>
</head>
 
<body>
 
    <!-- This demo uses float grid but you
        can use flex grid too -->
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
     
    <h3 class="">
        Foundation CSS Magellan Navigation
    </h3>
     
    <ul class="menu" data-magellan>
        <li><a href="#dsa"><button type="button" class="button">
                    Got to DSA Section</button></a></li>
        <li><a href="#Algo"><button type="button" class="button">
                    Skip to Algo Section</button></a></li>
        <li><a href="#Interview"><button type="button" class="button">
                    Got to Interview Section</button></a></li>
        <li><a href="#cpp"><button type="button" class="button">
                    Got to CPP Section</button></a></li>
        <li><a href="#Java"><button type="button" class="button">
                    Got to Java Section</button></a></li>
    </ul>
 
    <div class="sections">
        <section id="dsa" data-magellan-target="dsa">
            <h4>DSA section</h4>
            <strong>This is the DSA section. </strong>
 
             
<p>
                A data structure is a group of data elements
                that provides the easiest way to store and
                perform different actions on the data of the
                computer. A data structure is a particular
                way of organizing data in a computer so that
                it can be used effectively. The idea is to
                reduce the space and time complexities of
                different tasks. The choice of a good data
                structure makes it possible to perform a
                variety of critical operations effectively.
                An efficient data structure also uses
                minimum memory space and execution time to
                process the structure.
            </p>
 
        </section>
 
        <section id="Algo" data-magellan-target="Algo">
            <h4>Algo section</h4>
            <strong>This is the Algo section.</strong>
 
             
<p>
                Hi Geeks!! Welcome to GeeksForGeeks.
                The word Algorithm means ” A set of rules to be
                followed in calculations or other problem-solving
                operations ” Or ” A procedure for solving a
                mathematical problem in a finite number of steps
                that frequently by recursive operations “.
 
                Therefore Algorithm refers to a sequence of
                finite steps to solve a particular problem.
 
                It can be understood by taking the example of
                cooking a new recipe. To cook a new recipe, one
                reads the instructions and steps and executes
                them one by one, in the given sequence. The
                result thus obtained is the new dish cooked
                perfectly. Every time you use your phone,
                computer, laptop, or calculator you are using
                Algorithms. Similarly, algorithms help to do
                a task in programming to get the expected output.
 
                The Algorithm designed are language-independent,
                i.e. they are just plain instructions that can
                be implemented in any language, and yet the
                output will be the same, as expected.
            </p>
 
        </section>
 
        <section id="Interview" data-magellan-target="Interview">
            <h4>Interview section</h4>
            <strong>This is the Interview Section</strong>
 
             
<p>
                Course Description
                An interview-centric course designed to prepare
                you for the role of SDE for both product and
                service based companies. A placement preparation
                pack built with years of expertise. Prepare C++,
                Java, DSA, CS Theory concepts and much more!
            </p>
 
        </section>
 
        <section id="cpp" data-magellan-target="cpp">
            <h4>CPP section</h4>
            <strong>This is the CPP Section</strong>
 
             
<p>
                C++ is a general-purpose programming language
                that was developed as an enhancement of the C
                language to include object-oriented paradigm.
                It is an imperative and a compiled language.
                C++ is a middle-level language rendering it
                the advantage of programming low-level
                (drivers, kernels) and even higher-level
                applications (games, GUI, desktop apps etc.).
                The basic syntax and code structure of both
                C and C++ are the same.
            </p>
 
        </section>
 
        <section id="Java" data-magellan-target="Java">
            <h4>Java section</h4>
            <strong>This is the JAVA Section</strong>
 
             
<p>
                JAVA was developed by James Gosling at Sun
                Microsystems Inc in the year 1995, later
                acquired by Oracle Corporation. It is a simple
                programming language. Java makes writing,
                compiling, and debugging programming easy.
                It helps to create reusable code and modular
                programs. Java is a class-based, object-oriented
                programming language and is designed to have
                as few implementation dependencies as possible.
                A general-purpose programming language made
                for developers to write once run anywhere that
                is compiled Java code can run on all platforms
                that support Java. Java applications are compiled
                to byte code that can run on any Java Virtual
                Machine. The syntax of Java is similar to c/c++.
            </p>
 
        </section>
    </div>
     
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>


Output:

 

Example 2: The code below illustrates a Sticky Magellan Navigation Bar. We have used a Top Bar component as the navigation bar.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
    <link rel="stylesheet" href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet" href=
    <!-- Compressed JavaScript -->
    </script>
    <script src=
    </script>
</head>
 
<body>
    <!-- This demo uses float grid but you can use flex grid too -->
    <div data-sticky-container>
        <div class="top-bar" data-sticky data-margin-top="0"
            id="example-menu">
            <div class="top-bar-left">
                <ul class="menu">
                    <li class="menu-text">
                        <h4 style="color: green">
                            GeeksforGeeks</h4>
                    </li>
                </ul>
            </div>
            <div class="top-bar-right">
                <ul class="menu float-right" data-magellan>
                    <li><a href="#dsa">
                            <button type="button" class="button">
                                Got to DSA Section</button></a></li>
                    <li><a href="#Algo">
                            <button type="button" class="button">
                                Skip to Algo Section</button></a></li>
                    <li><a href="#Java">
                            <button type="button" class="button">
                                Got to Java Section</button></a></li>
                </ul>
            </div>
        </div>
    </div>
    <h3 class="margin-1">Foundation CSS Magellan Navigation</h3>
    <div class="row demo-toggle-title">
        <div class="columns">
            <div class="sections">
                <section id="dsa" data-magellan-target="dsa">
                    <h4>DSA section</h4>
                    <strong>This is the DSA section. </strong>
 
                     
<p>
                        A data structure is a group of data elements
                        that provides the easiest way to store and perform
                        different actions on the data of the computer.
                        A data structure is a particular way of organizing
                        data in a computer so that it can be used effectively.
                        The idea is to reduce the space and time
                        complexities of different tasks.
 
                        The choice of a good data structure makes it
                        possible to perform a variety of critical
                        operations effectively. An efficient data
                        structure also uses minimum memory space and
                        execution time to process the structure.
                    </p>
 
                </section>
 
                <section id="Algo" data-magellan-target="Algo">
                    <h4>Algo section</h4>
                    <strong>This is the Algo section.</strong>
 
                     
<p>
                        Hi Geeks!! Welcome to GeeksForGeeks.
                        The word Algorithm means ” A set of rules to
                        be followed in calculations or other
                        problem-solving operations ” Or ” A procedure
                        for solving a mathematical problem in a finite
                        number of steps that frequently by recursive
                        operations “.
 
                        Therefore Algorithm refers to a sequence of
                        finite steps to solve a particular problem.
 
                        It can be understood by taking the example of
                        cooking a new recipe. To cook a new recipe, one
                        reads the instructions and steps and executes
                        them one by one, in the given sequence. The
                        result thus obtained is the new dish cooked
                        perfectly. Every time you use your phone,
                        computer, laptop, or calculator you are using
                        Algorithms. Similarly, algorithms help to do
                        a task in programming to get the expected output.
 
                        The Algorithm designed are language-independent,
                        i.e. they are just plain instructions that can
                        be implemented in any language, and yet the
                        output will be the same, as expected.
                    </p>
 
                </section>
 
                <section id="Java" data-magellan-target="Java">
                    <h4>Java section</h4>
                    <strong>This is the JAVA Section</strong>
 
                     
<p>JAVA was developed by James Gosling at Sun
                        Microsystems Inc in the year 1995, later acquired
                        by Oracle Corporation. It is a simple programming
                        language. Java makes writing, compiling, and
                        debugging programming easy. It helps to create
                        reusable code and modular programs. Java is a
                        class-based, object-oriented programming
                        language and is designed to have as few
                        implementation dependencies as possible. A
                        general-purpose programming language made for
                        developers to write once run anywhere that is
                        compiled Java code can run on all platforms that
                        support Java. Java applications are compiled
                        to byte code that can run on any Java Virtual
                        Machine. The syntax of Java is similar to c/c++.
                    </p>
 
                </section>
            </div>
        </div>
    </div>
 
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>


Output:

 

Reference: https://get.foundation/sites/docs/magellan.html#sticky-navigation 



Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads