.png "My Twitter")
.png "RSS Feed")
in this Post, i want to guide you, HOW TO APPLY JQUERY EFFECT on your Dropdown menu.
First Open your Template Editor and Expand template widget, then search your Dropdown menu section,
How to find it????
Just look at the word of your menu and search with that word
Example, my menu has "link Exchange" , i will use that word for search the section
Alright, see the Contact that's <li> and Google+ , facebook , are on the <ul>
This is the source code of my dropdown menu section
This is the source code of my dropdown menu section
ok, the blue colored word , add them to your code, do exactly what i do with my code, you only need to add that code inside your code. after That search <head> and Paste the code below after it.<div style='clear:both;'/><div class='span-24'><div class='zmh-dropdown-container'><ul class='menus zmh-dropdown'><li><a href='zulkhamsyahmh.blogspot.com'>Home</a></li><li class='dropdown1'><a href='#' rel='nofollow'>Contact</a><ul class='sub_navigation1' style='display: none; '><li><a href='https://plus.google.com/u/0/102366695907680083909' rel='nofollow'>Google+</a></li><li><a href='https://www.facebook.com/zulkhamsyah' rel='nofollow'>Facebook</a></li><li><a href='https://twitter.com/ZulkhamsyahMH' rel='nofollow'>Twitter</a></li><li><a href='http://www.linkedin.com/pub/muhammad-h-zulkhamsyah/49/a62/197' rel='nofollow' target='_blank'>LinkedIn</a></li><li><a href='http://pinterest.com/zulkhamsyah/' rel='nofollow' target='_blank'>Pinterest</a></li></ul></li><li><a href='http://zulkhamsyahmh.blogspot.com/2012/05/link-exchange.html' target='_blank'>Link Exchange</a></li><li><a href='http://zulkhamsyahmh.blogspot.com/p/thank-you-for-donation.html' target='_blank'>Donate Us</a></li><li><a href='https://plus.google.com/102366695907680083909/about' rel='nofollow'>About Me</a></li></ul></div></div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>Alright, that's all, easy , right??
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
<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('.sub_navigation1').slideToggle();
});
</script>
Next Post, I will write about CSS3 Transition
Please kindly to Comment if you get some problem and Subscribe :)
Like the Post? Do share with your Friends.
0 komentar:
Post a Comment