If you want to add more link in your Navigation Tab I recommend you to install multilevel CSS dropdown menu.The code which I am going to say has got many special feature.Many new additional feature has been added.For Only 1st level also you can add this code.I have slightly change the code.
Installing the Multi level CSS drop menu.
Decide how many level you want to show in your blog.The steps are:
1.Adding HTML CODE
The first step is to add the Html code.
For Blogger
- Go to Blogger.com(You will be in dashboard)
- Go to Design or layout.
- Click on “Add A Gadget” below the Header.
- A new window will appear and scroll down the page and select the HTMl Code and paste the Following HTML code.
Multi level drop down menu HTML code
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Our Portfolio</a></li>
<li><a href="#">One Dropdown</a>
<ul>
<li><a href="#">Level 2.1</a></li>
<li><a href="#">Level 2.2</a></li>
<li><a href="#">Level 2.3</a></li>
<li><a href="#">Level 2.4</a></li>
<li><a href="#">Level 2.5</a></li>
</ul>
</li>
<li><a href="#">Three Levels</a>
<ul>
<li><a href="#">Level 2.1</a></li>
<li><a href="#">Level 2.2</a></li>
<li><a href="#">Level 2.3</a>
<ul>
<li><a href="#">Level 2.3.1</a></li>
<li><a href="#">Level 2.3.2</a></li>
<li><a href="#">Level 2.3.3</a></li>
<li><a href="#">Level 2.3.4</a></li>
<li><a href="#">Level 2.3.5</a></li>
<li><a href="#">Level 2.3.6</a></li>
<li><a href="#">Level 2.3.7</a></li>
</ul>
</li>
<li><a href="#">Level 2.4</a></li>
<li><a href="#">Level 2.5</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
You can add more drop menu etc..If you need only one menu remove level 2.1 , 2.2 and 2.3.1 etc..For 2 drop menu you can remove level like 2.3.1 etc.you can add them also.
Styling the Code.
If you paste only Html code it will not be Navaigation drop down menu.To appear widget in a action you need to style a CSS.For styling CSS follow this.
Adding CSS
To add CSS in Blogger follow this.
- Go to Blogger.com
- Click on design or Template
- Click on Edit Html
- Find the Code
]]></b:skin> - To add CSS add the code tight before it
For No Drop menu only navigation tab
This is basic CSS.For making the menu tab like in picture only add the following CSS(The code is basic for Other drop menu also.So the CSS Code is essential.Understand by this way if you want to make Drop menu only 1st level add this other CSS are not required.But if you want to show drop menu for more than 2level you need to add more CSS.)
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav ul li {
float:left;
}
#nav ul li a {
float: left;
color:#d4d4d4;
padding: 10px 20px;
text-decoration:none;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#nav li ul {
background:#3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
For 2nd level.
Add this more CSS after basic CSS
#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#nav li:hover ul {
left: auto;
}
#nav li li ul {
margin: -1px 0 0 160px;
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility:hidden;
}
#nav li li:hover ul {
visibility:visible;
}
It will make the Sub menus visible.For level two this much is only essential.For Sub menu sub menu follow more steps.
For 3rd level CSS
Add the following CSS to make sub menu sub menu Visible.
#nav ul ul li:last-child > a {
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
#nav ul ul ul li:first-child > a {
-moz-border-radius:0 10px 0 0;
-webkit-border-radius:0 10px 0 0;
border-radius:0 10px 0 0;
}
You can style your own CSS too.Just you need to devote with Blogger.Every this is possible if we have wish to desire it.Although my description is not great you can understand and activate it.I have tested this code also.So don’t think it doesnot work.If there is problem with you pls comment.Add only the code which is required by you.If you want demo see here.
Credit: Rethnaraj Rambabu,He is the real owner of the code.I really respect his contribution.Short biography of Code Author:Indian-born student residing in Malaysia and the Co-Editor of Blogger mint.This code can be seen in Blogger Mint.To appreciate him I have also added link to his site by demo.
Subscribe At free
Thank you for visiting FacebookSinker.blogspot.com. Please don't miss any of the updates by subscribing to our RSS feed or email updates.
No comments:
Post a Comment