Responsive Menu with HTML and CSS

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

Leave a Comment