导航条优化

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

@@ -1114,7 +1114,7 @@ footer{
       padding: 10px 0;
       padding: 10px 0;
     }
     }
 
 
-    .navigation ul li.level0>a>span.ui-menu-icon{
+    .navigation ul li.level0>a>span.ui-menu-icon-1{
       top: -13px;
       top: -13px;
       right: 24px;
       right: 24px;
       background-color: #0cc485;
       background-color: #0cc485;
@@ -1131,14 +1131,58 @@ footer{
     }
     }
 
 
 
 
-    .navigation ul li.level0>a>span.ui-menu-icon.ui-icon-1:before{
+    .navigation ul li.level0>a>span.ui-menu-icon-1.ui-icon-1:before{
       border-top-color: #0cc485;
       border-top-color: #0cc485;
     }
     }
-    .navigation ul li.level0 > a > span.ui-menu-icon:before{
+
+    .navigation ul li.level0>a>span.ui-menu-icon-2{
+      top: -13px;
+      right: 24px;
+      background-color: #eb2771;
+      position: absolute;
+      text-transform: uppercase;
+      font: inherit;
+      font-size: 9px;
+      padding: 3px;
+      border-radius: 2px;
+      line-height: 1.2;
+      color: #ffffff;
+      min-width: 35px;
+      text-align: center;
+    }
+
+
+    .navigation ul li.level0>a>span.ui-menu-icon-2.ui-icon-2:before{
+      border-top-color: #eb2771;
+    }
+
+    .navigation ul li.level0>a>span.ui-menu-icon-3{
+      top: -13px;
+      right: 24px;
+      background-color: #df0e0e;
+      position: absolute;
+      text-transform: uppercase;
+      font: inherit;
+      font-size: 9px;
+      padding: 3px;
+      border-radius: 2px;
+      line-height: 1.2;
+      color: #ffffff;
+      min-width: 35px;
+      text-align: center;
+    }
+
+
+    .navigation ul li.level0>a>span.ui-menu-icon-3.ui-icon-3:before{
+      border-top-color: #df0e0e;
+    }
+
+
+    .navigation ul li.level0 > a > span.ui-menu-icon-1:before,.navigation ul li.level0 > a > span.ui-menu-icon-2:before,.navigation ul li.level0 > a > span.ui-menu-icon-3:before{
       left: 3px;
       left: 3px;
       bottom: -6px;
       bottom: -6px;
     }
     }
-    .navigation span.ui-menu-icon:before{
+    .navigation span.ui-menu-icon-1:before,.navigation span.ui-menu-icon-2:before,.navigation span.ui-menu-icon-3:before{
       content: "";
       content: "";
       position: absolute;
       position: absolute;
       width: 3px;
       width: 3px;

app/design/frontend/Joshine/breeze/web/js/breeze/components/menu.js

@@ -43,14 +43,21 @@
                 .filter(function () {
                 .filter(function () {
                     return $(this).children('.ui-icon').length === 0;
                     return $(this).children('.ui-icon').length === 0;
                 })
                 })
-                .prepend('<span class="ui-menu-icon ui-icon-1">NEW</span>');
+                .prepend('<span class="ui-menu-icon-1 ui-icon-1">NEW</span>');
 
 
             $('li.parent.nav-3', this.element)
             $('li.parent.nav-3', this.element)
                 .children('a')
                 .children('a')
                 .filter(function () {
                 .filter(function () {
                     return $(this).children('.ui-icon').length === 0;
                     return $(this).children('.ui-icon').length === 0;
                 })
                 })
-                .prepend('<span class="ui-menu-icon ui-icon-1">SALE</span>');
+                .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').length === 0;
+                })
+                .prepend('<span class="ui-menu-icon-3 ui-icon-3">HOT!</span>');
 
 
             $('li.parent', this.element).on('keydown.menu', function (e) {
             $('li.parent', this.element).on('keydown.menu', function (e) {
                 var dropdown = $(this).children(self.options.dropdown),
                 var dropdown = $(this).children(self.options.dropdown),