Foundation CSS Kitchen Sink Responsive Menu
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 layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Kitchen Sink Responsive Menu Classes in Foundation CSS.
Kitchen Sink has the foundation elements to work well in our websites and applications. The Kitchen Sink Responsive Menu is used to add the responsive menu with horizontal and vertical alignment of items in the website and mobile view respectively.
Foundation CSS Kitchen Sink Responsive Menu classes:
- [size]-vertical: This class is used to specify the vertical alignments of items on the given size screen. The screen sizes can be small, medium, and large.
- [size]-horizontal: This class is used to specify the vertical alignments of items on the given size screen. The screen sizes can be small, medium, and large.
Syntax:
<ul class="[size]-vertical
[size]-horizontal menu">
<li>
......
</li>
</ul>
Example 1: Below is the example that illustrates the use of the Kitchen Sink Responsive Menu using medium-vertical, large-horizontal, and menu classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Responsive Menu</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h5>Foundation CSS Kitchen Sink Responsive Menu</h5>
<ul class="medium-vertical large-horizontal menu">
<li>
<a href="#">DSA</a>
</li>
<li>
<a href="#">OOP's</a>
</li>
<li>
<a href="#">DBMS</a>
</li>
<li>
<a href="#">OS</a>
</li>
</ul>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Responsive Menu
Example 2: Below is the example that illustrates the use of the Kitchen Sink Responsive Menu using large-vertical, medium-horizontal, and menu classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Responsive Menu</title>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h5>Foundation CSS Kitchen Sink Responsive Menu</h5>
<ul class="large-vertical medium-horizontal menu">
<li>
<img src=
alt="gfg">
</li>
<li>
<img src=
alt="gfg">
</li>
<li>
<img src=
alt="gfg">
</li>
</ul>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Responsive Menu
Reference: https://get.foundation/sites/docs/kitchen-sink.html#responsive-menu
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...