Foundation CSS Menu Text
Last Updated :
16 Mar, 2022
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
A menu in Foundation CSS is a navigation list that contains the different components that redirect to the various linked pages in the websites or web applications. While Menu Text means the text in the menu which does not have the link inside it. Then in such a case, we do not use an anchor tag as the text may be misaligned.
Foundation CSS menu text class:
- menu-text: This class creates a menu text which does not contain a link inside it.
Syntax:
<ul class ="menu">
<li class="menu-text">....</li>
<li>....</li>
</ul>
Example 1: This is a basic example illustrating menu text created using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Menu Text</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<strong>Foundation CSS Menu Text</strong>
<ul class="menu">
<li class="menu-text">GeeksforGeeks</li>
<li><a href="#">Data Structures</a></li>
<li><a href="#">Algorithm</a></li>
<li><a href="#">Interview Preparation</a></li>
<li><a href="#">About Us</a></li>
</ul>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Menu Text
Example 2: This is a basic example illustrating right-aligned menu text created using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Menu Text</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<strong>Foundation CSS Menu Text</strong>
<ul class="menu align-right">
<li class="menu-text">GeeksforGeeks</li>
<li><a href="#">Data Structures</a></li>
<li><a href="#">Algorithm</a></li>
<li><a href="#">Interview Preparation</a></li>
<li><a href="#">About Us</a></li>
</ul>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Menu Text
Example 3: This is a basic example illustrating vertical menu text created using Foundation CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Menu Text</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<strong>Foundation CSS Menu Text</strong>
<ul class="menu vertical">
<li class="menu-text">GeeksforGeeks</li>
<li><a href="#">Data Structures</a></li>
<li><a href="#">Algorithm</a></li>
<li><a href="#">Interview Preparation</a></li>
<li><a href="#">About Us</a></li>
</ul>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Menu Text
Reference: https://get.foundation/sites/docs/menu.html
Share your thoughts in the comments
Please Login to comment...