Breaking News
Loading...

A Very Simple CSS3 Dropdown Menu for Bloggers

Monday, December 23, 2013
 

this is very simple CSS3 coded Deopdown navigation menu. It will work fine and match with all kinds of blogger template. The whole code base on CSS so it load fast. And very simple attractive hover effect on its submenu also. Hope this menu  you would like. And it is very easy to add into your blog. You would see that a shadow affect has added bottom of the menu which has added extra feature on it.


Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Go to your Layout tab.
Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.
Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.
Step 5 Place gadget below header. that's it.

<style>
/* The CSS Code for the menu starts here uncoverred.blogspot.com */
 #uncoverredSimpleMenu {
 width:800px;
 background:#005C91;
 border-bottom: 5px solid #1A1A1A;
 border-top: 1px solid #1A1A1A;
 clear: both;
 overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
 }
 #uncoverredSimpleMenu ul {
 float: left;
 width: 100%;
 }
 #uncoverredSimpleMenu li {
 float: left;
 list-style-type: none;
 }
 #uncoverredSimpleMenu li a {
 background:#005C91;
 color: #fff;
 display: block;
 font-size: 14px;
 padding: 5px 17px 5px 15px;
 position: relative;
 text-decoration: none;
 }
 #uncoverredSimpleMenu li a:hover {
 background:#000000;
 color: #fff;
 }
 #uncoverredSimpleMenu li li a {
 background: none;
 background-color: #111111;
 border: 1px solid #1A1A1A;
 border-top-width: 0;
 color: #fff;
 font-size: 14px;
 padding: 5px 10px;
 position: relative;
 text-transform: none;
 width: 130px;
 }
 #uncoverredSimpleMenu li li a:hover {
 background: none;
 background-color: #005C91;
 }
 #uncoverredSimpleMenu li ul {
 height: auto;
 left: -9999px;
 margin: 0 0 0 -1px;
 position: absolute;
 width: 160px;
 z-index: 9999;
 }
 #uncoverredSimpleMenu li:hover ul {
 left: auto;
 }

</style>
<div id="uncoverredSimpleMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a>
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="http://www.uncoverred.blogspot.com/">Menu 5</a></li>
</div>
Customization
  • Replace # with your Label URL.
  • Change all Menu 1 , Sub Menu 1 with your own text.

0 comments:

Post a Comment

 
Toggle Footer