In the last post I shared some scripts by which bloggers can Easily disable text selection on bloggers blog to stop content being stolen. Today I am going to explain how you can add drop-down navigation menu to the upper tabs on your blog simply through layout. You may have seen these types of drop down menus on many websites and blogs so that to serve more pages and links without losing extra space.
Why You Should Add Drop-Down - Benefits
If your blog has dozens of pages such as Contact Us, About Us etc. and you want to add those all on your homepage then you must use drop-down navigation menu. If you add those pages without drop down then your blog may look like a jungle. This will save the space of your homepage and make your blog attractive.
How To Add This Menu - Tutorial
This is a very simple J-Query script which you can add through bloggers layout. Simply follow the steps given below:
- Login to Blogger
- Go to Layout>>Add Gadget>>HTML/Javascript
- Paste the following code in it:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
//We initially hide the all dropdown menus
$('#dropdown_nav li').find('.sub_nav').hide();
//When hovering over the main nav link we find the dropdown menu to the corresponding link.
$('#dropdown_nav li').hover(function() {
//Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
$(this).find('.sub_nav').fadeIn(100);
}
, function() {
//Do the same again, only fadeOut this time.
$(this).find('.sub_nav').fadeOut(50);
}
);
}
);
</script>
<style>
#dropdown_nav a {
font-family:Arial, Sans-Serif;
font-size:15px;
font-weight:bold;
color:#525252;
text-decoration:none;
}
#dropdown_nav {
width:960px;
padding:0px;
display:inline-block;
list-style:none;
-moz-box-shadow:inset 0px 0px 1px #fff;
-webkit-box-shadow:inset 0px 0px 1px #fff;
border:1px solid #ccc;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#e2e2e2;
background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
}
#dropdown_nav li {
padding:10px 0px 10px 0px;
float:left;
position:relative;
display:inline-block;
}
#dropdown_nav li a {
padding:10px 15px 10px 15px;
text-shadow:-1px 1px 0px #f6f6f6;
-moz-box-shadow:inset 0px 0px 1px #fff;
-webkit-box-shadow:inset 0px 0px 1px #fff;
border-right:1px solid #ccc;
}
#dropdown_nav li a:hover {
background:#f9f9f9;
background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
}
#dropdown_nav li a:active {
background:#e2e2e2;
background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
}
#dropdown_nav li a.first {
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-radius:5px 0px 0px 5px;
}
/*#dropdown_nav li a.last {
-moz-border-radius:0px 5px 5px 0px;
-webkit-border-radius:0px 5px 5px 0px;
}
*/
/* Sub-Nav styling */
#dropdown_nav .sub_nav {
width:160px;
padding:0px;
position:absolute;
top:38px;
left:0px;
border:1px solid #ccc;
background:#e2e2e2;
}
#dropdown_nav .sub_nav li {
width:160px;
padding:0px;
}
#dropdown_nav .sub_nav li a {
display:block;
border-bottom:1px solid #ccc;
background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
}
#dropdown_nav .sub_nav li a:hover {
background:#f9f9f9;
background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
}
#dropdown_nav .sub_nav li a:active {
background:#e2e2e2;
background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
}
</style>
<!-- Navigation Start -->
<ul id="dropdown_nav">
<li><a class="first" href="http://www.tricksdroid.com/">Home</a></li>
<li><a href="#">Tutorials</a>
<ul class="sub_nav">
<li><a href="#">Photoshop #1</a></li>
<li><a href="#">Photoshop #2</a></li>
<li><a href="#">Photoshop #3</a></li>
<li><a href="#">Photoshop #4</a></li>
<li><a href="#">Photoshop #5</a></li>
<li><a href="#">Photoshop #6</a></li>
<li><a href="#">Photoshop #7</a></li>
</ul>
</li>
<li><a href="#">Artciles</a>
<ul class="sub_nav">
<li><a href="#">Announcements #1</a></li>
<li><a href="#">Announcements #2</a></li>
<li><a href="#">Announcements #3</a></li>
<li><a href="#">Announcements #4</a></li>
</ul>
</li>
<li><a href="#">Freebies</a>
</li>
<li><a class="last" href="#">Other Stuff</a>
<ul class="sub_nav">
<li><a href="#">Other Stuff #1</a></li>
<li><a href="#">Other Stuff #2</a></li>
<li><a href="#">Other Stuff #3</a></li>
<li><a href="#">Other Stuff #4</a></li>
</ul>
</li>
</ul>
- Now change the Green symbols in links.
- Replace Orange symbols with titles.
- Save the gadget.
If you have any problem adding this gadget or you have any suggestion regarding this post then you can feel free to comment below, I am here just for helping you. Have a nice day and enjoy blogging.
Written by Unknown
Satyam Bora Is 18 Years Old Boy Addicted To Blogging And Technology.He Is A Part Time Blogger And Student Of Civil Engineering. This Guy Is Always Here To Help You :)
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete