Splendid CSS Drop Down Navigation Menu With Logos ~ All Movies Games Blogger Widgets & FaceBook Hacking

SOCIALIZE IT →

As we all know that a cool and fanc design of blog can attract many visitors and design can also convert a visitor to a loyal readers. There are many themes available for Bloggers for from my point of view that Blogger templates are not perfect as Word Press themes are and the main ting which is bad in almost all Blogger templates is the navigation menu.

Today I have a Splendid CSS Drop Down Navigation Menu With logos for you. As navigation menu plays a vital role in improving SEO and also helps to flow the juice of Page rank to all linked pages.
This cool navigation menus helps to decrease bounce rate as it attracts the visitors with its cool features like It displays Name as well as Logos of the labels.

Splendid CSS Drop Down Navigation Menu With Logos

1. Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/Javascript

2.Paste the below code in the HTML/Javascript

<div class="header-container">

<nav id="navigation" class="container">
<ul>
<li class="subnav main on">
<a href="http://www.bloggiks.com/">
<span class="top">Howto &</span>
Tips
</a>
<ul class="headermenu2column">
<li class="sprite windows">
<a href="Link 1">Windows</a>
</li>
<li class="menu-text">
<a href="Link 2">News</a>
</li>
<li class="sprite mac">
<a href="Link 3">Mac</a>
</li>

<li class="sprite linux">
<a href="Link 5">Linux</a>
</li>

<li class="sprite ios">
<a href="Link 6">iOS</a>
</li>

<li class="sprite android">
<a href="Link 7">Android</a>
</li>

</ul>
</li>
<li class="subnav bestof">
<a href="Category Title Link">
<span class="top">Best Of</span>
APPS
</a>
<ul>
<li class="">
<a href="Link 8">Best Websites</a>
</li>

</ul>
</li>
<li class="subnav answers">
<a href="Link 9">
<span class="top">Ask Tech</span>
Help
</a>
<ul>
<li class="">
<a href="Link 10">Windows Tips</a>
</li>

</ul>
</li>
<li class="subnav guides">
<a href="Link 11">
<span class="top">Cheats &</span>
Guides
</a>
<ul>
<li>
<a href="Link 12">MakeUseOf Guides</a>
</li>
<li class="last">
<a href="Link13">MakeUseOf Cheat Sheets</a>
</li>
</ul>
</li>
<li class="subnav dir">
<a href="Link 14">
<span class="top">Websites</span>
Index
</a>
</li>
<li class="subnav gf">
<a href="Link 15">
<span class="top">Geeky</span>
Fun
</a>
<ul>
<li>
<a href="Link 16">Funny Pictures</a>
</li>
<li>
<a href="Link 17">Funny Videos</a>
</li>
<li class="last">
<a href="Link18">Most Commented</a>
</li>
</ul>
</li>
</ul>
</nav>

</div>

<style>

#navigation {

    height: 52px;

    width: 960px;

}

#navigation li {

    float: left;

    height: 47px;

}

#navigation ul li a {

    border-right: 1px solid #FFFFFF;

    color: #FFFFFF;

    cursor: pointer;

    display: block;

    font-family: "Arial Black",Arial;

    font-size: 16px;

    font-weight: 900;

    height: 39px;

    padding: 4px 15px;

    text-decoration: none;

    text-transform: uppercase;

}

#navigation .last a {

    border-right: 0 none;

}

#navigation a span {

    display: block;

    font-family: Arial;

    font-size: 13px;

    font-weight: bold;

}

#navigation li ul {

    background: none repeat scroll 0 0 #FFFFFF;

    border-top: 6px solid #C70909;

    box-shadow: 0 5px 5px #CCCCCC;

    position: absolute;

    visibility: hidden;

}

#navigation li.subnav:hover, #navigation li.subnav.hover, #navigation li.subnav li:hover, #navigation li.subnav li.hover {

    background-color: #C70909;

}

#navigation li:hover, #navigation li.hover, #navigation li.on {

    border-bottom: 5px solid #C70909;

    cursor: pointer;

    position: relative;

}

#navigation li:hover ul, #navigation li.hover ul {

    visibility: visible;

    z-index: 99;

}

#navigation li ul li, #navigation li ul li a {

    border-right: 0 none;

    color: #000000;

    float: none;

    font-family: "Arial Black",Arial;

    font-size: 12px;

    font-weight: 900;

    height: auto;

    padding: 0;

    white-space: nowrap;

}

#navigation li ul li:hover, #navigation li ul li.hover, #navigation li ul li a:hover {

}

#navigation li ul li.last {

    border-bottom: 6px solid #C70909;

    padding-bottom: 9px;

}

#navigation li ul li.last, #navigation li ul li.no-bg {

    background-image: none;

}

#navigation li ul li, #navigation li ul li:hover {

    border-bottom: 1px dotted gray;

    padding-left: 18px;

    padding-right: 16px;

}

#navigation li ul li a {

    padding: 8px 20px 8px 25px;

}

#navigation li ul li a {

    background-position: left top;

}

#navigation li ul li:hover {

    background-color: #C70909;

    color: white;

}

#navigation li ul li:hover a {

    color: white;

}

#navigation li.subnav li.sprite {

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikZowqgWLZJxBSZb8MpLc1T1IVmOpOuvpHy23Bd2q3TYgZksv0ZPhzX1t-XgcDI0pJJq5jMzaV7PuCEkRgELsHkUz-1CnHvJuitY-MYMGTPPr4GYXCfi4y0v4L0acpF2uRgkm1grDl-Qw/s1600/menu-sprites.png") no-repeat scroll left top transparent !important;

}

#navigation li.subnav li.sprite:hover {

    background-color: #C70909 !important;

}

#navigation li.subnav li.sprite.windows {

    background-position: 0 0 !important;

}

#navigation li.subnav li.sprite.mac {

    background-position: 0 -40px !important;

}

#navigation li.subnav li.sprite.linux {

    background-position: 0 -80px !important;

}

#navigation li.subnav li.sprite.ios {

    background-position: 0 -120px !important;

}

#navigation li.subnav li.sprite.android {

    background-position: 0 -160px !important;

}

.container {

    margin: 0 auto;

    width: 960px;

}

.header-container {

    background: none repeat scroll 0 0 #000000;

}

ol, ul {

    list-style: none outside none;

}

</style>

3. Now replace all Highlighted Text in the code as you wish ad click on save.

Last Words

Hope you guys like it do share your views with us and if you need any assistance then let us know. If you have any questions in mind then please let us know and also share your views about this widget with us. Stay tuned as we are going to release some cool widgets in the future. Subscribe to get free daily updates.

SOCIALIZE and Widget By Hamza_Gujjar

SOCIALIZE IT →

Saturday, 7 December 2013