TutorialWebForBlogger

TW4B It's about a blog that talking about blogging widgets, blogger template tutorials, search engine optimization SEO and other useful blogging tips

Navigation is very important for website appearance. By navigation, visitors of website could know exactly what they're looking for. Eve...

Free Premium Opera Style Drop Down Menu Navigation for Blogger

Navigation is very important for website appearance. By navigation, visitors of website could know exactly what they're looking for. Every website has it's own navigation style and for this time, I'll share you the beautiful premium drop down menu navigation for free. This navigation is amazing could make your website looks very nice.

Like this below :

operadropdownmenu




If you want to implement this navigation, you may follow the tutorials. Follow the tutorials for each step precisely as given below :

1. For the HTML Code is :

<div id='Navigation'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='OthNav '><a href='#'><span>Product</span></a>
<ul>
<li class='OthNav'><a href='#'><span>Product A</span></a>
<ul>
<li><a href='#'><span>Product A. 1</span></a></li>
<li><a href='#'><span>Product A. 2</span></a></li>
</ul>
</li>
<li class='OthNav'><a href='#'><span>Product B</span></a>
<ul>
<li><a href='#'><span>Product B. 1</span></a></li>
<li><a href='#'><span>Product B. 2</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

2. For the CSS style below :

#navigation ul, #navigation li, #navigation span, #navigation a { margin: 0; padding: 0; position: relative;
}
#navigation { height: 49px; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; background: #141414; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0); border-bottom: 2px solid #e00f16;
}
#navigation:after, #navigation ul:after { content: ''; display: block; clear: both;
}
#navigation a { background: #141414; background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); background: -o-linear-gradient(top, #32323a 0%, #141414 100%); background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); background: linear-gradient(to bottom, #32323a 0%, #141414 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0); color: #ffffff; display: inline-block; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 49px; padding: 0 20px; text-decoration: none;
}
#navigation ul { list-style: none;
}
#navigation > ul { float: left;
}
#navigation > ul > li { float: left;
}
#navigation > ul > li:hover:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #e00f16; margin-left: -10px;
}
#navigation > ul > li:first-child a { border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0;
}
#navigation > ul > li:last-child a { border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0;
}
#navigation > ul > li.active a { box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000; background: #070707; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#navigation > ul > li:hover > a { background: #070707; background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); background: -o-linear-gradient(top, #26262c 0%, #070707 100%); background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); background: linear-gradient(to bottom, #26262c 0%, #070707 100%); filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0); box-shadow: inset 0 0 3px #000000; -moz-box-shadow: inset 0 0 3px #000000; -webkit-box-shadow: inset 0 0 3px #000000;
}
#navigation .OthNav { z-index: 1;
}
#navigation .OthNav:hover > ul { display: block;
}
#navigation .OthNav ul { display: none; position: absolute; width: 200px; top: 100%; left: 0;
}
#navigation .OthNav ul li { *margin-bottom: -1px;
}
#navigation .OthNav ul li a { background: #e00f16; border-bottom: 1px dotted #ec6f73; filter: none; font-size: 11px; display: block; line-height: 120%; padding: 10px;
}
#navigation .Othnav ul li:hover a { background: #b00c11;
}
#navigation .OthNav .OthNav:hover > ul { display: block;
}
#navigation .OthNav .OthNav ul { display: none; position: absolute; left: 100%; top: 0;
}
#navigation .OthNav .OthNav ul li a { background: #b00c11; border-bottom: 1px dotted #d06d70;
}
#navigation .OthNav .OthNav ul li a:hover { background: #80090d;
}

Place the css code above before this code ]]></b:skin> in your template.



There are no comments yet for 'Free Premium Opera Style Drop Down Menu Navigation for Blogger'