Top Ad unit 728 × 90

 

3d Navigation Menu
This navigation menu has a 3D effect when you hover your mouse cursor over the menu a submenu appears like a book and it looks like it is flying that is the reason we have given it a name as a 3D flying menu. This navigation menu is created in pure html and css and we have not used any javascript to give it 3D effect.

It is a professional navigation menu with blue color and may be you have not seen such beautiful and attractive navigation menu ever. I have given the demo of the menu where you can see how beautiful and professional it is looking. I am also going to replace my navigation menu with this navigation menu.

Few qualities of this Navigation Menu

  • Fast in loading.
  • Based on html and css.
  • No Javascript.
  • Very impressive and attractive.

Multi submenu

This 3D Navigation menu has multi submenu. When you hover your mouse over the menu it displays 3 boxes of submenu not the single one. And you have the freedom to edit more in this. You will have complete control over this 3D navigation menu. You can customize the colors, Menu and content in this navigation menu.

We will give you both the code. First complete code and ready to use and the second is separately html and css code. You can install this widget in two ways. First is copy the code and paste in the widget and you are done and second is editing your template. In both the cases it will work. So the choice is yours that through which way you want to add this navigation menu bar widget to blogger.

See Live Demo


How to add a 3D navigation menu widget to blogger

  • Login to blogger.
  • Go to layout.
  • Click to add a gadget.
  • Choose HTML/Javascript.
  • Copy the below code.
  • Paste it and you are done.
<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>

Post a Comment

 
Top