Mega Drop-down NavBar for Blogger With Flexbox - Using HTML and CSS

Mega Drop-down NavBar for Blogger With Flexbox


Hello Friends In this article we will teach you to design a simple Mega Drop-down Nav Bar with the help of Using HTML and CSS.


Have you ever seen a website without a Nav Bar? Would not have seen it because every website would have a menu, even if it was a small menu.


With the help of a menu, you can show your content or information directly to your users. So let's start designing the Mega Drop-down Nav Bar. 


We'll take you step-by-step to learn how to create a Navigation Design in this one article.


https://codyhouse.co/assets/img/gems/hero/mega-dropdown-featured-new.svg


Designing this Simple Navigation Menu is very easy, for this you do not need to do much nor do you need to write code of jQuery and Javascript. We can easily make this Simple Menu with the help of just HTML and CSS.



Mega Drop-down Nav Bar for Blogger With Flexbox



How to Design a Mega Drop-down Nav Bar?


First of all, you need HTML Structure For Mega Drop-down Nav Bar


<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html b:css="false" b:defaultwidgetversion="2" b:layoutsVersion="3" b:responsive="true" b:templateVersion="1.3.0" expr:class="data:blog.languageDirection" expr:dir="data:blog.languageDirection" expr:lang="data:blog.localeUnderscoreDelimited" xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr">

<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<head>{codeBox}



Now It's Time to Add Some CDN Links?



The Full-form of CDN is "Content Delivery Network". CDN is a network of servers spread around the world that saves the files of your website in its temporary memory i.e. cache. CDN sends these files to all its servers and when a user visits your website, CDN delivers those files from your website from its cache to the server closest to that user. 


In such a situation, these files do not have to travel much and due to the short distance, those files reach that user very fast. This process increases the speed of your website to a great extent.


ADD THIS 2 LINKS BELOW THE <head> AND ABOVE </head> TAG


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />{alertSuccess}


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />{alertSuccess}


NOW IT'S TIME TO ADD OUR HTML STRUCTURE FOR MEGA DROP-DOWN NAV BAR



<!-- Start Navigation Bar -->

<nav class="navbar">

<ul class="menu">

<li> <a class="hasDropdown" href="#">Electronics <i class="fa fa-angle-down"></i></a>

<ul class="container">

<div class="container__list">

<div class="container__listItem">

<div>Televisions</div>

</div>

<div class="container__listItem">

<div>Home Entertainment Systems</div>

</div>

<div class="container__listItem">

<div>Headphones</div>

</div>

<div class="container__listItem">

<div>Speakers</div>

</div>

<div class="container__listItem">

<div>MP3, Media Players & Accessories</div>

</div>

<div class="container__listItem">

<div>Audio & Video Accessories</div>

</div>

<div class="container__listItem">

<div>Cameras</div>

</div>

<div class="container__listItem">

<div>DSLR Cameras</div>

</div>

<div class="container__listItem">

<div>Camera Accessories</div>

</div>

<div class="container__listItem">

<div>Musical Instruments & Professional Audio</div>

</div>

<div class="container__listItem">

<div>Gaming Consoles</div>

</div>

<div class="container__listItem">

<div> All Electronics </div>

</div>

<div class="container__listItem">

<div>Air Conditioners</div>

</div>

<div class="container__listItem">

<div>Refrigerators</div>

</div>

<div class="container__listItem">

<div>Washing Machines</div>

</div>

<div class="container__listItem">

<div>Kitchen & Home Appliances</div>

</div>

<div class="container__listItem">

<div>Heating & Cooling Appliances</div>

</div>

<div class="container__listItem">

<div>All Appliances</div>

</div>

</ul>

</li>

<li> <a class="hasDropdown" href="#">Appliances <i class="fa fa-angle-down"></i></a>

<ul class="container has-multi">

<div class="container__list container__list-multi">

<div class="container__listItem">

<div>Televisions</div>

</div>

<div class="container__listItem">

<div>Home Entertainment Systems</div>

</div>

<div class="container__listItem">

<div>Headphones</div>

</div>

<div class="container__listItem">

<div>Speakers</div>

</div>

<div class="container__listItem">

<div>MP3, Media Players & Accessories</div>

