Ini Gan Saya Kasih beberapa Menu Bar Drop Down Tanpa Edit Html keren untuk blog agan..
Cara pemasangannya sangat gampang
agan tinggal masuk ke...
Pilih menu Bar yang agan suka.
1. Black Navigation Menu Bar ( Demo )
2. Animated call to action navigation menu bar ( Demo )
3. Mega Drop Down Menu Bar ( Demo )
4. 3D Flying Book Navigation Menu Bar ( Demo )
5. Blue White ( Demo )
Menu Bar Drop Down
Menu Bar Drop Down Tanpa Edit HTML
Cukup Sekian Dan Terimakasih Semoga Bermanfaat
Cara pemasangannya sangat gampang
agan tinggal masuk ke...
- layout.
- Click on add a gadget.
- Pilih html / javascript.
- Copy kode menubarnya di bawah ini.
- Dan paste kode ke dalam html / javascript / gadget.
Pilih menu Bar yang agan suka.
1. Black Navigation Menu Bar ( Demo )
<style type
="text/css">
/* this code is by www.avdhootblogger.com Main */
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background:
-webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').show();
}).mouseout(function(){
$(this).children('ul').hide();
})
}
});
</script>
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
="text/css">
/* this code is by www.avdhootblogger.com Main */
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background:
-webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').show();
}).mouseout(function(){
$(this).children('ul').hide();
})
}
});
</script>
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
2. Animated call to action navigation menu bar ( Demo )
<style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#avd-nav li a span.myname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;} border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>
<div id="avd-nav">
<li> <a href="#"><span class="myname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrP-jxqe3w077zwtFAjNJYLZ5Q-cq0D9k7JeV2yiTPqbw10tlN6dvohejOYOgrReRvwl0NPOa0Hky8ev41sfZMH6BOQZ5_mlybsmehxTzaknvhyphenhyphen4TI2chPkl60qI-4PpvT4XOxER9ANZ0/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">About</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrP-jxqe3w077zwtFAjNJYLZ5Q-cq0D9k7JeV2yiTPqbw10tlN6dvohejOYOgrReRvwl0NPOa0Hky8ev41sfZMH6BOQZ5_mlybsmehxTzaknvhyphenhyphen4TI2chPkl60qI-4PpvT4XOxER9ANZ0/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname"> Author</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrP-jxqe3w077zwtFAjNJYLZ5Q-cq0D9k7JeV2yiTPqbw10tlN6dvohejOYOgrReRvwl0NPOa0Hky8ev41sfZMH6BOQZ5_mlybsmehxTzaknvhyphenhyphen4TI2chPkl60qI-4PpvT4XOxER9ANZ0/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrP-jxqe3w077zwtFAjNJYLZ5Q-cq0D9k7JeV2yiTPqbw10tlN6dvohejOYOgrReRvwl0NPOa0Hky8ev41sfZMH6BOQZ5_mlybsmehxTzaknvhyphenhyphen4TI2chPkl60qI-4PpvT4XOxER9ANZ0/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div>
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#avd-nav li a span.myname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;} border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>
<div id="avd-nav">
<li> <a href="#"><span class="myname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrP-jxqe3w077zwtFAjNJYLZ5Q-cq0D9k7JeV2yiTPqbw10tlN6dvohejOYOgrReRvwl0NPOa0Hky8ev41sfZMH6BOQZ5_mlybsmehxTzaknvhyphenhyphen4TI2chPkl60qI-4PpvT4XOxER9ANZ0/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">About</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrP-jxqe3w077zwtFAjNJYLZ5Q-cq0D9k7JeV2yiTPqbw10tlN6dvohejOYOgrReRvwl0NPOa0Hky8ev41sfZMH6BOQZ5_mlybsmehxTzaknvhyphenhyphen4TI2chPkl60qI-4PpvT4XOxER9ANZ0/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname"> Author</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrP-jxqe3w077zwtFAjNJYLZ5Q-cq0D9k7JeV2yiTPqbw10tlN6dvohejOYOgrReRvwl0NPOa0Hky8ev41sfZMH6BOQZ5_mlybsmehxTzaknvhyphenhyphen4TI2chPkl60qI-4PpvT4XOxER9ANZ0/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrP-jxqe3w077zwtFAjNJYLZ5Q-cq0D9k7JeV2yiTPqbw10tlN6dvohejOYOgrReRvwl0NPOa0Hky8ev41sfZMH6BOQZ5_mlybsmehxTzaknvhyphenhyphen4TI2chPkl60qI-4PpvT4XOxER9ANZ0/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div>
3. Mega Drop Down Menu Bar ( Demo )
<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>
#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>
4. 3D Flying Book Navigation Menu Bar ( Demo )
<style type="text/css">
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="#url"><b>Blogger</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">blogger widget</a></li>
<li><a href="#url">blogger design</a></li>
<li><a href="#url">blogger tips</a></li>
<li><a href="#url">blogger seo</a></li>
<li><a href="#url">blogger templates</a></li>
</ul>
<ul class="col">
<li><a href="#url">Related post</a></li>
<li><a href="#url">Popular post</a></li>
<li><a href="#url">Recent Post</a></li>
<li><a href="#url">Chat widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">navigation menu</a></li>
<li><a href="#url">Side menu</a></li>
<li><a href="#url">Horizontal menu</a></li>
<li><a href="#url">Vertical menu</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Website SEO </b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Header</a></li>
<li><a href="#url">Footer</a></li>
<li><a href="#url">Post</a></li>
<li><a href="#url">Links</a></li>
<li><a href="#url">Menu</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Mobile </a></li>
<li><a href="#url">Mobile traffic</a></li>
<li><a href="#url">Mobile seo</a></li>
<li><a href="#url">small screen</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email ID</a></li>
<li><a href="#url">Mobile No.</a></li>
<li><a href="#url">Contact Form</a></li>
<li><a href="#url">My email</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>Benefits</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Google traffic</a></li>
<li><a href="#url">Permanent Links</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">High page rank</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="#url"><b>Blogger</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">blogger widget</a></li>
<li><a href="#url">blogger design</a></li>
<li><a href="#url">blogger tips</a></li>
<li><a href="#url">blogger seo</a></li>
<li><a href="#url">blogger templates</a></li>
</ul>
<ul class="col">
<li><a href="#url">Related post</a></li>
<li><a href="#url">Popular post</a></li>
<li><a href="#url">Recent Post</a></li>
<li><a href="#url">Chat widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">navigation menu</a></li>
<li><a href="#url">Side menu</a></li>
<li><a href="#url">Horizontal menu</a></li>
<li><a href="#url">Vertical menu</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Website SEO </b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Header</a></li>
<li><a href="#url">Footer</a></li>
<li><a href="#url">Post</a></li>
<li><a href="#url">Links</a></li>
<li><a href="#url">Menu</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Mobile </a></li>
<li><a href="#url">Mobile traffic</a></li>
<li><a href="#url">Mobile seo</a></li>
<li><a href="#url">small screen</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email ID</a></li>
<li><a href="#url">Mobile No.</a></li>
<li><a href="#url">Contact Form</a></li>
<li><a href="#url">My email</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>Benefits</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Google traffic</a></li>
<li><a href="#url">Permanent Links</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">High page rank</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->
5. Blue White ( Demo )
<style type="text/css">
#menu9 ul {
list-style:none;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
}
#menu9 ul li{
float:left;
}
#menu9 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#00adef;
width:170px;
text-align:center;
}
#menu9 ul li a span{
display:block;
}
#menu9 ul li a span.title{
color:#fff;
border-bottom:2px solid #fff;
padding-bottom:5px;
}
#menu9 ul li a:hover{
}
#menu9 ul li a:hover span.title{
color:#074a64;
border-bottom:2px solid #0b6f95;
}
#menu9 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#074a64;
visibility:hidden;
}
#menu9 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible;
}
</style>
<h2>Menu 9</h2>
<div id="menu9">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
#menu9 ul {
list-style:none;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
}
#menu9 ul li{
float:left;
}
#menu9 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#00adef;
width:170px;
text-align:center;
}
#menu9 ul li a span{
display:block;
}
#menu9 ul li a span.title{
color:#fff;
border-bottom:2px solid #fff;
padding-bottom:5px;
}
#menu9 ul li a:hover{
}
#menu9 ul li a:hover span.title{
color:#074a64;
border-bottom:2px solid #0b6f95;
}
#menu9 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#074a64;
visibility:hidden;
}
#menu9 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible;
}
</style>
<h2>Menu 9</h2>
<div id="menu9">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
Menu Bar Drop Down
Menu Bar Drop Down Tanpa Edit HTML
Cukup Sekian Dan Terimakasih Semoga Bermanfaat
40 Comments
terimakasih banyak sob, mantab banget
BalasWokeh gan, sama2.
Balasmakasih banyak mass buat infonya,, nice post
Balashttp://toko661.com/pengobatan-tradisional-abses-anus/
Bagus banget nih buat blog, langsung ane coba gan.
Balaskren bro makasi bro
Balasko cuma setengah ya gan di blog saya
BalasInfonya bermanfaat brader..tp di blog sy menu drop downnya gk bisa muncul, bagi tipsnya donk :)
Balasaku udah mencoba, wah hasil ...... tidak jadi seperti yang aku lihat di demo
Balasterimakasih infonya sob
Balasterimakasih banyak broh, bermanfaat dan membantu artikelnya
Balascara masukin urlnya gmana gan?
BalasGanti aja tanda (#url) pagarnya pake url agan.
Balashref="#url">Related post
contoh
href="http://teja7x.blogspot.com/2014/06/membuat-menu-bar-drop-down-tanpa-edit.html">Related post
makasih banyak buat infonya gan,, tutor nya sangat bermanfaar
Balashttp://goo.gl/E8cClh
punya ku sub menu nya gak jalan gan, gimana ne??????????????
Balasklo mau nambahin sub menu dari sub menunya gimn gan?
BalasGa jalan gimana, Saya Dah cek work semua ko.
Balaskok ga bis ya, mohon penjelasannya Gan
Balastrimakasih gan ijin sedott
BalasGan kalo ane lagi review kedua google adsense. Rubah-rubah tampilan template ngaruh gak. Kebetulan ane tertarik nich mau coba. Bisa d cek dulu biar kasih ane saran http://www.siagus.tk
BalasMantappp kerenn abis brooo (y) , makasih banyak yah tutorial nya ,manfaat sekalee....
Balasijin serotttt,
cara nambahin sub menunya gimana gan??
Balasko di ane gk muncul sub menunya?? mohon pencerahannya gan
Balasane pilih yang mega dropdown
Balasane pilih yang mega dropdown
Balasterima kasih mas... dah saya coba n saya modif. berahasil di pasang.
Balasjangan lupa kunjungan balingnya terima kasih.
http://rastacentraldisc.blogspot.co.id
wokee
Balashttp://ajibayustore.blogspot.co.id/
wokee
Balashttp://ajibayustore.blogspot.co.id/
thx ilmu nya
BalasKunjungi http://marshalllatembo.blogspot.co.id/
isi nya lagu" daerah Terima kasih
sy sdh copy paste tapi tdk keluar menu drop nya. kenapa ya
Balassipp brooh ]...lanjutkan tutornya :)
Balaskok gak keluar menu dropnya bang...
Balassaya coba yang
Balas3D Flying Book Navigation Menu Bar
menu drop-down nya kog terpotong ya gan?
padahal banyak yang comment bahwa drop downnya gak keluar, tapi kok gak ada yang ngerespon ya? Apa perlu tamplate khusus biar bisa keluar dropdownnya?
Balasmenu yg mana yg ga keluar?
BalasKlu saya menu dropdown muncul sprti di gambar tp tayangan foto slide mlhn berhenti tolong pncerahannya.
BalasSy pkai yg dropdown pertama
Balasini sub menunya kok enggak bisa muncul, bagaimana solusinya gan
Balasini sub menunya kok enggak bisa muncul, bagaimana solusinya gan
BalasTerimakasih infonya, saya memang sedang mencari code buat menu yang simple tapi elegant.
Balasdone...trims
Balas