Home » , , , » Hammer Effect Mega Drop Down Menu Bar Widget For Blogger

Hammer Effect Mega Drop Down Menu Bar Widget For Blogger


Hammer Effect Mega Drop Down Menu Bar Widget For Blogger. It works very well in all browsers and looks very professional and beautiful .


Mega Drop Down Menu Bar Widget For Blogger
Mega Drop Down Menu Bar Widget For Blogger

VIEW DEMO


We have shared many navigation menu bar widget for blogger and this time it is a mega drop down menu bar widget for blogger. That is fast in loading and compatible with all browsers. Blue color is known as the professional color that is the reason you see most of the website in blue colors so we decided to make this navigation menu bar in blue color and will be liked you, That is guaranteed.

We shared many social media sharing widget and navigation menu bar widget for fashion websites and entertainment websites and now we are developing codes and creating widgets for professional websites. Installation is pretty easy. You just have to copy the entire code and paste it where you want it to appear. Below is the code and the installation process. This widget is completely customizable. You can edit the background color, Texts and even fonts too and make it according to your own wishes. So let's find out how to install and add this beautiful and professional navigation menu bar widget for blogger.

Installation


Installation is very simple just copy the below code and paste it into the place where you want this widget to appear.


  • Go to blogger dashboard.
  • Go to layout.
  • Click on add a gadget.
  • Choose html/javascript.
  • Copy the below code and paste it.
  • You are done.


<style type="text/css">
#multimenu{
background:#156AA6;
overflow:hidden;
}
#multimenu ul {
float:left;
height:30px;
list-style:none;
overflow:hidden;
margin:0;
padding:0;
}
#multimenu li {
float:left;
text-shadow:1px 1px 2px #0066B3;
padding:0;
}
#multimenu li a {
background:#156AA6;
color:#eee;
display:block;
font-weight:400;
line-height:30px;
border-left:1px solid #4B88B3;
border-right:1px solid #043457;
text-align:center;
text-decoration:none;
margin:0;
padding:0 25px;
}
#multimenu li.depan a {
border-left:none;
}
#multimenu li ul {
background:#156AA6;
height:auto;
border:0;
position:absolute;
width:225px;
z-index:80;
box-shadow:0 1px 5px #034257;
display:none;
margin:0;
padding:0;
}
#multimenu li li {
display:block;
float:none;
width:225px;
border-top:1px solid #4B88B3;
border-bottom:1px solid #043457;
margin:0;
padding:0;
}
#multimenu li:hover li a {
background:#156AA6;
}
#multimenu li ul a {
display:block;
height:30px;
font-size:12px;
font-style:normal;
text-align:left;
margin:0;
padding:0 10px 0 15px;
}
#multimenu li a:hover,#multimenuli:hover > a {
color:#fff;
}
#multimenu li:hover ul.hidden {
display:block;
}
</style>
<nav id='multimenu'>
<ul>
<li class='depan'><a href='/'>Home</a></li>
<li><a href='#'>Widgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Gadgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Blogging Tips</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
</ul>
</nav>
<script type="text/javascript">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$('#multimenu li ul').removeClass('hidden');
$('#multimenu li').hover(function() {
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
}, function() {
$('ul', this).slideUp(600, 'easeInExpo');
});
//]]>
</script>
</script>


Customization

You can edit the entire code of this navigation menu bar widget for blogger. To change the text . See in code words like home, blogging tips, widgets and gadgets. Change it of your own wish and all the words like drop down you can change it with your own words.

More Navigation Menu



Attitude navigation menu bar widget for blogger 

Dashed Rich Navigation menu bar widget for blogger 

Professional Blue Navigation menu bar widget for blogger 

Fashion Style Navigation menu bar widget for blogger 

Cute Yellow Navigation menu bar widget for blogger 

King of Black Navigation Menu Bar Widget for blogger

CSS Gradient navigation menu bar widget for blogger

Title: Hammer Effect Mega Drop Down Menu Bar Widget For Blogger Author: Rohan Mod
Description : Hammer Effect Mega Drop Down Menu Bar Widget For Blogger. It works very well in all browsers and looks very professional and beautiful .
Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS