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.
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:
.lamp{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.
position:absolute !important;
height:4px;
top:66px;
background:#333;
transition:all .3s linear;
-o-transition:all .3s linear;
-moz-transition:all .3s linear;
-webkit-transition:all .3s linear;
}
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:
<div>
<div>Subchild</div>
<div>Subchild</div>
</div>
<div>
<div>Subchild</div>
<div>Subchild</div>
</div>
</div>
.daddy div{But if you want to select only the child not sub-child then you can write
}
.daddy>div{Finally if you want to select only sub-childs then you can write
}
.daddy>div>div{
}
22 October 2014Lava lamp not working, Fixed!
A Great News
My Codepen pen that has been used in this article selected for popular picks.
Great! Thank you.
ReplyDeleteCan you please tell me how can i use this on my blogger based blog. I've added html and css with jquery too but the Slider don't work .
ReplyDeleteReven thanks for asking.
DeleteReven make sure that you added Jquery under a document ready function.Like this one
$(document).ready(function(){
if($('.nav>ul>li').hasClass('selected')){
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
else{
$('.nav>ul>li').first().addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
$('.nav>ul>li').hover(function(){
$('.nav ul li').removeClass('active');
$(this).addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
},function(){
if($('.nav>ul>li').hasClass('selected')){
$('.selected').addClass('active');
var currentleft=$('.selected').position().left+"px";
var currentwidth=$('.selected').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
else{
$('.nav>ul>li').first().addClass('active');
var currentleft=$('.active').position().left+"px";
var currentwidth=$('.active').css('width');
$('.lamp').css({"left":currentleft,"width":currentwidth});
}
});
});