导航条优化

app/code/Magento/Theme/Block/Html/Topmenu.php

@@ -194,12 +194,15 @@ class Topmenu extends Template implements IdentityInterface
             $colStops = $this->_columnBrake($child->getChildren(), $limit);
         }
 
-        if ($child->getData('name') == 'TOPS') {
+        $name = $child->getData('name');
+        $name = strtoupper($name);
+
+        if ($name == 'TOPS') {
             $html .= '<div class="level' . $childLevel . ' ' . $childrenWrapClass . '">';
 //        $html .= $this->_getHtml($child, $childrenWrapClass, $limit, $colStops);
             $html .= '1222';
             $html .= '</div>';
-        } elseif ($child->getData('name') == 'BODYSUITS') {
+        } elseif ($name == 'BODYSUITS') {
             $html .= '<div class="level' . $childLevel . ' ' . $childrenWrapClass . '">';
             $html .= '<div class="row">';
             $html .= '<ul class="subchildmenu col-sm-12 mega-columns columns4">';
@@ -207,10 +210,17 @@ class Topmenu extends Template implements IdentityInterface
             $html .= '</ul>';
             $html .= '</div>';
             $html .= '</div>';
+        } elseif ($name == 'SHAPEWEAR') {
+            $html .= '<div class="level' . $childLevel . ' ' . $childrenWrapClass . '">';
+            $html .= '<div class="row">';
+            $html .= '<ul class="subchildmenu col-sm-8 mega-columns columns4">';
+            $html .= $this->_getHtmlStyle2($child, $childrenWrapClass, $limit, $colStops);
+            $html .= '</ul>';
+            $html .= '</div>';
+            $html .= '</div>';
         } else {
-            $html .= '<ul class="level' . $childLevel . ' ' . $childrenWrapClass . '">';
-//        $html .= $this->_getHtml($child, $childrenWrapClass, $limit, $colStops);
-            $html .= '33333';
+            $html .= '<ul class="level' . $childLevel . '">';
+            $html .= $this->_getHtml($child, $childrenWrapClass, $limit, $colStops);
             $html .= '</ul>';
         }
 
@@ -274,6 +284,62 @@ class Topmenu extends Template implements IdentityInterface
         return $html;
     }
 
+    protected function _getHtmlStyle2(Node $menuTree,
+                                      $childrenWrapClass,
+                                      $limit,
+                                      array $colBrakes = []
+    )
+    {
+        $html = '';
+
+        $children = $menuTree->getChildren();
+        $childLevel = $this->getChildLevel($menuTree->getLevel());
+        $this->removeChildrenWithoutActiveParent($children, $childLevel);
+
+        $counter = 1;
+        $childrenCount = $children->count();
+
+        $parentPositionClass = $menuTree->getPositionClass();
+        $itemPositionClassPrefix = $parentPositionClass ? $parentPositionClass . '-' : 'nav-';
+
+        /** @var Node $child */
+        foreach ($children as $child) {
+            $child->setLevel($childLevel);
+            $child->setIsFirst($counter === 1);
+            $child->setIsLast($counter === $childrenCount);
+            $child->setPositionClass($itemPositionClassPrefix . $counter);
+
+            $outermostClassCode = '';
+            $outermostClass = $menuTree->getOutermostClass();
+
+            if ($childLevel === 0 && $outermostClass) {
+                $outermostClassCode = ' class="' . $outermostClass . '" ';
+                $this->setCurrentClass($child, $outermostClass);
+            }
+
+            if ($this->shouldAddNewColumn($colBrakes, $counter)) {
+                $html .= '</ul></li><li class="column"><ul>';
+            }
+
+            $html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
+            $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>' . $this->escapeHtml(
+                    $child->getName()
+                ) . '</span></a>' . $this->_addSubMenu(
+                    $child,
+                    $childLevel,
+                    $childrenWrapClass,
+                    $limit
+                ) . '</li>';
+            $counter++;
+        }
+
+        if (is_array($colBrakes) && !empty($colBrakes) && $limit) {
+            $html = '<li class="column"><ul>' . $html . '</ul></li>';
+        }
+
+        return $html;
+    }
+
     /**
      * Recursively generates top menu html from data that is specified in $menuTree
      *

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

@@ -950,21 +950,26 @@ footer{
     .subchildmenu.mega-columns > li{
       float: left;
     }
-    .navigation li.level0 .submenu .level1{
+    .navigation li.level0 .submenu li.level1{
       border-right: 1px solid #e1e1e1;
       padding: 0 20px;
     }
     .navigation .subchildmenu.mega-columns.columns4 > li{
       width: 25%;
     }
+    .navigation .subchildmenu.col-sm-8.mega-columns.columns4 > li{
+      width: 18%;
+    }
     .navigation .subchildmenu.mega-columns.columns4 > li:nth-child(4n+1){
       clear: both;
     }
     .navigation ul li.level0{
-      padding: 5px 10px;
+      padding: 0 10px;
     }
     .navigation ul li.level0 > a > span{
       text-transform: uppercase;
+      font-size: 13px;
+      font-weight: 500;
     }
 
 
@@ -981,6 +986,25 @@ footer{
       text-transform: none;
     }
 
+    .navigation .subchildmenu.col-sm-8.mega-columns.columns4 ul.level1{
+      display: block !important;
+    }
+    .navigation .subchildmenu.col-sm-8.mega-columns.columns4 li.level1.parent>a::after{
+      content: none;
+    }
+
+    .navigation .subchildmenu.col-sm-8.mega-columns.columns4 li.level1.parent>a>span{
+      font-size: 14px;
+      font-weight: 500;
+      color: #000001;
+      font-family: 'Outfit-Regular', sans-serif;
+    }
+    .navigation .subchildmenu.col-sm-8.mega-columns.columns4 li.level1.parent ul li.level2>a>span{
+      font-size: 14px;
+      font-weight: 400;
+      color: #666666;
+      font-family: 'Outfit-Regular', sans-serif;
+    }
   }
 }