Drop Down Sub Menu Conditional open left or Right depending on browser size

Thanks Jerod!

I was running into the problem where a drop down menu on the right side of the Primary Links was pushed outside the browser window and not showing up. I'm running Drupal 6.15 and didn't know what to do with the code above. I shot Jerod an email and he was kind enough to help a little further.

By simply dropping this code into nice_menus.js the problem was solved. This worked in Firefox 3.6.3 and IE 7 & 8 with no issues.

Perfect, thank you! Thanks to xpatrolx for sharing the information about where to put the code. This was a huge problem for me before.

I had my menu aligned to the right so I always wanted the menu to always to the left side, regardless condition. I'm not good with javascript, so there's probably an easier way, but I changed the code at the if condition and got this:

Drupal.behaviors.nice_menus_dropdown_conditionally_open_left_or_right = function (context) {
  $("ul.nice-menu-down li li").mouseover(function(){
    if($(this).children('ul').length == 1) {
      var parent = $(this);
      var child_menu = $(this).children('ul');
      if( $(parent).offset().left + $(parent).width() + $(child_menu).width() > $(window).width() ){
        $(child_menu).css('left', '-' + $(parent).width() + 'px');
  } else {
        $(child_menu).css('left', '-' + $(parent).width() + 'px');
      }
    }
  });
};

So the code that told nice menues to open on the right side if there's enough space is gone, replaced by the code that tells it to open on the left side..
It does the trick for me. Then I change the css so that the arrow points left.

This needs to be supplied as a patch for proper review and a chance to get in.

I also need this on my last project and I think this is a nice feature for nice menu. I tried to create a patch using tortoiseCVS and I attached it here.

Oh I also want to add that the js code added by jerodfritz also work fine in the following browser

Safari 5.0.2
Opera 10.51
Goggle Chrome 8.0.512

all tested in WinXP machine.

changed status to needs review.

Subscribing and thanks Jerod for posting the fix. This has been one of those things that has been nagging at me for as long as I've been using Nice Menus (2-1/2 maybe 3 years). Other than that, they sure are handy : )

Since Jerod's addition hasn't made it into the module yet (and because hacking modules makes it hard to maintain) I decided the best way to apply it would be in a block. That way I could discard it if it gets resolved in a future update. Set your input format to PHP and add this block to some region in the page. drupal_add_js(); will put the JavaScript code in the head of the document so you don't need to worry about where you put your block as long as it is an active region.

Tested with Drupal 6.22 & Nice Menus 6.x-2.1

Thanks again Jerod!

<?php
    drupal_add_js ('
  Drupal.behaviors.nice_menus_dropdown_conditionally_open_left_or_right = function (context) {
  $("ul.nice-menu-down li li").mouseover(function(){
    if($(this).children("ul").length == 1) {
      var parent = $(this);
      var child_menu = $(this).children("ul");
      if( $(parent).offset().left + $(parent).width() + $(child_menu).width() > $(window).width() ){
        $(child_menu).css("left", "-" + $(parent).width() + "px");
      } else {
        $(child_menu).css("left", $(parent).width() + "px");
      }
    }
  });
};
Drupal.nice_menus_dropdown_conditionally_open_left_or_right = {};
    ', 'inline');
?>

Great code, thank you!
For Drupal 7 update the nice_menus.js like this:

/**
 * @file
 * Behaviours for the Nice Menus module. This uses Superfish 1.4.8.
 *
 * @link http://users.tpg.com.au/j_birch/plugins/superfish
 */

(function ($) {

  /**
   * Add Superfish to all Nice Menus with some basic options.
   */
  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
        });

        // 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');
      });

      $("ul.nice-menu-down li li").mouseover(function(){
        if($(this).children("ul").length == 1) {
          var parent = $(this);
          var child_menu = $(this).children("ul");
          if( $(parent).offset().left + $(parent).width() + $(child_menu).width() > $(window).width() ){
            $(child_menu).css("left", "-" + $(parent).width() + "px");
          } else {
            $(child_menu).css("left", $(parent).width() + "px");
          }
        }
      });

    }
  };


})(jQuery);

#9 worked great for me. Will this be rolled into a release, or a patch made? I hate hacking the module, but it does work.

D7 reached its EOL back in January 2025, and there is no active release for D7 for this module anymore.
Development or support is not planned for D7. All D7-related issues are marked as outdated in a bunch.