3 Jenis Navigation Menu Bar Widget Untuk Blogger

banyak jenis navigasi menu bar widget untuk blogger dan kali ini kami menggabungkan semua dengan satu posting sehingga Anda bisa mendapatkan semua dalam satu dan tidak perlu membuang waktu Anda dalam mencari menu navigasi pada situs yang berbeda.silahkan di Pastekan di blog sobat.

Download Full Code

DOWNLOAD CODE

<style type="text/css">
/* A simple, css only, (some-what) responsive menu */
/* tiny reset */
* { padding: 0; margin: 0; }
body {
background: #ccc;
font-family: oswald, arial, serif;
font-size: 13px;
text-transform: uppercase;
text-align: center;
}
.bigbox {
display: inline-block;
-webkit-box-shadow: 0 0 70px #fff;
-moz-box-shadow: 0 0 70px #fff;
box-shadow: 0 0 70px #fff;
margin-top: 40px;
}
/* a little "umph" */
.avdore {
background: #6EAF8D;
background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: linear-gradient(left, white 50%, #6EAF8D 50%);
background-size: 50px 25%;;
padding: 2px;
display: block;
}
a {
text-avdoreation: none;
color: #fff;
display: block;
}
ul {
list-style: none;
position: relative;
text-align: left;
}
li {
float: left;
}
/* clear'n floats */
ul:after {
clear: both;
}
ul:before,
ul:after {
content: " ";
display: table;
}
nav {
position: relative;
background: #2B2B2B;
background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
text-align: center;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #000;
-webkit-box-shadow: 2px 2px 3px #888;
-moz-box-shadow: 2px 2px 3px #888;
box-shadow: 2px 2px 3px #888;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
/* prime */
ul.firstbaba li a {
display: block;
padding: 20px 30px;
border-right: 1px solid #3D3D3D;
}
ul.firstbaba li:last-child a {
border-right: none;
}
ul.firstbaba li a:hover {

color: #000;
}
/* secondbabas */
ul.secondbaba {
position: absolute;
z-index: 200;
box-shadow: 2px 2px 0 #BEBEBE;
width: 35%;
display:none;
}
ul.secondbaba li {
float: none;
margin: 0;
}
ul.secondbaba li a {
border-bottom: 1px dotted #ccc;
border-right: none;
color: #000;
padding: 15px 30px;
}
ul.secondbaba li:last-child a {
border-bottom: none;
}
ul.secondbaba li a:hover {
color: #000;
background: #eeeeee;
}
/* secondbaba display*/
ul.firstbaba li:hover ul {
display: block;
background: #fff;
}
/* keeps the tab background white */
ul.firstbaba li:hover a {
background: #fff;
color: #666;
text-shadow: none;
}
ul.firstbaba li:hover > a{
color: #000;
}
@media only screen and (max-width: 600px) {
.avdore {
padding: 3px;
}
.bigbox {
width: 100%;
margin-top: 0px;
}
li {
float: none;
}
ul.firstbaba li:hover a {
background: none;
color: #8B8B8B;
text-shadow: 1px 1px #000;
}
ul.firstbaba li:hover ul {
display: block;
background: #272727;
color: #fff;
}
ul.secondbaba {
display: block;
position: static;
box-shadow: none;
width: 100%;
}
ul.secondbaba li a {
background: #485f6f;
border: none;
color: #8B8B8B;
}
ul.secondbaba li a:hover {
color: #ccc;
background: none;
}
}
</style>
<div class="bigbox">
<span class="avdore"></span>
<nav>
<ul class="firstbaba">
<li>
<a href="">Blogger</a>
<ul class="secondbaba">
<li><a href="">History</a></li>
<li><a href="">widget</a></li>
<li><a href="">SEO</a></li>
<li><a href="">Tips</a></li>
</ul>
</li>
<li>
<a href="">Wordpress</a>
<ul class="secondbaba">
<li><a href="">widget</a></li>
<li><a href="">seo</a></li>
<li><a href="">template</a></li>
</ul>
</li>
<li>
<a href="">SEO</a>
<ul class="secondbaba">
<li><a href="">Tips</a></li>
<li><a href="">Tools</a></li>
<li><a href="">Websites</a></li>
</ul>
</li>
<li>
<a href="">About Me</a>
<ul class="secondbaba">
<li><a href="">My Life</a></li>
<li><a href="">History</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</li>
</ul>
</nav>
</div>