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