Today I am sharing the easy drop down navigation menu for Blogspot users. This is vital for every single blogger to create the navigation easier of the blogs due to several reasons and drop down navigation menu can be an ideal thing for this. In most of these menus, when a person hovers the particular mouse cursor in any unique category next it falls some subcategories of it from the vertical design. And for this effect, it is termed best menus style. Well, before installing this in your blog first let me tell you something about this.
This is the simple drop down navigation menu that is built with pure HTML, CSS3 along with JQuery. It features a gray color since it is intuitive and it does not affect the particular visitors' face. You know some large colors like Purple, Blue along with Orange have an impact on the visitors' eyes and the majority web designers use light colors. And this menu shows the top to bottom subtypes when you may place the particular mouse in any drop down menus. It also offers a focus or press effect. So let's start adding this menu to your blogger blog.
This is the simple drop down navigation menu that is built with pure HTML, CSS3 along with JQuery. It features a gray color since it is intuitive and it does not affect the particular visitors' face. You know some large colors like Purple, Blue along with Orange have an impact on the visitors' eyes and the majority web designers use light colors. And this menu shows the top to bottom subtypes when you may place the particular mouse in any drop down menus. It also offers a focus or press effect. So let's start adding this menu to your blogger blog.
How to Add This Menu to Blogger?
Adding this menu into your blog is quite easy and even a beginner can add this without facing any problem. Just follow the steps below.- Go To Blogger >> Layout >> Add a Gadget (In The Header Area)
- Choose "HTML/JavaScript"
- Paste The Following Code In The Content Box
<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.trickzbuzz.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>
- Replace Yellow Highlighted Characters With Links
- Replace Green Highlighted Characters With Link Text
- Click "Save" Button
- That's All!
Video Guide
0 comments:
Post a Comment