</div>

<div class="container__listItem">

<div>Audio & Video Accessories</div>

</div>

<div class="container__listItem">

<div>Cameras</div>

</div>

<div class="container__listItem">

<div>DSLR Cameras</div>

</div>

<div class="container__listItem">

<div>Camera Accessories</div>

</div>

<div class="container__listItem">

<div>Musical Instruments & Professional Audio</div>

</div>

<div class="container__listItem">

<div>Gaming Consoles</div>

</div>

<div class="container__listItem">

<div> All Electronics </div>

</div>

<div class="container__listItem">

<div>Air Conditioners</div>

</div>

<div class="container__listItem">

<div>Refrigerators</div>

</div>

<div class="container__listItem">

<div>Washing Machines</div>

</div>

<div class="container__listItem">

<div>Kitchen & Home Appliances</div>

</div>

<div class="container__listItem">

<div>Heating & Cooling Appliances</div>

</div>

<div class="container__listItem">

<div>All Appliances</div>

</div>

</div>

<div class="container__list container__list-multi">

<div class="container__listItem">

<div>Mobiles</div>

</div>

<div class="container__listItem">

<div>Laptops</div>

</div>

<div class="container__listItem">

<div>Mobile Accessories</div>

</div>

<div class="container__listItem">

<div>PC Accessories</div>

</div>

<div class="container__listItem">

<div>Data Storage</div>

</div>

<div class="container__listItem">

<div>PC Components</div>

</div>

<div class="container__listItem">

<div>Speakers</div>

</div>

<div class="container__listItem">

<div>Networking</div>

</div>

<div class="container__listItem">

<div>Printers and Ink</div>

</div>

<div class="container__listItem">

<div>Wearables</div>

</div>

<div class="container__listItem">

<div>Tablets</div>

</div>

<div class="container__listItem">

<div> Desktops </div>

</div>

<div class="container__listItem">

<div>Chromebook</div>

</div>

<div class="container__listItem">

<div>USBs</div>

</div>

<div class="container__listItem">

<div>CAT5 Cables</div>

</div>

<div class="container__listItem">

<div>Water Purifiers</div>

</div>

<div class="container__listItem">

<div>Screenguards</div>

</div>

<div class="container__listItem">

<div>All Appliances</div>

</div>

<div class="container__listItem">

<div>Landline Phones</div>

</div>

<div class="container__listItem">

<div>Chargers</div>

</div>

</div>

<div class="container__list container__list-multi">

<div class="container__listItem">

<div>Selfie Sticks</div>

</div>

<div class="container__listItem">

<div>Pendrives</div>

</div>

<div class="container__listItem">

<div>Keyboards</div>

</div>

<div class="container__listItem">

<div>Mouse</div>

</div>

<div class="container__listItem">

<div>Monitors</div>

</div>

<div class="container__listItem">

<div>Smart Glasses (VR)</div>

</div>

<div class="container__listItem">

<div>iPods and MP3 Players</div>

</div>

<div class="container__listItem">

<div>Mobile Cables</div>

</div>

<div class="container__listItem">

<div>Memory Cards</div>

</div>

<div class="container__listItem">

<div>Power Banks</div>

</div>

<div class="container__listItem">

<div>Home Theatres</div>

</div>

<div class="container__listItem">

<div> Hand Blenders </div>

</div>

<div class="container__listItem">

<div>Air Fryers</div>

</div>

<div class="container__listItem">

<div>Popup Toasters</div>

</div>

<div class="container__listItem">

<div>Coffee Makers</div>

</div>

<div class="container__listItem">

<div>Electric Cooker</div>

</div>

<div class="container__listItem">

<div>Vacuum Cleaners</div>

</div>

<div class="container__listItem">

<div>Fans</div>

</div>

<div class="container__listItem">

<div>Irons</div>

</div>

<div class="container__listItem">

<div>Landline Phones</div>

</div>

</div>

</ul>

</li>

<li> <a href="#">Kids</a> </li>

<li> <a href="#">Men</a> </li>

<li> <a href="#">Baby</a> </li>

<li> <a href="#">Women</a> </li>

<li> <a href="#">Furniture</a> </li>

<li> <a href="#">Decors</a> </li>

