Foundation CSS is an Open-source front-end framework that makes it simple and quick to build stunning, responsive websites, mobile apps, and emails. September of that year saw ZURB publish it. Many companies, including Facebook, eBay, Mozilla, Adobe, and even Disney, use it. Based on the Bootstrap framework, this framework mimics SaaS. More complex, adaptable, and unique are its characteristics. The ease of use of its command-line interface makes working with module bundlers a snap. Email creation software uses HTML to produce responsive emails that operate well on mobile devices. Making completely responsive web applications is possible with Foundation for Apps.
A Menu is an amazing approach to creating a list of links that will help a user navigate throughout the website. We can set the menu to different alignments like vertical. We can use Sticky Navigation to keep the menu stuck at the top of the webpage.
Foundation CSS Menu Sticky Navigation classes:
- menu: This class is used to add a basic menu. This class is used inside a <ul> element.
Foundation CSS Menu sticky navigation attributes:
- [data-sticky-container]: This attribute is added to the container which you want to make a sticky container. This attribute doesn’t accept any value.
- [data-sticky]: This attribute is added to the container in which you want to make a sticky element. This attribute doesn’t accept any value.
Syntax:
<div data-sticky-container>
<ul class ="menu" data-sticky>
<li>...</li>
<li>...</li>
</ul>
</div>Example 1: In the below-given code a basic menu is made sticky using the above-given attributes.
HTML
<!DOCTYPE html> <html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
</head>
<body>
<div data-sticky-container>
<ul class="menu" data-sticky>
<li>
<a href="#">Placement Course</a>
</li>
<li>
<a href="#">DSA</a>
</li>
<li>
<a href="#">Algorithms</a>
</li>
</ul>
</div>
<div class='column row' id='root'>
<h1 class="text-center" style="color:green;">
GeeksforGeeks
</h1>
<h3 class="text-center">
Foundation CSS Menu Sticky Navigation
</h3>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 2: In the below-given code a menu with icons and an active state is made sticky using the above-given attributes.
HTML
<!DOCTYPE html> <html>
<head>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div data-sticky-container class="margin-left-2">
<ul class="menu" data-sticky>
<li class="is-active">
<a href="#"><ion-icon name="id-card-outline"></ion-icon>
Placement Course
</a>
</li>
<li>
<a href="#"><ion-icon name="rocket-outline"></ion-icon>
DSA
</a>
</li>
<li>
<a href="#"><ion-icon name="telescope-outline"></ion-icon>
Algorithms
</a>
</li>
</ul>
</div>
<div class='column row margin-top-3' id='root'>
<h1 class="text-center" style="color:green;">
GeeksforGeeks
</h1>
<h3 class="text-center">
Foundation CSS Menu Sticky Navigation
</h3>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
<p class="margin-3">
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line. Welcome to GFG.
This is an example line.
Hi Geeks!! Welcome to GeeksForGeeks.
This is an example line.
</p>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
References: https://get.foundation/sites/docs/sticky.html#sticky-navigation