Create Drop Down Menu using HTML and CSS - Codewithrandom

Create  Drop Down Menu using HTML and CSS - Codewithrandom

Create  Drop Down Menu using HTML and CSS - Codewithrandom


Heyy Learners, Today we are going to develop a amazing navbar.So now you are thinking what amazing about navbar.So this Nav bar  is not so simple it has drop down menu lists.You can see down in the Live server

Live Server:-

Live server of the drop down menu is below:-


See the Pen Untitled by Himanshu Singh (@himanishu)

 

HTML CODE(LAYOUT OF WEBSITE):-

 So we are going to create only the nav bar so I used semantic tag Header and inside it the nav Inside the nav two divs one for logo and menu. Insidse it I have used four divs as menuitems for HOME, WORK, ABOUT and  CONTACT US. We are inserting two divs inside it namely Devlopement and design and inside the dev, we have inserted two divs for web and app inserted ion-icon (an icon package) and linked the css with it.

 

 <!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">  
    <title>Document</title>  
   <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">  
   <link rel="stylesheet" href="style.css">  
 </head>  
 <body>  
   <header>  
     <nav>  
       <div class="logo"><a href="">LOGO</a></div>  
       <div class="menu">  
         <div class="menuitem"><a href="">HOME</a></div>  
         <div class="menuitem"><a href="">ABOUT US</a></div>  
         <div class="menuitem work"><a href="">WORK</a><ion-icon name="arrow-dropdown"></ion-icon>  
           <div class="workitem">  
           <div class="dev item"><a href="">DEVELPEMENT</a><ion-icon name="arrow-dropright"></ion-icon>  
         <div class="devitem">  
           <div class="web item"><a href="">WEB</a></div>  
           <div class="app item"><a href="">APP</a></div>  
         </div></div>  
           <div class="design item"><a href="">DESIGNING</a></div>  
           </div>  
         </div>  
         <div class="menuitem"><a href="">CONTACT US</a></div>  
       </div>  
     </nav>  
   </header>  
   <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>  
 </body>  
 </html>   

 

CSS(STYLING THE LAYOUT):- 

After creating the basic layout of the website now its time to style it and make it beautiful and a working webpage.

I have used simple styling methods like flexbox and some basics of css.

 *{  
   margin: 0;  
   padding: 0;  
 }  
 nav{  
   display:flex;  
   justify-content:space-evenly;  
   width:100vw;  
   background-color: green;  
 }  
 .logo{  
   padding: 20px;  
 }  
 .menu{  
   display:flex;  
 }  
 a{  
   text-decoration:none;  
   color:white;  
 }  
 .workitem{  
   display: none;  
 }  
 .devitem{  
   display: none;  
 }  
 .menuitem{  
   padding: 20px;  
 }  
 .menuitem:hover{  
   background-color: rgb(43, 82, 5);  
 }  
 .work{  
   position:relative;  
 }  
 .work:hover .workitem{  
   padding-top:10px;  
 display: flex;  
 position:absolute;  
 flex-direction: column;  
 left:0;  
 }  
 .dev:hover .devitem{  
   display: flex;  
   position:absolute;  
   flex-direction: column;  
   left:100%;  
   top:0px;  
 }  
 .item:hover{  
   background-color: rgb(11, 78, 2);  
 }  
 .dev:hover{  
   position:relative;  
 }  
 .item{  
   background-color: green;  
   height:30px;  
   padding:12px;  
   width:100px;  
   border-width:1px 0px;  
   border-color:white;  
   border-style:dotted;  
   display: flex;  
 }  
 ion-icon{  
   color:white;  
 }  

 

I hope you liked it Wait, Did you still not implement it So why are you waiting, go and implement it now 😎.


If you faced any difficulty feel free to comment on your problems and If you really liked it, please show your love in the comment section this really motivates a blogger to provide more such content.

You can follow me on Instagram.


Written by @Himanshu Singh.

Post a Comment

Previous Post Next Post