Foundation CSS Navigation Complete Reference
Foundation CSS Navigation is mostly used for the different behavior of cursor navigation on every element. For ex. 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.
Complete list Foundation CSS Navigation are listed below:
- Foundation CSS Menu
- Foundation CSS Basic Menu
- Foundation CSS Menu Item Alignment
- Foundation CSS Menu Vertical Menu
- Foundation CSS Menu Simple Style
- Foundation CSS Menu Nested Style
- Foundation CSS Menu Active State
- Foundation CSS Menu Text
- Foundation CSS Menu Icons
- Foundation CSS Menu Sticky Navigation
- Foundation CSS Menu Sass Reference
- Foundation CSS Dropdown Menu
- Foundation CSS Horizontal Dropdown Menu
- Foundation CSS Vertical Dropdown Menu
- Foundation CSS Sticky Navigation Dropdown Menu
- Foundation CSS Dropdown Menu Sass Reference
- Foundation CSS Dropdown Menu JavaScript Reference
- Foundation CSS Drilldown Menu
- Foundation CSS Drilldown Menu Basics
- Foundation CSS Drilldown Menu autoHeight
- Foundation CSS Drilldown Menu ScrollTop
- Foundation CSS Drilldown Menu Custom Styling
- Foundation CSS Drilldown Menu JavaScript Reference
- Foundation CSS Accordion Menu
- Foundation CSS Accordion Menu Basics
- Foundation CSS Accordion Submenu Toggle
- Foundation CSS Accordion Menu Sass Reference
- Foundation CSS Accordion Menu JavaScript Reference
- Foundation CSS Top Bar
- Foundation CSS Top Bar Basics
- Foundation CSS Top Bar Advanced Layout
- Foundation CSS Top Bar Stacking
- Foundation CSS Top Bar Sticky Navigation
- Foundation CSS Top Bar Sass Reference
- Foundation CSS Responsive Navigation
- Foundation CSS Responsive Navigation Menu
- Foundation CSS Responsive Navigation Toggle
- Foundation CSS Responsive Navigation Toggle with animation
- Foundation CSS Responsive Navigation JavaScript Reference
- Foundation CSS Magellan
- Foundation CSS Magellan Installation
- Foundation CSS Magellan Navigation
- Foundation CSS Magellan Browser History
- Foundation CSS Magellan JavaScript Reference
- Foundation CSS Pagination
- Foundation CSS Pagination Basics
- Foundation CSS Pagination Centered
- Foundation CSS Pagination Sass Reference
- Foundation CSS Breadcrumbs
- Foundation CSS Breadcrumbs Sass Reference
Below example will give you a brief idea about the Navigation of Foundation CSS:
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Foundation CSS Menu Icons</ title > <!-- 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 = "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> <!-- Compressed JavaScript --> < script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" > </ script > < style > body { margin-left: 10px; margin-right: 10px; } </ style > </ head > < body > < h1 style = "color:green;" > w3wiki </ h1 > < strong >Foundation CSS Menu Icons</ strong > < br > < p >Icon Top</ p > < ul class = "menu icons icon-top" > < li >< a href = "#" >< i class = "fi-list" ></ i > < span >Data Structures</ span > </ a > </ li > < li >< a href = "#" > < i class = "fi-list" ></ i > < span >Algorithms</ span > </ a > </ li > < li >< a href = "#" > < i class = "fi-list" ></ i > < span >Interview Preparation</ span > </ a > </ li > </ ul > < p >Icon Bottom</ p > < ul class = "menu icons icon-bottom" > < li >< a href = "#" >Data Structures < i class = "fi-list" ></ i ></ a ></ li > < li >< a href = "#" >Algorithms < i class = "fi-list" ></ i ></ a ></ li > < li >< a href = "#" >Interview Preparation < i class = "fi-list" ></ i ></ a ></ li > </ ul > < p >Icon Left</ p > < ul class = "menu icons icon-left" > < li >< a href = "#" > < i class = "fi-minus" ></ i > < span >Data Structures</ span ></ a > </ li > < li >< a href = "#" >< i class = "fi-minus" > </ i > < span >Algorithms</ span ></ a ></ li > < li >< a href = "#" >< i class = "fi-minus" ></ i > < span >Interview Preparation</ span ></ a > </ li > </ ul > < p >Icon Right</ p > < ul class = "menu icons icon-right" > < li >< a href = "#" >< span >Data Structures</ span > < i class = "fi-minus" ></ i ></ a ></ li > < li >< a href = "#" >< span >Algorithms</ span > < i class = "fi-minus" ></ i ></ a ></ li > < li >< a href = "#" >< span >Interview Preparation</ span > < i class = "fi-minus" ></ i ></ a ></ li > </ ul > < script > $(document).foundation(); </ script > </ body > </ html > |
Output: