Create a drop-down menu for your blog by using HTML and CSS coding.
The drop-down menu will appear smoothly when someone hovers over its menu item, once the drop-down menu appears, the user will be able to click one of the menu item link in it to visit the individual page.How to created smooth dropdown menu like image above for free ?
The steps are as follows:
Step 1. Create a dropdown menu, or you can see how to create dropdown menu.
Step 2. Go to Blogger admin dashboard. Go to Loyout menu, and then edit widget html/javasrcrip widget .
Step 3. Copy and paste the javascript below at the top position.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
//We initially hide the all dropdown menus
$('#dropdown_nav li').find('.sub_nav').hide();
//When hovering over the main nav link we find the dropdown menu to the corresponding link.
$('#dropdown_nav li').hover(function() {
//Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
$(this).find('.sub_nav').fadeIn("slow");
}
, function() {
//Do the same again, only fadeOut this time.
$(this).find('.sub_nav').fadeOut("slow");
}
);
}
);
</script>
Step 4. Click Save and preview your menu in your blog.
If you want to edit efect menu on hover, you can change the javascript code in step 3. There are 3 effect jQuery we can use.
Efecct 1 is jQuery Fade, there are 4 effect in Fade :
1. fadeIn()
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the fading completes. Example in step 3
$(this).find('.sub_nav').fadeIn("slow");
$(this).find('.sub_nav').fadeIn("fast");
$(this).find('.sub_nav').fadeIn("1500");
2. fadeOut()
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the fading completes. Example in step 3
$(this).find('.sub_nav').fadeOut("slow");
$(this).find('.sub_nav').fadeOut("fast");
$(this).find('.sub_nav').fadeOut("2000");
3. fadeToggle()
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The optional callback parameter is a function to be executed after the fading completes. Example
$(this).find('.sub_nav').fadeToggle("slow");
$(this).find('.sub_nav').fadeToggle("fast");
$(this).find('.sub_nav').fadeToggle("500");
4. fadeTo()
The required speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.
The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).
The optional callback parameter is a function to be executed after the function completes.
$(this).find('.sub_nav').fadeTo("slow",0.20);
Effect 2 is jQuery Slide, there are 3 effect in slide :
1. slideUp()
Syntax:
$(selector).slideUp(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.The optional callback parameter is a function to be executed after the sliding completes.
Example :
$("#flip").click(function(){
$("#panel").slideUp();
});
2. slideDown()
Syntax:
$(selector).slideDown(speed,callback);
The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.The optional callback parameter is a function to be executed after the sliding completes.
Example :
$("#flip").click(function(){
$("#panel").slideDown(fast);
});
3. slideToggle()
The jQuery slideToggle() method toggles between the slideDown() and slideUp() methods. If the elements have been slid down, slideToggle() will slide them up. If the elements have been slid up, slideToggle() will slide them down.
$(selector).slideToggle(speed,callback);
The optional speed parameter can take the following values: "slow", "fast", milliseconds.The optional callback parameter is a function to be executed after the sliding completes.
$("#flip").click(function(){
$("#panel").slideToggle();
});
Effect 3 is jQuery Animate,
The jQuery animate() method is used to create custom animations. Syntax:
$(selector).animate({params},speed,callback);
The required params parameter defines the CSS properties to be animated. The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the animation completes.
Example :
$("button").click(function(){
$("div").animate({left: '250px'});
});
and the last we recommended to use this code below to make smooth effect in your menu.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
//We initially hide the all dropdown menus
$('#dropdown_nav li').find('.sub_nav').hide();
//When hovering over the main nav link we find the dropdown menu to the corresponding link.
$('#dropdown_nav li').hover(function() {
//Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
$(this).find('.sub_nav').slideDown("slow");
}
, function() {
//Do the same again, only fadeOut this time.
$(this).find('.sub_nav').slideUp("fast");
}
);
}
);
</script>
For more detail about jQuery effect you can see in w3schools.
Okay, that's enough for now from me, if you have any questions, please comment in the comments column. If something goes wrong I apologize. Hopefully helpful, and thank you.