Pure CSS Responsive Horizontal-to-Vertical Menu Layout
To create a responsive horizontal-to-vertical menu layout using only CSS, you can use media queries to apply different styles to the menu based on the width of the viewport.
Example 1: This will create a horizontal menu with evenly distributed menu items on larger screens, and a vertical menu with full-width menu items on smaller screens. You can adjust the width at which the menu switches to a vertical layout by changing the value in the media query. For example, you can use @media (max-width: 800px) to make the menu switch to a vertical layout at a wider viewport width.
HTML code:
HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" href="style.css" /></head><body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Pure CSS Responsive Horizontal-to-Vertical Menu Layout</h3> <!-- menu --> <ul class="menu"> <li class="menu-item"> <a href="#">Home</a> </li> <li class="menu-item"> <a href="#">About</a> </li> <li class="menu-item"> <a href="#">Contact</a> </li> </ul></body></html> |
style.css: The following code is used in the above HTML code.
CSS
/* horizontal menu styles */.menu { display: flex; flex-direction: row; list-style: none; margin: 0; padding: 0;} .menu-item { flex: 1; text-align: center;} /* vertical menu styles */@media (max-width: 600px) { .menu { flex-direction: column; } .menu-item { flex: none; width: 100%; }} |
Output:
Example 2: Using a Media Query to Change the Display property.
In this example, we use a media query to change the display property of the .menu element from flex to block when the viewport width is below a certain threshold. This causes the menu items to stack vertically and take up the full width of the container.
HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" href="style.css" /></head><body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Pure CSS Responsive Horizontal-to-Vertical Menu Layout</h3> <!-- menu --> <ul class="menu"> <li class="menu-item"> <a href="#">Home</a> </li> <li class="menu-item"> <a href="#">About</a> </li> <li class="menu-item"> <a href="#">Contact</a> </li> </ul></body></html> |
style.css
CSS
/* horizontal menu styles */.menu { display: flex; list-style: none; margin: 0; padding: 0;} .menu-item { flex: 1; text-align: center;} /* vertical menu styles */@media (max-width: 600px) { .menu { display: block; } .menu-item { display: block; width: 100%; }} |
Output:
Example 3: Using a Toggle Button to Show/Hide the Menu
In this example, we use a toggle button to show or hide the menu when the viewport width is below a certain threshold. The menu is hidden by default and can be revealed by clicking the toggle button.
HTML
<!DOCTYPE html><html><head> <link rel="stylesheet" href="style.css" /></head><body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Pure CSS Responsive Horizontal-to-Vertical Menu Layout</h3> <!-- menu --> <ul class="menu"> <li class="menu-item"> <a href="#">Home</a> </li> <li class="menu-item"> <a href="#">About</a> </li> <li class="menu-item"> <a href="#">Contact</a> </li> </ul></body></html> |
style.css:
CSS
/* horizontal menu styles */.menu { display: flex; flex-direction: row; list-style: none; margin: 0; padding: 0;} .menu-item { flex: 1; text-align: center;} /* toggle button styles */.menu-toggle { display: none;} /* vertical menu styles */@media (max-width: 600px) { .menu { flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; transform: translateX(-100%); transition: transform 0.3s ease-out; } .menu.active { transform: translateX(0); } .menu-item { flex: none; width: 100%; } /* toggle button styles */ .menu-toggle { display: block; position: relative; z-index: 1; padding: 10px; cursor: pointer; }} |
Output:
Reference: https://purecss.io/tools/
Please Login to comment...