<ul>

</nav>

<!-- End Navigation Bar -->{codeBox}


As you can see in the above code that we have prepared the HTML structure first, after that using the <nav> tag inside the body, <ul> and <li> have been used. 


<ul> means un-ordered list in which we add links. To add links, we have used <li> element and inside it <a> i.e. to give Anchor Tag Link.


Now We Will Design Our Mega Drop-down Nav Bar With CSS



Mega Drop-down Nav Bar for Blogger With Flexbox


Mega Drop-down Nav Bar for Blogger With Flexbox


* {

  box-sizing: border-box;

}


body {

  background: #edeff0;


  font-family: "Hind", sans-serif;

}


/* Start Navigation Bar */


.navbar {

  background-color: #25283d;


  color: #ffffff;


  border-radius: 4px;


  width: 100vw;


  max-width: 820px;


  margin: 20px auto 0;

}


.navbar .menu {

  display: flex;


  position: relative;

}


@media (max-width: 820px) {

  .navbar .menu {

    display: block;


    position: relative;

  }

}


.navbar .menu li {

  flex: 1;


  display: flex;


  text-align: center;


  transition: background-color 0.5s ease;

}


.navbar .menu a {

  flex: 1;


  justify-content: center;


  display: inline-flex;


  color: #ffffff;


  text-decoration: none;


  padding: 20px;


  position: relative;

}


.navbar .menu a > .fa {

  font-weight: bold;


  margin-left: 8px;

}


.navbar .menu li:hover {

  background-color: #8f3985;

}


.navbar .menu li:hover .container {

  display: flex;

}


@media (max-width: 820px) {

  .navbar .menu li:hover .container {

    display: none;

  }


  .fa-angle-down {

    display: none;

  }

}


a.hasDropdown:after {

  position: absolute;


  bottom: -16px;


  left: 50%;


  transform: translateX(-50%);


  height: 0;


  width: 0;


  border: 8px solid transparent;


  border-top-color: #25283d;


  z-index: 2;

}


@media (max-width: 820px) {

  li:hover a.hasDropdown:after {

    display: none;

  }

}


li:hover a.hasDropdown:after {

  content: "";


  border-top-color: #8f3985;

}


/* End Navigation Bar */


/* Start Single Section Menu */


.container {

  display: none;


  position: absolute;


  top: 56px;


  left: 0;


  right: 0;


  background-color: #ffffff;


  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);


  padding: 20px;


  text-align: left;


  margin-bottom: 30px;

}


.container__list {

  flex: 1;


  display: flex;


  flex-wrap: wrap;


  min-width: 0;

}


.container__listItem {

  flex: 0 0 25%;


  padding: 10px 30px;


  overflow: hidden;


  white-space: nowrap;


  text-overflow: ellipsis;

}


.container__listItem > div {

  color: #db6356;


  text-decoration: underline;


  cursor: pointer;


  overflow: hidden;


  white-space: nowrap;


  text-overflow: ellipsis;

}


/* End Single Section Menu */


/* Start Multiple Section Menu */


.container.has-multi .container__listItem {

  flex-basis: 100%;

}


.container.has-multi .container__list {

  flex-basis: 33.333%;


  border-radius: 4px;

}


.container.has-multi .container__list:not(:last-child) {

  border-right: solid 1px #f3f3f3;


  margin-right: 20px;

}{codeBox}



CONCLUSION


In this article, we have given you information about Mega Drop-down Nav Bar for Blogger With Flexbox, we hope that you will find the information given by us useful. If you like the information, then definitely share it with your friends. 


If you want to ask questions, then you can tell us through the comment.


THANK YOU HAVE A NICE DAY.


AKASH TIMES

I AM AN ENGINEER BY PROFESSION BUT BLOGGER IS MY OLD DAYS DREAM TO CREATE MY OWN SITE FOR THOSE WHO ARE CURIOUS ABOUT MY BIRTHPLACE THEN I AM COMING FROM (INDIA). THE CURRENT CITY LIVES IN NAVI MUMBAI, INDIA

Post a Comment

IF YOU HAVE ANY PROBLEM PLEASE FELL FREE TO CONTACT US BY - AKASH TIMES

Previous Post Next Post