javascript - 如何制作下拉菜单以打开下拉菜单？

Question

如何将下拉菜单变成下拉菜单，使其显示为 Windows 开始按钮？

菜单应该在左下角。
如果您单击该按钮，菜单应该会打开。
虽然它应该向上打开。
它最终应该看起来和工作正常，就像 Windows 7 开始菜单一样。

这是我的代码:

var MainMenu = function() {
  var activated = false;
  var settings = {
    disabledClass: 'disabled',
    submenuClass: 'submenu'
  }
  var mask = '<div id="menu-top-mask" style="height: 2px; background-color: #fff; z-index:1001;"/>';
  var timeOut;
  this.init = function(p) {
    $.extend(settings, p);
    $mask = $('#menu-top-mask');
    $('ul.main-menu > li').click(function(event) {
      var target = $(event.target);
      if (target.hasClass(settings.disabledClass) || target.parents().hasClass(settings.disabledClass) || target.hasClass(settings.submenuClass)) {
        return;
      }
      toggleMenuItem($(this));
    });
    $('ul.main-menu > li > ul li').click(function(event) {
      // Prevent click event to propagate to parent elements
      event.stopPropagation();
      // Prevent any operations if item is disabled
      if ($(this).hasClass(settings.disabledClass)) {
        return;
      }
      // If item is active, check if there are submenus (ul elements inside current li)
      if ($(this).has("ul").length > 0) {
        // Automatically toggle submenu, if any
        toggleSubMenu($(this));
      } else {
        // If there are no submenus, close main menu.
        closeMainMenu();
      }
    });

    $('ul.main-menu > li').mouseenter(function() {
      if (activated && $(this).hasClass('active-menu') == false) {
        toggleMenuItem($(this));
      }
    });

    $('ul.main-menu > li > ul li').mouseenter(function(e) {
      // Hide all other opened submenus in same level of this item
      $el = $(e.target);
      if ($el.hasClass('separator')) return;
      clearTimeout(timeOut);
      var parent = $el.closest('ul');
      parent.find('ul.active-sub-menu').each(function() {
        if ($(this) != $el)
          $(this).removeClass('active-sub-menu').hide();
      });

      // Show submenu of selected item
      if ($el.children().size() > 0) {
        timeOut = setTimeout(function() {
          toggleSubMenu($el)
        }, 500);
      }
    });

    $('ul.main-menu > li > ul li').each(function() {
      if ($(this).children('ul').size() > 0) {
        $(this).addClass(settings.submenuClass);
      }
    });

    $('ul.main-menu li.' + settings.disabledClass).bind('click', function(e) {
      e.preventDefault();
    });

    //#region - Toggle Main Menu Item -

    toggleMenuItem = function(el) {

      // Hide all open submenus
      $('.active-sub-menu').removeClass('active-sub-menu').hide();

      $('#menu-top-mask').remove();

      var submenu = el.find("ul:first");
      var top = parseInt(el.css('padding-bottom').replace("px", ""), 10) + parseInt(el.css('padding-top').replace("px", ""), 10) +
        el.position().top +
        el.height();

      submenu.prepend($(mask));
      var $mask = $('#menu-top-mask');
      var maskWidth = el.width() +
        parseInt(el.css('padding-left').replace("px", ""), 10) +
        parseInt(el.css('padding-right').replace("px", ""), 10);

      $mask.css({
        position: 'absolute',
        top: '-1px',
        width: (maskWidth) + 'px'
      });

      submenu.css({
        position: 'absolute',
        top: top + 'px',
        left: el.offset().left + 'px',
        zIndex: 100
      });

      submenu.stop().toggle();
      activated = submenu.is(":hidden") == false;

      !activated ? el.removeClass('active-menu') : el.addClass('active-menu');

      if (activated) {
        $('.active-menu').each(function() {
          if ($(this).offset().left != el.offset().left) {
            $(this).removeClass('active-menu');
            $(this).find("ul:first").hide();
          }
        });
      }
    }

    //#endregion

    //#region - Toggle Sub Menu Item -

    toggleSubMenu = function(el) {

      if (el.hasClass(settings.disabledClass)) {
        return;
      }

      var submenu = el.find("ul:first");
      var paddingLeft = parseInt(el.css('padding-right').replace('px', ''), 10);
      var borderTop = parseInt(el.css('border-top-width').replace("px", ""), 10);
      borderTop = !isNaN(borderTop) ? borderTop : 1;
      var top = el.position().top - borderTop;

      submenu.css({
        position: 'absolute',
        top: top + 'px',
        left: el.width() + paddingLeft + 'px',
        zIndex: 1000
      });

      submenu.addClass('active-sub-menu');

      submenu.show();

      //el.mouseleave(function () {
      //	submenu.hide();
      //});
    }

    //#endregion

    closeMainMenu = function() {
      activated = false;
      $('.active-menu').find("ul:first").hide();
      $('.active-menu').removeClass('active-menu');
      $('.active-sub-menu').hide();
    };

    $(document).keyup(function(e) {
      if (e.keyCode == 27) {
        closeMainMenu();
      }
    });

    $(document).bind('click', function(event) {
      var target = $(event.target);
      if (!target.hasClass('active-menu') && !target.parents().hasClass('active-menu')) {
        closeMainMenu();
      }
    });
  }
}

