Pure CSS Responsive Horizontal-to-Vertical Menu Layout
Last Updated :
03 Feb, 2023
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 >
< 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
.menu {
display : flex;
flex- direction : row;
list-style : none ;
margin : 0 ;
padding : 0 ;
}
.menu-item {
flex: 1 ;
text-align : center ;
}
@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 >
< 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
.menu {
display : flex;
list-style : none ;
margin : 0 ;
padding : 0 ;
}
.menu-item {
flex: 1 ;
text-align : center ;
}
@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 >
< 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
.menu {
display : flex;
flex- direction : row;
list-style : none ;
margin : 0 ;
padding : 0 ;
}
.menu-item {
flex: 1 ;
text-align : center ;
}
.menu-toggle {
display : none ;
}
@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.3 s ease-out;
}
.menu.active {
transform: translateX( 0 );
}
.menu-item {
flex: none ;
width : 100% ;
}
.menu-toggle {
display : block ;
position : relative ;
z-index : 1 ;
padding : 10px ;
cursor : pointer ;
}
}
|
Output:
Reference: https://purecss.io/tools/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...