CSS ONLY RESPONSIVE FIXED NAVIGATION BAR (SIMPLE STEPS)

Typical navigation menus use JavaScript for collapsible menu systems, but this can be done easily with just few lines of CSS. In this demonstration I will show you how to build a Top navigation menu with collapsible dropdown menu on hover.
VIEW DEMO DOWNLOAD SOURCE

I. HTML

1. MENU ICON (FOR MOBILE)

Click event is created by creating two elements which is a label and a checkbox. The name in the ‘for’ attribute of the label tag is the same as of the ‘id’ attribute of the checkbox. Now the checkbox is toggled when the label is clicked.

OPTIONAL: PUT THREE EMPTY SPAN TAGS INSIDE A LABEL TO BE USED AS AN ICON USING CSS

2. UL INSIDE LI

Create an unordered list with anchor link inside each list item, and then create another unordered list inside any list item that you want a collapsible dropdown menu to appear whenever that particular list item is hovered.

II. CSS

1. MAIN MENU

Use text align CSS property to align the menu links into the centre of the full width navigation bar, then the display:inline-block; is used to make the list items appear horizontally on desktop layout.

   
 /*ALIGN MENU LINKS IN CENTER OF NAVIGATION*/                                                          
ul.major{
 text-align: center;              
}
/*MAIN MENU LINK ITEMS APPEAR HORIZONTALLY*/
ul.major li{
 display:inline-block;
}

2. HIDE DROPDOWN MENU

The dropdown menu links appeared vertically by the use of display:block. The dropdown menu inside each list item of the main menu (ul) is hidden using transform:scale(0); by default. The transform:scale(1);is used to display the dropdown menu only when the user hover the mouse over the parent list item.

     
 /*DROPDOWN MENU LINKS ARE ALIGNED vertically */
ul.minor li{
  display:block;
 }
/*HIDE DROPDOWN MENU BY DEFAULT*/                                                          
ul.major ul.minor{
  transform:scale(0);
  transition:all 300ms linear;             
}
 /*SHOW DROPDOWN MENU WHEN USER HOVER OVER THE RELEVANT PARENT MENU ITEM*/                                                          
.dropdown:hover +  ul.minor,ul.minor:hover{
 transform: scale(1); /*SHOW DROPDOWN MENU ON HOVER */
}

3. HIDE MENU ICON & CHECKBOX (FOR DESKTOPLAYOUT)

Display: none; is used to hide both label and checkbox since the main menu is shown by default on large screens. However the Icon label will be shown only on small screens using media queries and display: block;.


/*HIDE CHECKBOX AND MENU ICON AND FOR DESKTOP LAYOUT*/
label,input[type="checkbox"]{
  display:none;
 }
/*NOW SHOW THE MENU ICON ON SMALL SCREENS*/
   @media screen and (max-width: 700px) {
  label{
   display : block;
 }
}

4.HIDE MAIN MENU ON SMALL SCREENS

Media queries and Transform: scale (0) ; will hide the main menu by default on small screens and therefore only the menu icon(the label that was hidden) can now displayed using display: block; inside media queries.


/*HIDE MAIN MENU ICON ON SMALL SCREENS*/
@media screen and (max-width: 700px) {                             
  ul.major  {
    transform: scale(0);
    transition:all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
 }
/* SHOW THE MENU ICON ON SMALL SCREENS*/
 label{
   display : block;
  }
 }

5.SHOW MAIN MENU WHEN ICON IS CLICKED

Make sure the check box tag is followed by the main menu unordered list in your html, and put Transform: scale(1); inside of input[type=”checked”]:checked to show the main menu when menu icon is clicked.

 
/*SHOW MAIN MENU WHEN MAIN MENU WHEN MENU ICON IS CLICKED*/
input[type="checkbox"]:checked +  ul.major{
  transform: scale(1);  /* display the main menu when icon clicked */
  display: block;
}