slice menu > 10

themes/contrib/estore/css/styles.css

@@ -152,9 +152,14 @@ article.commerce-product.teaser .product-image img {
   background: white !important;
 }
 
-.menu--category-menu .open ul.sidebar-submenu-2 li {
+.menu--category-menu .open ul.sidebar-submenu-3 li {
   border-bottom: none !important;
   width: 251px !important;
+  line-height: normal !important;
+  padding:  10px 0 !important;
+  /* height: 31px; */
+  /* line-height: 76px !important; */
+  /* display: block; */
 }
 
 .menu--category-menu .open ul.sidebar-submenu-2.three-level {
@@ -197,7 +202,8 @@ article.commerce-product.teaser .product-image img {
 
 .menu--category-menu .open .dropdown-menu.three-level .sidebar-submenu-3 li {
   padding: 4px 0;
-  width: 100% !important;
+  width: 100%;
+  line-height: 35px;
 }
 
 header.navbar .category-menu ul.menu ul.dropdown-menu li span {
@@ -207,6 +213,7 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li span {
   letter-spacing: 0.5px;
   margin-bottom: 0;
   margin-top: 0;
+  height: 35px;
 }
 
 .menu--category-menu .open .dropdown-menu.three-level .sidebar-submenu-3 li a {
@@ -223,7 +230,7 @@ header.navbar .category-menu ul.menu ul.dropdown-menu li span {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  top: 5px;
+  top: -8px;
   /* height: 102%; */
   border: none;
   left: 0;
@@ -1169,8 +1176,23 @@ header.navbar .block-search-navigation .search-icon {
 }
 
 /* end invi custom */
+/* invi custom menu */
+.menu--category-menu .open ul.sidebar-submenu-3.ul-flex{
+  display: flex;
+  flex-direction: row;
+}
+.menu--category-menu .open ul.sidebar-submenu-3.ul-flex ul{
+  padding:  0 !important;
+}
+.menu--category-menu .open ul.sidebar-submenu-3.ul-flex ul li{
+  list-style: none;
+}
+
+/*  */
+
 body {
   margin: 0;
+	background: #faeed8;
 }
 
 article,

themes/contrib/estore/js/custom.js

@@ -10,7 +10,7 @@
     rightMenu.addClass("litte-menu");
     rightMenu.children('li').eq(lengthMenu - 1).after('<li class="less-category">Ẩn bớt </li>');
     rightMenu.children('li').eq(9).after('<li class="more-category">Xem Thêm</li>');
-    for (let i =11 ; i < lengthMenu + 2 ; i++){
+    for (let i = 11; i < lengthMenu + 2; i++) {
       rightMenu.children('li').eq(i).hide();
     }
   }
@@ -19,75 +19,103 @@
     rightMenu.removeClass("litte-menu");
     //  rightMenu.append('<li class="less-category">Ẩn bớt </li>');
     rightMenu.children('li').eq(10).hide();
-    for (let i =11 ; i < lengthMenu  + 2  ; i++){
+    for (let i = 11; i < lengthMenu + 2; i++) {
       rightMenu.children('li').eq(i).show();
     }
-
   })
   $(".less-category").click(function() {
     rightMenu.addClass("litte-menu");
     rightMenu.children('li').eq(10).show();
-    for (let i =11 ; i < lengthMenu  + 2  ; i++){
+    for (let i = 11; i < lengthMenu + 2; i++) {
       rightMenu.children('li').eq(i).hide();
     }
   })
   var checkHome = $(".estore-homepage-first");
-  if ($(".toolbar-bar").length == 0){
-      $(".middle-header-wrapper").children(".container-fluid").addClass("no-toolbar");
+  if ($(".toolbar-bar").length == 0) {
+    $(".middle-header-wrapper").children(".container-fluid").addClass("no-toolbar");
   }
   if (checkHome.length == 0) {
     $(".menu.menu--category-menu.nav").addClass('hide-block');
     $(".menu.menu--category-menu.nav").addClass('not-home');
+  }
+  // console.log($(".sidebar-submenu-3").children('li'));
+  var submenu3 = $(".sidebar-submenu-3");
+  for (let i = 0; i < submenu3.length; i++) {
+    if ($(".sidebar-submenu-3").eq(i).children('li').length > 10) {
+      // var items = $(".sidebar-submenu-3").eq(i).children('li');
+      // var groups = [];
+      // var amountOfGroups = Math.ceil(items.length / 10)
+      // for (var i = 0; i < amountOfGroups; i++) {
+      //   var currentIndex = i * 10
+      //   groups.push(items.slice(currentIndex, currentIndex + 10))
+      // }
+      // console.log("aaaaa",groups);
+$(".sidebar-submenu-3").eq(i).addClass('ul-flex');
+        $(".sidebar-submenu-3").eq(i).children('li').slice(0,10).wrapAll("<ul></ul>");
+        $(".sidebar-submenu-3").eq(i).children('li').slice(0,10).wrapAll("<ul></ul>");
+        $(".sidebar-submenu-3").eq(i).children('li').slice(0,10).wrapAll("<ul></ul>");
+      // $(".sidebar-submenu-3").eq(i).children('li').slice(0,10).css("background-color", "red");
+      // }
 
+      // console.log($(".sidebar-submenu-3").eq(i).children('li'));
+      // //
+      // $(".sidebar-submenu-3").eq(i).children('li').slice(0,10).css("background-color", "blue")
+      // $(".sidebar-submenu-3").eq(i).children('li').slice(20,30).wrapAll("<li></li>").wrapAll("<ul></ul>");
+
+    }
   }
-  $(window).scroll(function () {
+
+
+  $(window).scroll(function() {
     // console.log($(window).scrollTop() )
-    if($(window).scrollTop() > 130){
+    if ($(window).scrollTop() > 130) {
       $(".middle-header-wrapper").children(".container-fluid").addClass("fixed-top");
     }
-    if($(window).scrollTop() < 380){
+    if ($(window).scrollTop() < 380) {
       $("#scrollUp").hide();
     }
-    if($(window).scrollTop() > 380){
+    if ($(window).scrollTop() > 380) {
       $("#scrollUp").show();
-    }
-    else {
+    } else {
       $(".middle-header-wrapper").children(".container-fluid").removeClass("fixed-top");
     }
 
   });
-  if($(".pin").length != 0 ){
+  if ($(".pin").length != 0) {
     $(".pin").find("i.fa").removeClass("fa-chevron-right").addClass("fa-chevron-down");
   }
 
 
-//  Custom menu
-  $(".dropdown-toggle").mouseover(function(){
+  //  Custom menu
+  $(".dropdown-toggle").mouseover(function() {
     $(this).parent("li.expanded.dropdown").addClass("open");
   })
-  $(".dropdown-menu").mouseover(function(){
+  $(".dropdown-menu").mouseover(function() {
     $(this).parent("li.expanded.dropdown").addClass("open");
   })
-  $(".dropdown-menu").mouseleave(function(){
+  $(".dropdown-menu").mouseleave(function() {
     $(this).parent("li.expanded.dropdown").removeClass("open");
   })
-  $(".dropdown-toggle").mouseleave(function(){
+  $(".dropdown-toggle").mouseleave(function() {
     $(this).parent("li.expanded.dropdown").removeClass("open");
   })
- $(".sidebar-submenu-2").find(".sidebar-submenu-3").parents(".sidebar-submenu-2").addClass("three-level");
- $(".mobile-modal").hide();
 
- $(".btn-mobile-top").click(function(){
-   $(".mobile-modal").show();
-   $(".mobile-top").addClass("menu-toggle");
- })
- $(".mobile-modal").click(function(){
-   $(".mobile-modal").hide();
-   $(".mobile-top").removeClass("menu-toggle");
 
- })
- $(".close-icon").click(function(){
-   $(".mobile-top").removeClass("menu-toggle");
-   $(".mobile-modal").hide();
- })
+
+  $(".sidebar-submenu-2").find(".sidebar-submenu-3").parents(".sidebar-submenu-2").addClass("three-level");
+  $(".mobile-modal").hide();
+
+  $(".btn-mobile-top").click(function() {
+    $(".mobile-modal").show();
+    $(".mobile-top").addClass("menu-toggle");
+  })
+  $(".mobile-modal").click(function() {
+    $(".mobile-modal").hide();
+    $(".mobile-top").removeClass("menu-toggle");
+
+  })
+  $(".close-icon").click(function() {
+    $(".mobile-top").removeClass("menu-toggle");
+    $(".mobile-modal").hide();
+  })
 })(window.jQuery, window.Drupal);