Foundation CSS Magellan Navigation
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 = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" > <!-- Compressed JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" > </ script > </ head > < body > <!-- This demo uses float grid but you can use flex grid too --> < h1 style = "color: green;" > w3wiki </ 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 Beginner!! Welcome to w3wiki. 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 = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" > < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" > <!-- Compressed JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" > </ 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" > w3wiki</ 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 Beginner!! Welcome to w3wiki. 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