How To Add Awesome Dark Style CSS3 Navigation Menu Bar For Blogger
1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>
/* The CSS3 Code for the menu starts here bloggersstand.blogspot.com */6. Go to blogger and click Layout
#bloggersstand_navs {
background:#2c2c2c;
margin:0 auto;
height:50px;
border-bottom:5px solid #cd2122;
}
#bloggersstand_navs .menu-alert{
float:left;
padding:18px 0 0 10px ;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#bloggersstand_navs ul li {
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size:16px;
position: relative;
display: inline-block;
float: left;
border:1px solid #222222;
border-width:0 0 0 1px;
height:50px;
}
#bloggersstand_navs ul li:first-child,
#bloggersstand_navs ul li:first-child a{border:0 none;}
#bloggersstand_navs ul li:last-child a{border-right:0 none;}
#bloggersstand_navs ul li a {
display: inline-block;
height: 50px;
line-height: 50px;
color: #ddd;
padding:0 14px;
text-shadow:0 1px 1px #000;
border-left:1px solid #383838;
}
#bloggersstand_navs ul li a .sub-indicator{}
#bloggersstand_navs ul li a:hover {}
#bloggersstand_navs ul ul{
display: none;
padding:0;
position: absolute;
top: 50px;
width: 180px;
z-index: 99999;
float: left;
background: #2d2d2d !important;
-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
#bloggersstand_navs ul ul li, #bloggersstand_navs ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border:0 none;
border-bottom: 1px solid #222;
border-top: 1px solid #383838;
font-size:13px;
height:auto;
margin:0;
}
#bloggersstand_navs ul ul li:first-child ,#bloggersstand_navs ul li.current-menu-item ul li:first-child,
#bloggersstand_navs ul li.current-menu-parent ul li:first-child,#bloggersstand_navs ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#bloggersstand_navs ul ul ul ,#bloggersstand_navs ul li.current-menu-item ul ul, #bloggersstand_navs ul li.current-menu-parent ul ul, #bloggersstand_navs ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
#bloggersstand_navs ul.sub-menu a ,
#bloggersstand_navs ul ul li.current-menu-item a,
#bloggersstand_navs ul ul li.current-menu-parent a,
#bloggersstand_navs ul ul li.current-page-ancestor a{
border:0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-right: 0 !important;
z-index: 99999;
color: #ccc !important;
text-shadow:0 1px 1px #000 !important;
}
#bloggersstand_navs ul li.current-menu-item ul a,
#bloggersstand_navs ul li.current-menu-parent ul a,
#bloggersstand_navs ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#bloggersstand_navs ul li:hover > a, #bloggersstand_navs ul :hover > a { color: #FFF ;}
#bloggersstand_navs ul ul li:hover > a,
#bloggersstand_navs ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}
#bloggersstand_navs ul li:hover > ul {display: block;}
#bloggersstand_navs ul li.current-menu-item,
#bloggersstand_navs ul li.current-menu-parent,
#bloggersstand_navs ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-left:0 none !important;
}
#bloggersstand_navs ul li.current-menu-item ul.sub-menu a, #bloggersstand_navs ul li.current-menu-item ul.sub-menu a:hover,
#bloggersstand_navs ul li.current-menu-parent ul.sub-menu a, #bloggersstand_navs ul li.current-menu-parent ul.sub-menu a:hover
#bloggersstand_navs ul li.current-page-ancestor ul.sub-menu a, #bloggersstand_navs ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#bloggersstand_navs ul li.current-menu-item a, #bloggersstand_navs ul li.current-menu-item a:hover,
#bloggersstand_navs ul li.current-menu-parent a, #bloggersstand_navs ul li.current-menu-parent a:hover,
#bloggersstand_navs ul li.current-page-ancestor a, #bloggersstand_navs ul li.current-page-ancestor a:hover{
background:#cd2122;
text-shadow:0 1px 1px #b43300;
color:#FFF;
height:50px;
line-height:50px;
border-left:0 none !important;
}
#bloggersstand_navs ul.sub-menu li.current-menu-item,#bloggersstand_navs ul.sub-menu li.current-menu-item a,
#bloggersstand_navs li.current-menu-item ul.sub-menu a,#bloggersstand_navs ul.sub-menu li.current-menu-parent,
#bloggersstand_navs ul.sub-menu li.current-menu-parent a,#bloggersstand_navs li.current-menu-parent ul.sub-menu a,
#bloggersstand_navs ul.sub-menu li.current-page-ancestor,#bloggersstand_navs ul.sub-menu li.current-page-ancestor a,
#bloggersstand_navs li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#bloggersstand_navs ul li.menu-item-home ul li a,
#bloggersstand_navs ul ul li.menu-item-home a,
#bloggersstand_navs ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.
<nav id='bloggersstand_navs'>*Change All # With Your Links.
<div class='container'>
<div class='main-menu'><ul class='menu' id='menu-main'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Modes</a>
<ul class='sub-menu'>
<li><a href='#'>Post With Featured Image</a></li>
<li><a href='#'>Post With Slider</a></li>
<li><a href='#'>Post with SoundCloud</a></li>
<li><a href='#'>Post With Video</a></li>
</ul>
</li>
<li><a href='#'>Downloads</a>
<ul class='sub-menu'>
<li><a href='#'>Text and Lists</a></li>
<li><a href='#'>Video and Audio</a></li>
<li><a href='#'>Social</a></li>
<li><a href='#'>Tabs & Toggles & Author</a></li>
</ul>
</li>
<li><a href='#'>Templates</a>
<ul class='sub-menu'>
<li><a href='#'>Authors</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Tags</a></li>
<li><a href='#'>Timeline</a></li>
</ul>
</li>
<li><a href='#'>Categories</a>
<ul class='sub-menu'>
<li><a href='#'>World</a></li>
<li><a href='#'>Technology</a></li>
<li><a href='#'>Sports</a></li>
</ul>
</li>
<li><a href='#'>Layout</a>
<ul class='sub-menu'>
<li><a href='#'>Full Width</a></li>
<li><a href='#'>Right Sidebar</a></li>
<li><a href='#'>Left SIdebar</a></li>
</ul>
</li>
<li><a href='#'>Reviews</a>
<ul class='sub-menu'>
<li><a href='#'>Stars</a></li>
<li><a href='#'>Points</a></li>
<li><a href='#'>Percent</a></li>
<li><a href='#'>in The Top</a></li>
</ul>
</li>
</ul></div>
</div>
</nav>
9. Now save your HTML/Javascript'. Done!
If you have any query regarding Attractive Dark Style CSS3 Navigation Menu Bar for blogger/blogspot.it give amazing look to your website or blog.Feel free to ask,just drop your comment below.
SUMMARY
Add Awesome Dark Style CSS3 Navigation Menu Bar for blogger blogspot,how to add css3 html navigaion menu bar to blogger website,attractive menu widget
KEEP ON READING...
We hope this article helped you to learn Add Awesome Dark Style CSS3 Navigation Menu Bar. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+
Post a Comment Blogger Disqus
0 Comments on "Add Awesome Dark Style CSS3 Navigation Menu Bar" So Far - Post Yours!
MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>
Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand