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> 
    <!-- 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; 
 } 
}