完善优化显示效果

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -1657,10 +1657,10 @@ button.action.submit.primary {
   }
 
 }
-//.swatch-option.color, .swatch-option.text, .swatch-option.image{
-//  width: 40px !important;
-//  height: 40px !important;
-//}
+.swatch-option.color, .swatch-option.text, .swatch-option.image{
+  width: 40px !important;
+  height: 40px !important;
+}
 
 //色块强制大小
 #product-options-wrapper .swatch-option.image{
@@ -1670,7 +1670,7 @@ button.action.submit.primary {
 }
 
 //颜色提示强制关闭
-.breeze .field-tooltip-content, .breeze .tooltip.wrapper .tooltip.content, .breeze .minicart-wrapper .mage-dropdown-dialog, .breeze .minisearch .search-autocomplete, .breeze .map-popup, .breeze .swatch-option-tooltip {
+.breeze .field-tooltip-content, .breeze .tooltip.wrapper .tooltip.content, .breeze .minisearch .search-autocomplete, .breeze .map-popup, .breeze .swatch-option-tooltip {
   display: none !important;
 }
 

lib/web/mage/menu.js

@@ -29,6 +29,28 @@ define([
          * @private
          */
         _create: function () {
+
+            $('li.nav-1', this.element)
+                .children('a')
+                .filter(function () {
+                    return $(this).children('.ui-icon-1').length === 0;
+                })
+                .prepend('<span class="ui-menu-icon-1 ui-icon-1">NEW</span>');
+
+            $('li.parent.nav-3', this.element)
+                .children('a')
+                .filter(function () {
+                    return $(this).children('.ui-icon-2').length === 0;
+                })
+                .prepend('<span class="ui-menu-icon-2 ui-icon-2">SALE</span>');
+
+            $('li.parent.nav-5', this.element)
+                .children('a')
+                .filter(function () {
+                    return $(this).children('.ui-icon-3').length === 0;
+                })
+                .prepend('<span class="ui-menu-icon-3 ui-icon-3">HOT!</span>');
+
             var self = this;
 
             this.delay = this.options.delay;
@@ -544,33 +566,27 @@ define([
                         targetPageX,
                         rightBound;
 
-                    if (target.has(submenu)) {
-                        ulElement = target.find(submenu);
-                        ulElementWidth = ulElement.outerWidth(true);
-                        width = target.outerWidth() * 2;
-                        targetPageX = target.offset().left;
-                        rightBound = $(window).width();
+                    if (target.has("div.submenu")) {
+                        var dropdown = target.find("div.submenu");
 
-                        if (ulElementWidth + width + targetPageX > rightBound) {
-                            ulElement.addClass('submenu-reverse');
+                        if (this.breezeTimeout) {
+                            clearTimeout(this.breezeTimeout);
+                            delete this.breezeTimeout;
                         }
 
-                        if (targetPageX - ulElementWidth < 0) {
-                            ulElement.removeClass('submenu-reverse');
-                        }
+                        this.open(dropdown);
                     }
-
-                    // Remove ui-state-active class from siblings of the newly focused menu item
-                    // to avoid a jump caused by adjacent elements both having a class with a border
-                    target.siblings().children('.ui-state-active').removeClass('ui-state-active');
-                    this.focus(event, target);
                 },
 
                 /**
                  * @param {jQuery.Event} event
                  */
-                'mouseleave': function (event) {
-                    this.collapseAll(event, true);
+                'mouseleave .ui-menu-item': function (event) {
+                    var target = $(event.currentTarget)
+                    var dropdown = target.find("div.submenu");
+                    setTimeout(function () {
+                        this.close(dropdown);
+                    }.bind(this), 80);
                 },
 
                 /**
@@ -591,7 +607,51 @@ define([
                 }, this.options.hideDelay);
             }
         },
+        close: function (dropdown) {
+            var eventData = {
+                dropdown: dropdown,
+                preventDefault: false
+            };
+
+            this._trigger('beforeClose', eventData);
+
+            if (eventData.preventDefault === true) {
+                return;
+            }
 
+            dropdown.removeClass('shown')
+                .parent('li')
+                .removeClass('opened');
+
+            if (true) {
+                // dropdown.find("ul.subchildmenu").hide()
+                dropdown.hide();
+            }
+
+            this._trigger('afterClose', {
+                dropdown: dropdown
+            });
+        },
+        open: function (dropdown) {
+            this._trigger('beforeOpen', {
+                dropdown: dropdown
+            });
+
+            dropdown.addClass('shown')
+                .parent('li')
+                .addClass('opened');
+
+
+
+            if (true) {
+                dropdown.find("ul.subchildmenu").show()
+                console.log(dropdown.find("ul.subchildmenu"))
+                if (dropdown.hasClass('subchildmenu')) {
+                    dropdown.find(".subchildmenu").show();
+                }
+                dropdown.show();
+            }
+        },
         /**
          * @param {*} handler
          * @param {Number} delay