ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   roburdick
   Member

   Hi All,

   I already asked this question but worded slightly differently, hopefully this explains better what I want to do.

   The following site has a menu on the left with sub pages (just 1 at the moment as I am testing it out before building the whole thing up):
   http://anandimages.co.uk/?page_id=4

   I want the sub page drop down that appears when you hover over India to slide everything down rather than sit over the top of the next parent menu items. I understand Jquery is enabled in thematic. What do I have to do to make this happen?

   This is the code in my functions.php that builds the menu:
   '
   // remove thematic_access()
   function remove_access() {
   remove_action('thematic_header','thematic_access',9);
   }
   add_action('init', 'remove_access');

   #
   // INSERT on header
   #
   function childtheme_access_menu() {

   { ?>

   <div id="access">
   <div class="skip-link">"><?php _e('Skip to content', 'thematic'); ?></div>
   <?php wp_list_pages('sort_column=menu_order&depth=3') ?>
   </div><!-- #access -->
   <! ourchildtheme_access_menu ends here >
   <?php }

   } // end of our new function childtheme_access_menu

   // Now we add our new function to our Thematic Action Hook
   add_action('thematic_header','childtheme_access_menu');
   '

   Thanks in advance.

   Rob

   Posted 1 year ago #
2. 

   helgatheviking
   Moderator

   this isn't really something thematic can solve on its own. you will need to find a jquery plugin that does what you want. then add the appropriate scripts into the header.

   Posted 1 year ago #
3. 

   roburdick
   Member

   Thanks helga.

   I found this plugin:
   http://www.webspaceworks.com/resources/wordpress/30/

   It has made my menu do what I intend which is cool. I have lost styling and slick Jquery effects, which is no big deal, but it would be nice to have. Does anybody know what script I should add into the header? Will I be able to style this with CSS?

   My code for the menu in functions.php now looks like this:

   '
   <div id="access">
   <div class="skip-link">"><?php _e('Skip to content', 'thematic'); ?></div>
   <?php wswwpx_fold_page_list('title_li=&sort_column=menu_order','true'); ?>
   </div><!-- #access -->
   '

   Posted 1 year ago #
4. 

   helgatheviking
   Moderator

   maybe i didn't understand your original question, but i thought you were after an accordian-style menu effect. that will require a "jquery" plugin... meaning jquery script.

   something like one of the following maybe?

   http://www.problogdesign.com/design/10-ways-to-install-accordion-menus-in-your-wordpress-theme/

   i have another thread about installing the masonry jquery plugin. there i explain (to the best of my knowledge) how to activate jquery things in thematic.

   http://themeshaper.com/forums/topic/how-can-i-place-jquery-masonry-on-my-home-page

   from the front-end i can only tell that you've lost the thematic styling b/c you no longer have the appropriate ul class="sf-menu" markup that most all the style is based on.

   BUT, if this is what you are after, you can absolutely style it. you can style anything. you just need to know the markup so you know what selectors to target. if you need help there i cannot recommend getfirebug.com highly enough. you might need to wrap the menu in div or ul or something, but it can certainly be done.

   for instance, wrapping in a ul w/ class sf-menu will trigger the thematic styling... which you may or may not want, but it at least illustrates what i mean.

   <div id="access">
   <div class="skip-link">"><?php _e('Skip to content', 'thematic'); ?></div>
   <ul class="sf-menu">
   <?php wswwpx_fold_page_list('title_li=&sort_column=menu_order','true'); ?>
   </ul>
   </div><!-- #access -->

   Posted 1 year ago #
5. 

   roburdick
   Member

   Again, thanks for your help helga,

   I took a look at the thread about implementing Jquery masonry and tried a few things to get some Jquery action on my navigation, but I had no luck.

   I guess this might be a bit advance for me, I am more of a designer, but seem to get hooked trying out copy and paste of code! here is what I tried in my functions.php:

   '

   // remove thematic_access()
   function remove_access() {
   remove_action('thematic_header','thematic_access',9);
   }
   add_action('init', 'remove_access');

   #
   // INSERT on header
   #
   function childtheme_access_menu() {

   { ?>
   <div id="access">
   <div class="skip-link">"><?php _e('Skip to content', 'thematic'); ?></div>
   <?php wswwpx_fold_page_list('title_li=&sort_column=menu_order','true'); ?>
   </div><!-- #access -->
   <! ourchildtheme_access_menu ends here >
   <?php }

   } // end of our new function childtheme_access_menu

   // Now we add our new function to our Thematic Action Hook
   add_action('thematic_header','childtheme_access_menu');

   function my_script() {?>
   <script>

   jQuery(document).ready(function($) {

   //now you can use jquery as normally written w/ $('#selector).whatever();

   });

   </script>
   <?php }
   add_action('wp_head', 'my_script');

   //add sidebar jquery slide effect

   function pretty_sidebar () {
   if (!is_page()) { ?>
   <script type="text/javascript">
   jQuery(document).ready(function(){
   jQuery('.page_item li').mouseover(function(){
   jQuery(this).animate({paddingLeft:"20px"}, { queue:false, duration:200});
   });
   jQuery('.page_item li').mouseout(function(){
   jQuery(this).animate({paddingLeft:"0"}, {queue:true, duration:200})
   });
   });
   </script>
   <?php }
   }
   add_action ('wp_head','pretty_sidebar');

   ?>
   '

   I would love to get Jquery working for me, but am also a bit lost! If anybody knows a good tutorial for absolute beginners about Jquery and wordpress maybe I could try that.

   Thanks again.

   Posted 1 year ago #
6. 

   helgatheviking
   Moderator

   i am not sure i have seen any good tuts on the subject frankly.. which is why i struggled so mightily with it myself. if i ever got my ass in gear it would be a good opening post for my blog. you've got 2 things i can see as errors in your implementation above.

   jQuery(document).ready(function($) {
   
   //now you can use jquery as normally written w/ $('#selector).whatever();
   
   });
   
   </script>
   <?php }
   add_action('wp_head', 'my_script');
   
   //add sidebar jquery slide effect
   
   function pretty_sidebar () {
   if (!is_page()) { ?>
   <script type="text/javascript">
   jQuery(document).ready(function(){
   jQuery('.page_item li').mouseover(function(){
   jQuery(this).animate({paddingLeft:"20px"}, { queue:false, duration:200});
   });
   jQuery('.page_item li').mouseout(function(){
   jQuery(this).animate({paddingLeft:"0"}, {queue:true, duration:200})
   });
   });
   </script>
   <?php }
   }
   add_action ('wp_head','pretty_sidebar');

   can probably be combined to get rid of the first statement. don't know if it makes a difference, but is at least a good idea for clean code purposes.

   but the big thing i see from the code you've posted... is more actually what i don't see. you aren't queuing up jquery or your accordion script. you need them both. so that script above where you are calling a function can't work b/c the functions you are calling are undefined. if you were using firebug you'd be getting little red errors pointing that out.

   from my (admittedly limited) experience installing jquery stuff is a 3 part process.

   1. queue up jquery and the jquery plugin you intend to use (this includes putting the jquery plugin in your theme folder!)
   2. call functions (like you are doing above)
   3. make sure your markup is correct. jquery selects elements in a style similar to css (by ID and class) so if the elements aren't identified and selected properly nothing happens.

   you are missing step one

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.