$(document).ready(function() {
  new MainMenu().init();
});

body {
  padding: 10px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
}

.main-menu {
  position: absolute;
  /*position: relative;*/
  display: inline-block;
  z-index: 9999;
  bottom: 0px;
}

#menu-bar {
  bottom: 100%;
}

ul.main-menu {
  list-style-type: none;
  margin: 0px 0px 10px 0px;
  padding: 0px;
}

ul.main-menu>li {
  margin: 0;
  display: inline;
  list-style-type: none;
  padding: 6px 4px 6px 6px;
  line-height: 28px;
  vertical-align: middle;
  cursor: default;
  outline: none;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  border-color: transparent;
}

ul.main-menu>li.active-menu {
  background-color: #fff;
  border-color: #ccc;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

ul.main-menu ul li a {
  color: #000;
  text-decoration: none;
  display: block;
  white-space: nowrap;
}

ul.main-menu li ul li a span {
  font-size: 11px;
  color: #999;
  float: right;
  right: 10px;
  left: auto;
  position: absolute;
}


/* SUBMENU */

ul.main-menu>li ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: none;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  background-color: #fff;
  -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

ul.main-menu li ul li {
  display: list-item;
  margin: 0;
  line-height: 26px;
  padding-right: 40px;
  min-width: 100px;
  cursor: pointer;
  text-indent: 30px;
  white-space: nowrap;
}

ul.main-menu li:hover {
  background-color: whiteSmoke;
  /*#fef7cb;*/
}

ul.main-menu li.active-menu:hover {
  background-color: #fff;
}

ul.main-menu li ul li.disabled,
ul.main-menu li ul li.disabled:hover,
ul.main-menu li ul li.disabled a {
  color: #ddd;
  cursor: default;
  background-color: #fff;
}

ul.main-menu li.separator {
  border-top: 1px solid #ddd;
  margin-top: 5px;
  margin-bottom: 5px;
}

.submenu {
  background-image: url(../images/menu-right-arrow.png);
  background-repeat: no-repeat;
  background-position: right center;
}


/* ICONS
********************************************/

.icon {
  background-image: url(../images/icons/icons-sprite.png);
  background-repeat: no-repeat;
}


/*.new-product
{
    background-position: left -52px;
}
.new-document
{
    background-position: left -2px;
}
.new-client
{
    background-position: left -26px;
}*/

.print {
  background-position: left -369px;
}

.save {
  background-position: left -444px;
}

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../js/jquery.menu.js"></script>
<link href="../css/menu.css" rel="stylesheet" type="text/css" />

<div id="menu-bar">
  <ul class="main-menu">
    <li>
      Menu
      <ul>
        <li>Documents
          <ul>
            <li>All</li>
            <li class="separator"></li>
            <li>Unfinished</li>
            <li>Closed</li>
          </ul>
        </li>
        <li><a href="/#!/products">Products</a></li>
        <li class="separator"></li>
        <li>
          First level
          <ul>
            <li>
              Second level
              <ul>
                <li>
                  Third level menu item
                </li>
                <li>
                  Third level
                  <ul>
                    <li>
                      Forth level menu item 1
                    </li>
                    <li>
                      Forth level menu item 2
                    </li>
                  </ul>
                </li>
                <li class="separator"></li>
                <li>Another third level menu item</li>
              </ul>
            </li>
            <li>
              Items will make menus stretch as needed
            </li>
            <li class="separator"></li>
            <li>
              Another menu item
            </li>
          </ul>
        </li>
        <li class="separator"></li>
        <li>Reports
          <ul>
            <li>Sell history</li>
            <li>Clients history</li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <!-- end mainmenu -->
</div>

Answer 1

只需要将 top 属性更改为 bottom。

在你的情况下:

submenu.css({
    position: 'absolute',
    bottom: top + 'px',
    left: el.offset().left + 'px',
    zIndex: 100
});

其余的应该没问题