Answer to Question #265652 in Web Development for balu

Question

Answer to Question #265652 in Web Development for balu

Answers>

Programming & Computer Science>

Web Development

Question #265652

Responsive Navbar let's build an Responsive Navbar page by applying the CSS concepts

Medium (Size >= 768px), Large (Size >= 992px), and Extra Large (Size >= 1200px):

Instructions:

The links in the HTML nav element should be hidden in devices below 768px and visible in devices equal and above 768px.
The page should have two different background images in devices below 768px and devices equal and above 768px.
The links in the HTML nav element should be displayed when clicked on the menu icon in devices below 768px.
The links in the HTML nav element should be hidden when clicked on the close icon in devices below 768px.
Use classList.toggle() to show and hide the HTML elements.

Note

Achieve the design using the CSS Flexbox layout and Media queries and Javascript.
Font Awesome Icons.

Resources

https://assets.ccbp.in/frontend/intermediate-rwd/landing-page-logo.png
https://assets.ccbp.in/frontend/intermediate-rwd/landing-page-sm-bg.png
https://assets.ccbp.in/frontend/intermediate-rwd/landing-page-lg-bg.png

Expert's answer

<!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" />
   <title>Document</title>
 </head>
 <body>
   <nav class="navbar">
     <!-- LOGO -->
     <div class="logo">MUO</div>
     <!-- NAVIGATION MENU -->
     <ul class="nav-links">
       <!-- USING CHECKBOX HACK -->
       <input type="checkbox" id="checkbox_toggle" />
       <label for="checkbox_toggle" class="hamburger">&#9776;</label>
       <!-- NAVIGATION MENUS -->
       <div class="menu">
         <li><a href="/">Home</a></li>
         <li><a href="/">About</a></li>
         <li class="services">
           <a href="/">Services</a>
           <!-- DROPDOWN MENU -->
           <ul class="dropdown">
             <li><a href="/">Dropdown 1 </a></li>
             <li><a href="/">Dropdown 2</a></li>
             <li><a href="/">Dropdown 2</a></li>
             <li><a href="/">Dropdown 3</a></li>
             <li><a href="/">Dropdown 4</a></li>
           </ul>
         </li>
         <li><a href="/">Pricing</a></li>
         <li><a href="/">Contact</a></li>
       </div>
     </ul>
   </nav>
 </body>
</html>

/*RESPONSIVE NAVBAR MENU STARTS*/
/* CHECKBOX HACK */
input[type=checkbox]{
 display: none;
} 
/*HAMBURGER MENU*/
.hamburger {
 display: none;
 font-size: 24px;
 user-select: none;
}

/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
.menu { 
 display:none;
 position: absolute;
 background-color:teal;
 right: 0;
 left: 0;
 text-align: center;
 padding: 16px 0;
}
.menu li:hover {
 display: inline-block;
 background-color:#4c9e9e;
 transition: 0.3s ease;
}
.menu li + li {
 margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu{
 display: block;
}
.hamburger {
 display: block;
}
.dropdown {
 left: 50%;
 top: 30px;
 transform: translateX(35%);
}
.dropdown li:hover {
 background-color: #4c9e9e;
}
}