Responsive Menu with HTML and CSS

by
Tiempo de lectura: 3 minutos

Reading time: 2 minutes

A responsive menu means that it is visible on both PCs and tablets and mobile devices. It involves defining breakpoints where you want the view to change without disrupting the content.

Below is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Responsive Menu</title>
</head>
<body>
    <header>
        <h1>Menu</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
        <div class="oculto">
            <i class="fa fa-bars" aria-hidden="true"></i>
        </div>
    </nav>
javascript
Copy code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(".oculto").on('click', function(){
      $("nav ul").toggle('show');
  }) 
</script>


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family:"Times New Roman", Times, serif;
    font-size: 20px;
}

header {
    width: 100%;
    padding: 100; 
    background-color:#4A235A;
    color: white;
    text-align:center; 
}

nav ul { 
    text-align: center;
    list-style: none;
    background-color: #AF7AC5;
   
}
nav ul li{
    display: inline-block;
    padding: 20px;
    transition: all ease-in-out 250ms;
}
ul li a {
    text-decoration: none; 
    color: white;
  
}
nav ul li:hover {
    background-color:#4A235A;
}
.oculto {
    font-size: 22px;
    padding: 16px;
    display: none;
    background-color:#4A235A;
    color: white;
    cursor: pointed;
    
}

@media (max-width:768px) {
    ul li {
        width: 100%;
        padding: 16px;
        text-align: left;
    }
    nav ul {
        display: none;
    }
    .oculto{
        display: block;
    }
}
menu collapsed
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Responsive Menu</title> </head> <body> <header> <h1>Menu</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Contacts</a></li> </ul> <div class="oculto"> <i class="fa fa-bars" aria-hidden="true"></i> </div> </nav> javascript Copy code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(".oculto").on('click', function(){ $("nav ul").toggle('show'); }) </script> 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family:"Times New Roman", Times, serif;
    font-size: 20px;
}

header {
    width: 100%;
    padding: 100; 
    background-color:#4A235A;
    color: white;
    text-align:center; 
}

nav ul { 
    text-align: center;
    list-style: none;
    background-color: #AF7AC5;
   
}
nav ul li{
    display: inline-block;
    padding: 20px;
    transition: all ease-in-out 250ms;
}
ul li a {
    text-decoration: none; 
    color: white;
  
}
nav ul li:hover {
    background-color:#4A235A;
}
.oculto {
    font-size: 22px;
    padding: 16px;
    display: none;
    background-color:#4A235A;
    color: white;
    cursor: pointed;
    
}

@media (max-width:768px) {
    ul li {
        width: 100%;
        padding: 16px;
        text-align: left;
    }
    nav ul {
        display: none;
    }
    .oculto{
        display: block;
    }
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <title>Responsive Menu</title> </head> <body> <header> <h1>Menu</h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Contacts</a></li> </ul> <div class="oculto"> <i class="fa fa-bars" aria-hidden="true"></i> </div> </nav> javascript Copy code <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(".oculto").on('click', function(){ $("nav ul").toggle('show'); }) </script> 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family:"Times New Roman", Times, serif;
    font-size: 20px;
}

header {
    width: 100%;
    padding: 100; 
    background-color:#4A235A;
    color: white;
    text-align:center; 
}

nav ul { 
    text-align: center;
    list-style: none;
    background-color: #AF7AC5;
   
}
nav ul li{
    display: inline-block;
    padding: 20px;
    transition: all ease-in-out 250ms;
}
ul li a {
    text-decoration: none; 
    color: white;
  
}
nav ul li:hover {
    background-color:#4A235A;
}
.oculto {
    font-size: 22px;
    padding: 16px;
    display: none;
    background-color:#4A235A;
    color: white;
    cursor: pointed;
    
}

@media (max-width:768px) {
    ul li {
        width: 100%;
        padding: 16px;
        text-align: left;
    }
    nav ul {
        display: none;
    }
    .oculto{
        display: block;
    }
}
menu collapsed
expanded menu





Responsive Menu

A responsive menu means that it is visible on both desktop and mobile devices, and it involves defining breakpoints where you want the layout to change without disrupting the content.

php
Copy code

Here’s an example:

<!DOCTYPE html>







Responsive Menu





Menu




javascript
Copy code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(".hidden").on('click', function(){
      $("nav ul").toggle('show');
  }) 
</script>

css
Copy code

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family:"Times New Roman", Times, serif;
font-size: 20px;
}
header {
width: 100%;
padding: 100;
background-color:#4A235A;
color: white;
text-align:center;
}
nav ul {
text-align: center;
list-style: none;
background-color: #AF7AC5;
}
nav ul li{
display: inline-block;
padding: 20px;
transition: all ease-in-out 250ms;
}
ul li a {
text-decoration: none;
color: white;
}
nav ul li:hover {
background-color:#4A235A;
}
.hidden {
font-size: 22px;
padding: 16px;
display: none;
background-color:#4A235A;
color: white;
cursor: pointed;
}
@media (max-width:768px) {
ul li {
width: 100%;
padding: 16px;
text-align: left;
}
nav ul {
display: none;
}
.hidden{
display: block;
}
}

less
Copy code

Menu Example
Menu Example
Collapsed Menu
Collapsed Menu
Expanded Menu
Expanded Menu
Expanded Menu with Hover
Expanded Menu with Hover

This is it, I hope it serves you well, but above all, enjoy it.


Post Views: 12

Leave a Comment