add submenu and fix css

sites/default/settings.php

@@ -767,9 +767,13 @@
    include $app_root . '/' . $site_path . '/settings.local.php';
  }
 $databases['default']['default'] = array (
-  'database' => 'estore',
-  'username' => 'root',
-  'password' => 'root',
+  // 'database' => 'estore',
+  // 'username' => 'root',
+  // 'password' => 'root',
+
+  'database' => 'invi_estorequ',
+  'username' => 'user',
+  'password' => '12345',
   'prefix' => '',
   'host' => 'localhost',
   'port' => '3306',

themes/contrib/bootstrap/templates/menu/menu.html.twig

@@ -38,7 +38,7 @@
         {% set link_title = item.title %}
         {% set link_attributes = item.link_attributes %}
         {% if menu_level == 0 and item.is_expanded and item.below %}
-          {% set link_title %}{{ link_title }} <span class="caret"></span>{% endset %}
+          {% set link_title %}{{ link_title }}<i class="fa fa-chevron-right" aria-hidden="true"></i>{% endset %}
           {% set link_attributes = link_attributes.addClass('dropdown-toggle').setAttribute('data-toggle', 'dropdown') %}
         {% endif %}
         {# Must use link() here so it triggers hook_link_alter(). #}

themes/contrib/estore/css/styles.css

@@ -14,6 +14,52 @@ html {
 }
 
 /* invi custom */
+header.navbar .category-menu ul.menu ul.dropdown-menu li:hover{
+  background: white ;
+}
+header.navbar .category-menu ul.menu ul.dropdown-menu li{
+  border: none ;
+}
+.menu--category-menu  .open .dropdown-menu { /* menu lv2 */
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    top: 0;
+    left: 97%;
+    /* width: 100%; */
+    text-align: center;
+    background: white !important;
+    /* height: 169%; */
+}
+.menu--category-menu .open .dropdown-menu li {
+  width: 150px;
+}
+.menu--category-menu .open .dropdown-menu li a{
+  font-weight: 600;
+
+}
+.menu--category-menu  .open .dropdown-menu  .dropdown-menu{/* menulv 3 */
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    top: 5px;
+    /* height: 102%; */
+    border: none;
+    left: 0;
+    position: relative;
+}
+.menu--category-menu  .open .dropdown-menu  .dropdown-menu li{/* menulv 3 */
+  padding: 5px 10px;
+  font-weight: 200;
+
+}
+.menu--category-menu  .open .dropdown-menu  .dropdown-menu li a{/* menulv 3 */
+      font-weight: 500;
+}
+.menu--category-menu  .open .dropdown-menu li {
+  color : red
+
+}
 .pin_be .navbar-nav>li.open>.dropdown-menu {
   display: flex;
     flex-direction: column;
@@ -47,9 +93,18 @@ header.navbar .main-menu ul.menu li.open ul a{
 
 header.navbar .category-menu ul.menu.litte-menu {
   height: 455px;
-  overflow: hidden;
+/* //  overflow: hidden; */
 }
 
+.menu--category-menu .dropdown-toggle i{
+  font-size: 14px;
+  font-weight: 300;
+  /* color: blue; */
+  /* float: right; */
+  top: 15px;
+  position: absolute;
+  right: 38px;
+}
 .more-category, .less-category {
   /* text-align: center; */
   text-transform: uppercase;
@@ -210,6 +265,7 @@ header .link_content a:hover {
   border: 1px solid #e94337;
   border-radius: 4px;
   padding: 5px 20px;
+      background: #e86c6c26;
 }
 
 .pin_be {
@@ -5123,8 +5179,8 @@ tbody.collapse.in {
   border-radius: 0;
   background-color: #fff;
   background-clip: padding-box;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  /* -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); */
+  /* box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); */
   font-size: 14px;
 }
 
@@ -10083,13 +10139,13 @@ header.navbar .category-menu ul.menu.hide-block-page {
 
 header.navbar .category-menu ul.menu li {
   position: relative;
-  padding: 0 20px;
+  /* padding: 0 20px; */
   border-bottom: 1px solid rgba(0, 0, 0, 0.06);
   line-height: 40px;
   text-transform: none;
   font-weight: 600;
   margin: 0 0px;
-  /* text-transform: uppercase; */
+  margin-left: 1px;
 }
 
 header.navbar .category-menu ul.menu li:hover {
@@ -10097,7 +10153,7 @@ header.navbar .category-menu ul.menu li:hover {
 }
 
 header.navbar .category-menu ul.menu li a {
-  padding: 0;
+  padding: 0 20px;
   color: #333;
 }
 
@@ -10168,7 +10224,12 @@ header.navbar .main-menu ul.menu li a {
   text-align: right;
   white-space: nowrap;
 }
-
+header.navbar .main-menu ul.menu li a i{
+  font-size: 12px;
+  line-height: 13px
+  font-weight: 400;
+  padding-left: 6px;
+}
 header.navbar .main-menu ul.menu li a:hover {
   color: #e94337;
 }

themes/contrib/estore/js/custom.js

@@ -10,17 +10,26 @@
     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++){
+      rightMenu.children('li').eq(i).hide();
+    }
   }
 
   $(".more-category").click(function() {
     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++){
+      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++){
+      rightMenu.children('li').eq(i).hide();
+    }
   })
   var checkHome = $(".estore-homepage-first");
   if ($(".toolbar-bar").length == 0){
@@ -38,15 +47,24 @@
     }
 
   });
+  if($(".pin").length != 0 ){
+    $(".pin").find("i.fa").removeClass("fa-chevron-right").addClass("fa-chevron-down");
+  }
 
 
   $(".dropdown-toggle").mouseover(function(){
-    $(".expanded.dropdown.first").addClass("open");
-
+    // $(this).parent("li.expanded.dropdown").click();
+    $(this).parent("li.expanded.dropdown").addClass("open");
+  })
+  $(".dropdown-menu").mouseover(function(){
+    $(this).parent("li.expanded.dropdown").addClass("open");
+  })
+  $(".dropdown-menu").mouseleave(function(){
+    $(this).parent("li.expanded.dropdown").removeClass("open");
   })
   $(".dropdown-toggle").mouseleave(function(){
-    $(".expanded.dropdown.first").removeClass("open");
+    // $(this).parent("li.expanded.dropdown").click();
+    $(this).parent("li.expanded.dropdown").removeClass("open");
   })
 
-  //  if(heightMenu > 400;)
 })(window.jQuery, window.Drupal);