Tuesday, July 3, 2012

Pin It

How To Add Jquery Effect On Drop down Menu

Since every blogger Enchance their blog appeal, CSS3 and JQuery have been trend on them.As we can see , many site have used CSS3 and Jquery for Transition effect , slide effect and many more.
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

 i will explain the basic of dropdown menu
Alright, see the Contact that's <li> and Google+ , facebook , are on the <ul>
This is the source code of my dropdown menu section
<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>
 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.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<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>
Alright, that's all, easy , right??
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.

Reaksi:

0 komentar:

Post a Comment