By tagsko on

I don't know if I'm posting this in the right place because we might be talking more of a module hack than module development, so apologies in advance if this isn't the right thread.

My issue (or wanted feature) is this:

I'm using Nice Menus for my Primary links, and have successfully installed the Nice Menus module and it works nicely. I would however like to spruce it up a bit with some of that sexy jQuery ;)

I would love to be able to add the jQuery slide effect to the children of my (nice menus) primary links. I've been looking around all day to see if anyone have posted anything related but all I can see is that superfish implementation is not due in nice menus until the 2nd release which extends the functionality to some extent.

I'm guessing I would have to add the code (as per http://jqueryui.com/demos/effects_showhide/#slide)
in the nice_menus.module and put the relevant css in my custom nice menus css file(?).
My problem is however that I've been trying to find where I should add the javascript snippet in the module file.

Any help would be much appreciated!! :)

<style type="text/css">
		.toggler { width: 500px; height: 300px; }
		#slide { width: 240px; height: 135px; padding: 0.4em; }
		#slide h3 { margin: 0; padding: 0.4em; text-align: center; }
	</style>
	<script type="text/javascript">
	$(function() {
		$(".toggler").click(function() {
			$("> :eq(0)", this).toggle("slide");
		});
	});
	</script>



<div class="demo">

<div class="toggler">
	<div id="slide" class="ui-widget-content ui-corner-all">
		<h3 class="ui-widget-header ui-corner-all">Slide</h3>
		<p>
			Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
		</p>
	</div>
</div>

</div><!-- End demo -->

<div class="demo-description">

<p>Click anywhere in the frame above to toggle the effect.</p>

</div><!-- End demo-description -->
⋅ Categories: Drupal 6.x

Comments

mike-michal’s picture

mike-michal commented

All you have to do, you need to edit nice_menus.js file located in nice_menus/js directory and add this changing effect line animation: {height:'show'} that it should look like this

Drupal.behaviors.niceMenus = {
    attach: function (context, settings) {
      $('ul.nice-menu:not(.nice-menus-processed)').addClass('nice-menus-processed').each(function () {
        $(this).superfish({
          // Apply a generic hover class.
          hoverClass: 'over',
          // Disable generation of arrow mark-up.
          autoArrows: false,
          // Disable drop shadows.
          dropShadows: false,
          // Mouse delay.
          delay: Drupal.settings.nice_menus_options.delay,
          // Animation speed.
          speed: Drupal.settings.nice_menus_options.speed,
		  animation: {height:'show'}
        });

        // Add in Brandon Aaron’s bgIframe plugin for IE select issues.
        // http://plugins.jquery.com/node/46/release
        $(this).find('ul').bgIframe({opacity:false});

        $('ul.nice-menu ul').css('display', 'none');
      });
    }
  };

Hope that helps you like it helps me :) PEACE! Mike.