Skip to content
Related Articles

Related Articles

Foundation CSS Navigation Complete Reference

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Jul, 2022
View Discussion
Improve Article
Save Article

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:

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=
    <link rel="stylesheet" href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
 
    <style>
        body {
            margin-left: 10px;
            margin-right: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </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:

Foundation CSS Navigation Complete Reference


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!