Latest Updates

Top 4 CSS Style Navigation Menu Bar for Blogger

ad+1



For having an attractive blog design your blog must have a good navigation menu design.Today i am going to share a beautiful CSS Style navigation Menu bar to blogger blogs. This navigation menu is designed using CSS and HTML only .Jquery menu slow down your blog loading time. So today I am sharing pure CSS and HTML drop down menu for your blogger blog.



How To Add CSS Style Menu Bar In Blogger


  • Go to Blogger Dashboard → Layout.
  • Click on Add a Gadget → HTML/JavaScript
  • Now add the following code and change Red links with yours.


CSS Style Menu Bar 1 :


                                                      




<style>
.nbw-menu li{text-align:right;margin-bottom:15px;line-height:30px;list-style:none; }
.nbw-menu li ul{margin-top:15px}
.nbw-menu a{color:white;background:#009AFF;font-weight:normal;font-size:14px;text-decoration:none;padding:7px 12px;-webkit-transition:all .25s linear;-moz-transition:all .25s linear;transition:all .25s linear}
.nbw-menu a:hover{text-decoration:none;color:#FFFFFF;background:#292929}li.widget ul{list-style:circle}<blockquote>
</style>
<ul class='nbw-menu'>
<li class='cat-item'><a href='#'>Adsense</a></li>
<li class='cat-item'><a href='#'>Announcements</a></li>
<li class='cat-item'><a href='#'>Blogger News</a></li>
<li class='cat-item'><a href='#'>Blogger SEO</a></li>
<li class='cat-item'><a href='#'>Blogger Templates</a></li>
<li class='cat-item'><a href='#'>Blogger Widgets</a></li>
<li class='cat-item'><a href='#'>Blogging Tips</a></li>
</ul>



CSS Style Menu Bar 2 :





<style type="text/css">/* #F93 *//* #C60 */#nbw-cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#nbw-cssmenu ul{background:#DFDFDF;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:inset 0 16px 0 0 rgba(292929);-moz-box-shadow:inset 0 16px 0 0 rgba(292929);box-shadow:inset 0 16px 0 0 rgba(292929)}#nbw-cssmenu li{float:left;padding:0 0 0 15px}#nbw-cssmenu li a{color:#000;display:block;font-weight:normal;line-height:50px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#nbw-cssmenu li a:hover{background:#292929;color:#292929;text-decoration:none;-webkit-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);-moz-box-shadow:inset 0 0 7px 2px rgba(0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgba(292929)}#nbw-cssmenu ul li:hover a{background:#292929;color:#FFF;text-decoration:none}#nbw-cssmenu li ul{display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:200px;z-index:200}#nbw-cssmenu li:hover ul{display:block}#nbw-cssmenu li li{display:block;float:none;margin:0;padding:0;width:200px;background:#292929;/*this is where the rounded corners for the dropdown disappears*/}#nbw-cssmenu li:hover li a{background:none}#nbw-cssmenu li ul a{display:block;height:50px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#nbw-cssmenu li ul a:hover,#nbw-cssmenu li ul li:hover a{border:0;color:#292929;text-decoration:none;background:#ffffff;-webkit-box-shadow:inset 0 0 7px 2px rgba(292929);-moz-box-shadow:inset 0 0 7px 2px rgba(292929);box-shadow:inset 0 0 7px 2px rgba(292929)}</style><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://lh5.googleusercontent.com/-q5Pebnc0xHE/U7KMezV_ycI/AAAAAAAAAqE/q6gJBC2z1-4/h120/newbloggerwidget-blank.gif" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://lh5.googleusercontent.com/-q5Pebnc0xHE/U7KMezV_ycI/AAAAAAAAAqE/q6gJBC2z1-4/h120/newbloggerwidget-blank.gif" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://lh5.googleusercontent.com/-q5Pebnc0xHE/U7KMezV_ycI/AAAAAAAAAqE/q6gJBC2z1-4/h120/newbloggerwidget-blank.gif" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->


<!-- customize your menus Links -->

<div id="nbw-cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>



CSS Style Menu Bar 3 :





<style type="text/css">#nbw-cssmenu ul,#nbw-cssmenu li,#nbw-cssmenu span,#nbw-cssmenu a{margin:0;padding:0;position:relative}#nbw-cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #009AFF;width:auto}#nbw-cssmenu:after,#nbw-cssmenu ul:after{content:'';display:block;clear:both}#nbw-cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#nbw-cssmenu ul{list-style:none}#nbw-cssmenu > ul{float:left}#nbw-cssmenu > ul > li{float:left}#nbw-cssmenu > ul > li > a{color:#000;font-size:12px}#nbw-cssmenu > 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 #009AFF;margin-left:-10px}#nbw-cssmenu > 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}#nbw-cssmenu > ul > li.active: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 #009AFF;margin-left:-10px}#nbw-cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#nbw-cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#nbw-cssmenu .has-sub{z-index:1}#nbw-cssmenu .has-sub:hover > ul{display:block}#nbw-cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#nbw-cssmenu .has-sub ul li{*margin-bottom:-1px}#nbw-cssmenu .has-sub ul li a{background:#009AFF;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#nbw-cssmenu .has-sub ul li:hover a{background:#292929}#nbw-cssmenu .has-sub .has-sub:hover > ul{display:block}#nbw-cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#nbw-cssmenu .has-sub .has-sub ul li a{background:#009AFF; -webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}#nbw-cssmenu .has-sub .has-sub ul li a:hover{background:#292929}</style><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://lh5.googleusercontent.com/-q5Pebnc0xHE/U7KMezV_ycI/AAAAAAAAAqE/q6gJBC2z1-4/h120/newbloggerwidget-blank.gif" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://lh5.googleusercontent.com/-q5Pebnc0xHE/U7KMezV_ycI/AAAAAAAAAqE/q6gJBC2z1-4/h120/newbloggerwidget-blank.gif" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://lh5.googleusercontent.com/-q5Pebnc0xHE/U7KMezV_ycI/AAAAAAAAAqE/q6gJBC2z1-4/h120/newbloggerwidget-blank.gif" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->



<!-- newbloggerwidget -menus Links -->

<div id="nbw-cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li class="has-sub"><a href="#"><span>Product 1</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Product 2</span></a>
<ul>
<li><a href="#"><span>Sub Item</span></a></li>
<li class="last"><a href="#"><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>


CSS Style Menu Bar 4 :







<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Open+Sans:600);/* Menu CSS */#newbloggerwidget-cssmenu,#newbloggerwidget-cssmenu > ul{background:url(http://3.bp.blogspot.com/-uVcJVXq-B70/U7Ke6ZiMnMI/AAAAAAAAAq0/3E1Ig-rDUUU/s1600/newbloggerwidget-highlight-bg.png) repeat;padding-bottom:3px;font-family:'Open Sans',sans-serif;font-weight:600}#newbloggerwidget-cssmenu:before,#newbloggerwidget-cssmenu:after,#newbloggerwidget-cssmenu > ul:before,#newbloggerwidget-cssmenu > ul:after{content:'';display:table}#newbloggerwidget-cssmenu:after,#newbloggerwidget-cssmenu > ul:after{clear:both}#newbloggerwidget-cssmenu{width:auto;zoom:1}#newbloggerwidget-cssmenu > ul{background:url(http://4.bp.blogspot.com/-OG-L-v30s5o/U7KfNnvSU3I/AAAAAAAAAq8/gAiPIY-r67I/s1600/newbloggerwidget-menu-bg.png) repeat;margin:0;padding:0;position:relative}#newbloggerwidget-cssmenu > ul li{margin:0;padding:0;list-style:none}#newbloggerwidget-cssmenu > ul > li{float:left;position:relative}#newbloggerwidget-cssmenu > ul > li > a{padding:23px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;text-shadow:0 -1px 0 #0d0d0d;text-shadow:0 -1px 0 rgba(0,0,0,0.7);line-height:18px}#newbloggerwidget-cssmenu > ul > li:hover > a{background:url(http://3.bp.blogspot.com/-uVcJVXq-B70/U7Ke6ZiMnMI/AAAAAAAAAq0/3E1Ig-rDUUU/s1600/newbloggerwidget-highlight-bg.png) repeat;text-shadow:0 -1px 0 #97321f;text-shadow:0 -1px 0 rgba(122,42,26,0.64)}#newbloggerwidget-cssmenu > ul > li > a > span{line-height:18px}#newbloggerwidget-cssmenu > ul > li.active > a,#newbloggerwidget-cssmenu > ul > li > a:active{background:url(http://1.bp.blogspot.com/-HReQDjcV9no/U7KeRk1vNqI/AAAAAAAAAqs/oSGmGMwqwvo/s1600/newbloggerwidget-hover.png) repeat}/* Childs */#newbloggerwidget-cssmenu > ul ul{opacity:0;visibility:hidden;position:absolute;top:120px;background:url(http://4.bp.blogspot.com/-OG-L-v30s5o/U7KfNnvSU3I/AAAAAAAAAq8/gAiPIY-r67I/s1600/newbloggerwidget-menu-bg.png) repeat;margin:0;padding:0;z-index:-1}#newbloggerwidget-cssmenu > ul li:hover ul{opacity:1;visibility:visible;margin:0;color:#000;z-index:2;top:64px;left:0}#newbloggerwidget-cssmenu > ul ul:before{content:'';position:absolute;top:-10px;width:100%;height:20px;background:transparent}#newbloggerwidget-cssmenu > ul ul li{list-style:none;padding:0;margin:0;width:100%}#newbloggerwidget-cssmenu > ul ul li a{padding:18px 26px;display:block;color:white;font-size:13px;text-decoration:none;text-transform:uppercase;width:150px;border-left:4px solid transparent;-webkit-transition:all 0.35s ease-in-out;-moz-transition:all 0.35s ease-in-out;-ms-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out}#newbloggerwidget-cssmenu > ul ul li a:hover{border-left:4px solid #009AFF;background:url(http://1.bp.blogspot.com/-HReQDjcV9no/U7KeRk1vNqI/AAAAAAAAAqs/oSGmGMwqwvo/s1600/newbloggerwidget-hover.png) repeat}#newbloggerwidget-cssmenu > ul ul li a:active{background:url(http://4.bp.blogspot.com/-OG-L-v30s5o/U7KfNnvSU3I/AAAAAAAAAq8/gAiPIY-r67I/s1600/newbloggerwidget-menu-bg.png) repeat}</style><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://lh5.googleusercontent.com/-q5Pebnc0xHE/U7KMezV_ycI/AAAAAAAAAqE/q6gJBC2z1-4/h120/newbloggerwidget-blank.gif" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://lh5.googleusercontent.com/-q5Pebnc0xHE/U7KMezV_ycI/AAAAAAAAAqE/q6gJBC2z1-4/h120/newbloggerwidget-blank.gif" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://newbloggerwidget.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://lh5.googleusercontent.com/-q5Pebnc0xHE/U7KMezV_ycI/AAAAAAAAAqE/q6gJBC2z1-4/h120/newbloggerwidget-blank.gif" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->



<!--  newbloggerwidget -menus Links -->

<div id="newbloggerwidget-cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Blogger</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Template</span></a></li>
<li class="last"><a href="#"><span>seo</span></a></li>
<li class="last"><a href="#"><span>blogger</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>




4 comments: Leave Your Comments

  1. Hello Sir, I have been using your menu, the menu appears. Its effectis not visible,how to add manu in the google blog,please show full the entire process.

    ReplyDelete
  2. Helpful as always. Every post you write produce a massive value to your readers that is the only reason it is so popular and has great authority.School website design uk

    ReplyDelete
  3. Very interesting information, I really like it because it can add insight for me more broadly, thank you very much for this extraordinary information

    ReplyDelete