网站导航优化

app/code/Magento/Theme/view/frontend/templates/html/topmenu.phtml

@@ -16,7 +16,7 @@ $_menuHtml = $block->getHtml('level-top', 'submenu', $columnsLimit)
 <div class="nav-sections">
 <div class="nav-sections">
     <nav class="navigation" data-action="navigation">
     <nav class="navigation" data-action="navigation">
         <ul data-mage-init='{"menu":{"responsive":true,"dropdown":"div", "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
         <ul data-mage-init='{"menu":{"responsive":true,"dropdown":"div", "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
-            <li class="level0 nav-1 first level-top"><a href="/" class="level-top"><span>Home</span></a></li>
+            <li class="level0 nav-0 level-top"><a href="/" class="level-top"><span>Home</span></a></li>
             <?= /* @noEscape */ $_menuHtml?>
             <?= /* @noEscape */ $_menuHtml?>
             <?= $block->getChildHtml() ?>
             <?= $block->getChildHtml() ?>
         </ul>
         </ul>

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

@@ -1030,6 +1030,87 @@ footer{
       margin-top: 16px;
       margin-top: 16px;
       padding: 10px 0;
       padding: 10px 0;
     }
     }
+
+    .navigation ul li.level0>a>span.ui-menu-icon{
+      top: -13px;
+      right: 24px;
+      background-color: #0cc485;
+      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.ui-icon-1:before{
+      border-top-color: #0cc485;
+    }
+    .navigation ul li.level0 > a > span.ui-menu-icon:before{
+      left: 3px;
+      bottom: -6px;
+    }
+    .navigation span.ui-menu-icon:before{
+      content: "";
+      position: absolute;
+      width: 3px;
+      height: 3px;
+      border: 3px solid transparent;
+    }
+    //.navigation li.level0.nav-1 .ui-menu-icon{
+    //  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;
+    //  background-color: #0cc485;
+    //  top: 0;
+    //  right: 14px;
+    //}
+
+    //.navigation li a:hover{
+    //  background: none !important;
+    //}
+    //
+    //.navigation li.opened a:hover{
+    //  background: none !important;
+    //}
+    //.navigation .opened > a{
+    //  background: none !important;
+    //}
+    //
+    //.navigation li.level0:hover{
+    //  content: "";
+    //  width: 0;
+    //  height: 2px;
+    //  color: #000000;
+    //  position: absolute;
+    //  bottom: 15px;
+    //  left: 10px;
+    //  border-bottom: 2px solid #000000;
+    //  transition: all 0.3s ease;
+    //}
+
+    //.navigation .level0:hover:after{
+    //  content: '';
+    //  display: block;
+    //  position: absolute;
+    //  top: 0;
+    //  left: 100%;
+    //  width: 10px;
+    //  height: calc(100% + 3px);
+    //  z-index: 1;
+    //}
   }
   }
 }
 }
 
 

vendor/swissup/module-breeze/view/frontend/web/js/components/menu.js

@@ -38,12 +38,12 @@
             }
             }
 
 
             $('li.parent > ul', this.element).hide();
             $('li.parent > ul', this.element).hide();
-            $('li.parent', this.element)
+            $('li.parent.nav-1', 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"></span>');
+                .prepend('<span class="ui-menu-icon ui-icon-1">NEW</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),