Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts
Wednesday 6 June 2012
jquery-slideshow-in-dropdow-menu
How it works?
I have made the steps extremely simple so that even beginners may love to implement this modification inside their blogs or websites. We just need to create two CSS classes and insert them inside the link list tags of the menu and then finally attach the necessary call functions to trigger the effect. Follow these simple steps for blogger:
- Go to Blogger > Template
- Backup your template
- Click Edit HTML
- Search for <head>
- just below it paste the following code.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Note: If you have previously added the jquery link then you remove the previous one and use this update done instead. Your old widgets will still work.
6. Next search for ]]></b:skin> and just above it paste the following CSS classes
.mbt_navigation {
position:absolute;
display:none;
}
.mbt_navigation li {
clear:both;
}
7. Now the last part. Search your menu code and to the part from where the drop down list starts, add the class dropdown1 to the main tab (li tag) and add mbt_navigation to the ul tag of the column. Please see the our code to get an idea and carefully observe the locations of the two classes. We have replaced links with # symbol for simplicity.
<li class='dropdown1'><a href='#'>Tools »</a>
<ul class='mbt_navigation'>
<li><a href='#'>HTML Editor</a></li>
<li><a href='#'>Multiple SITEMAP Generator</a></li>
<li><a href='#'>Encode HTML Characters</a></li>
<li><a href='#'>Count Characters</a></li><li><a href='#'>Meta Tag Generator</a></li><li><a href='#'>Color Code Generator</a></li>
8. Finally just after the entire HTML code of your Menu (where your menu ends, it can either be </ul> or </div> depending on your menu code), paste the following code:
<script type='text/javascript'>
// Wait for the page and all the DOM to be fully loaded
// Add the 'hover' event listener to our drop down class
$('.dropdown1').hover(function() {
// When the event is triggered, grab the current element 'this' and
// find it's children '.sub_navigation1' and display/hide them
$(this).find('.mbt_navigation').slideToggle();
});
</script>
9. Save your template and you are all done!
