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>