Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jun 30th, 2012  |  syntax: None  |  size: 4.28 KB  |  hits: 10  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Issue with a menu system in wordpress using jQuery
  2. jQuery(document).ready(function () {
  3.  
  4. //transitions
  5. //for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
  6. var style = 'easeOutExpo';
  7.  
  8. //Retrieve the selected item position and width
  9. var default_left = Math.round(jQuery('#lava li.selected').offset().left - jQuery('#lava').offset().left);
  10. var default_width = jQuery('#lava li.selected').width();
  11.  
  12. //Set the floating bar position and width
  13. jQuery('#box').css({left: default_left});
  14. jQuery('#box .head').css({width: default_width});
  15.  
  16. //if mouseover the menu item
  17. jQuery('#lava li').hover(function () {
  18.  
  19.     //Get the position and width of the menu item
  20.     left = Math.round(jQuery(this).offset().left - jQuery('#lava').offset().left);
  21.     width = jQuery(this).width();
  22.     jQuery('#debug').html(left);
  23.     //Set the floating bar position, width and transition
  24.     jQuery('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});  
  25.     jQuery('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});  
  26.  
  27.     //if user click on the menu
  28. }).click(function () {
  29.  
  30.     //reset the selected item
  31.     jQuery('#lava li').removeClass('selected');
  32.  
  33.     //select the current item
  34.     jQuery(this).addClass('selected');
  35.  
  36. });
  37.  
  38. //If the mouse leave the menu, reset the floating bar to the selected item
  39. jQuery('#lava').mouseleave(function () {
  40.  
  41.     //Retrieve the selected item position and width
  42.     default_left = Math.round(jQuery('#lava li.selected').offset().left - jQuery('#lava').offset().left);
  43.     default_width = jQuery('#lava li.selected').width();
  44.  
  45.     //Set the floating bar position, width and transition
  46.     jQuery('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});  
  47.     jQuery('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});      
  48.  
  49. });
  50.        
  51. <div id="lava">
  52.                     <ul>
  53.                         <!-- To show "selected" on the home page -->
  54.                             <li<?php
  55.                                     if (is_page('Home'))
  56.                                     {
  57.                                     echo " class="selected"";
  58.                                     }?>>
  59.                                     <a href="<?php bloginfo('url') ?>">Home</a>
  60.                             </li>
  61.  
  62.                             <!-- To show "selected" on the About Us Page  -->
  63.                             <li<?php
  64.                                     if (is_page('about'))  
  65.                                     {
  66.                                     echo " class="selected"";
  67.                                     }?>>
  68.                                     <a href="<?php bloginfo('url') ?>/about/">About Us</a>
  69.                             </li>
  70.  
  71.                             <!-- To show "selected" on the Portfolio Page -->
  72.                             <li<?php
  73.                                     if (is_page('portfolio'))
  74.                                     {
  75.                                     echo " class="selected"";
  76.                                     }?>>
  77.                                     <a href="<?php bloginfo('url') ?>/portfolio/">Portfolio</a>
  78.                             </li>
  79.  
  80.                             <!-- To show "selected" on the Blog Page -->
  81.                             <li<?php
  82.                                     if (is_home())
  83.                                     {
  84.                                     echo " class="selected"";
  85.                                     }
  86.                                     ?>>
  87.                                     <a href="<?php bloginfo('url') ?>/blog/">Blog</a>
  88.                             </li>
  89.                             </ul>
  90.  
  91.                     <div id="box"><div class="head"></div></div>
  92.        
  93. <li<?php
  94.                                     if (is_home())
  95.                                     {
  96.                                     echo " class="selected"";
  97.                                     }
  98.                                     else if(is_page('<?php the_title(); ?>/%postname%/')){
  99.                                         echo " class="selected"";
  100.                                     }
  101.                                     ?>>
  102.                                     <a href="<?php bloginfo('url') ?>/blog/">Blog</a>
  103.                             </li>
create a new version of this paste RAW Paste Data