WordPress.org

1. drkknght
   Member
   Posted 11 months ago #

   love using the new wordpress menu builder. it's perfect for linking to everything, but... is it possible to create a jquery link? in other words, having one of my menu links toggle a div i've already built in? or do i have to ditch the WP menu alltogether?

   i've tried using the XFN "rel" area, but it cuts out my brackets. ideally, i need it to look like:

   rel="toggle[user-section-new]"

   and WP auto-corrects it to

   rel="toggleuser-section-new"

   any advice?

2. Jonathan
   Member
   Posted 11 months ago #

   I would try using a jquery class selector for that link.

   In the WordPress menu builder if you don't see the option to add a custom class to a menu item you can turn it on under screen options in the menu admin area. Once you add a class you should be able to use jquery to select only that menu item.

   Hopefully that's helpful. Let me know if you have any trouble adding the extra css class.

3. drkknght
   Member
   Posted 11 months ago #

   hi jonathan, thanks for the response! i see where the css class area is on the menu, just not entirely sure how to use the menu option's css to call the div. can you give me an example of what you mean...?

4. Jonathan
   Member
   Posted 11 months ago #

   @drkknght, maybe something like this:

   
$('.your-added-css-menu-class').click(function() {
$('#your-div-id').show();
});


   Let me know if that doesn't make sense.

5. drkknght
   Member
   Posted 11 months ago #

   hi jonathan - thanks again for following up

   OK, i tried what you recommended, using the appropriate div tags and code - which, for the record, ends up looking like this:

   $('.menu-cartoons').click(function() {
   $('#toons-list').show();
   });

   however, that resulted in the following:
   Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$' in /nfs/c03/h06/mnt/55017/domains/toonbarn.com/html/wordpress/wp-content/themes/arras/header.php on line 22

   was i correct in placing this in the header file, between the actual head tags? and should i have wrapped the code in <?php and ?> or did i format that incorrectly

6. Jonathan
   Member
   Posted 11 months ago #

   @drkknght, The code given there is actually the jQuery library and is JavaScript. You can put that either in the head tag or in the footer, but it needs to be wrapped in a <script> tag.

   It might be good for you to read a little about basic jQuery at http://docs.jquery.com/Main_Page. That will give you the basics on how to include jQuery on your pages.

   Also, the div you have with the ID of #toons-list, do you have that hidden right now? If so, how did you go about that?

   If you used CSS and display: none you don't have to use show(). You can use choose between a bunch of jQuery effects at http://api.jquery.com/category/effects/.

   Let me know how it goes.

7. S Johanna
   Member
   Posted 10 months ago #

   I am looking to do the same thing, but my knowledge in Jquery are quite small...

   Did you manage to get what you were looking for drkknght?

   I don't really know where to start. Thanks!

Reply

You must log in to post.