Blogger Ever

How to create a lava lamp navigation with drop down menu?

Create your lava lamp navigation menu with dropdown using CSS3 and jQuery.

Lava lamp navigation doesn't sound something new if you are regular visitor of this blog because a couple of weeks before I shared about how to create a lava lamp navigation menu using Jquery.This time I got something like lava lamp with a drop down menu with a bit more customization.

The changes has been made are:
  • Better customized than before one.
  • Lamp now have a arrow and is at bottom.
  • Drop down is pure CSS3.
Below pen shows demo,if you can't see it then click here.
See the Pen Lava Lamp Navigation With Drop Down Menu.Its cool by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
I'm going to give a brief descriptions on some major points of the code.To get the whole code you cant get it from GitHub.
The things you need to consider in lava lamp is that how they are moving.First is that the values are only changed by Jquery but the animation is done by CSS3.As the below code shows:
  position:absolute !important;
  transition:all .3s linear;
  -o-transition:all .3s linear;
  -moz-transition:all .3s linear;
  -webkit-transition:all .3s linear;
Second is according to the HTML anyone of the link should have a class selected to make sure that the lamp is set to be on the link of the current opened page but for instance if their is no class selected then the lamp will stay on the first link of the navigation.

Lamp is now have a CSS arrow to make it look more cool and sexy to make it I've added a span in the lamp div and used it as a source of arrow.

One more change that I've done to make it work perfect that is I've added a delay of .2s on mouseout in CSS because when a user hover on a parent link of navigation the menu arises from bottom and when cursor move towards bottom normally it will pass through the lamp because of which the drop down menu can get close.Due to this remove this bug I've added .2s delay.
Still people are finding confusion in arrows ( > ) in CSS.It indicates the child of the specific element.For example if you there are two child of a parent element .daddy and each child have two more child,then these extra child becomes sub child for .daddy.
<div class='daddy'>
If you want to select all child and sub-child of .daddy then you can write:
.daddy div{
But if you want to select only the child not sub-child then you can write
Finally if you want to select only sub-childs then you can write
22 October 2014Lava lamp not working, Fixed!

A Great News

My Codepen pen that has been used in this article selected for popular picks.


2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.