add current menu item effect to close #127

pixelgrade · May 19, 2020 · bf3c0f8 · bf3c0f8
1 parent 43b538d
commit bf3c0f8
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git a/src/scss/components/site-header/_menu.scss b/src/scss/components/site-header/_menu.scss
@@ -217,6 +217,25 @@ ul.menu,
          }
        }
 
+        li {
+          &[class*="current"] {
+            @include specific(3) {
+              a {
+                &:before {
+                  transform: scale3d(1, 1, 1);
+                }
+
+                &:hover {
+                  &:before {
+                    transform: scale3d(0, 1, 1);
+                    transform-origin: right;
+                  }
+                }
+              }
+            }
+          }
+        }
+
         .sub-menu {
           li:not(.social-menu-item) a:before {
             content: none;

diff --git a/style-rtl.css b/style-rtl.css
@@ -1127,6 +1127,13 @@ ul.menu,
   .site-header .site-header__menu > .menu > ul li:not(.social-menu-item):not([class*="weglot"]).menu-item-has-children a:before {
     width: calc(100% - 1.25em);
     left: 1.25em; }
+  .site-header .site-header__menu > ul.menu li[class*="current"][class][class][class] a:before,
+  .site-header .site-header__menu > .menu > ul li[class*="current"][class][class][class] a:before {
+    transform: scale3d(1, 1, 1); }
+  .site-header .site-header__menu > ul.menu li[class*="current"][class][class][class] a:hover:before,
+  .site-header .site-header__menu > .menu > ul li[class*="current"][class][class][class] a:hover:before {
+    transform: scale3d(0, 1, 1);
+    transform-origin: left; }
   .site-header .site-header__menu > ul.menu .sub-menu li:not(.social-menu-item) a:before,
   .site-header .site-header__menu > .menu > ul .sub-menu li:not(.social-menu-item) a:before {
     content: none; } }

diff --git a/style.css b/style.css
@@ -1127,6 +1127,13 @@ ul.menu,
   .site-header .site-header__menu > .menu > ul li:not(.social-menu-item):not([class*="weglot"]).menu-item-has-children a:before {
     width: calc(100% - 1.25em);
     right: 1.25em; }
+  .site-header .site-header__menu > ul.menu li[class*="current"][class][class][class] a:before,
+  .site-header .site-header__menu > .menu > ul li[class*="current"][class][class][class] a:before {
+    transform: scale3d(1, 1, 1); }
+  .site-header .site-header__menu > ul.menu li[class*="current"][class][class][class] a:hover:before,
+  .site-header .site-header__menu > .menu > ul li[class*="current"][class][class][class] a:hover:before {
+    transform: scale3d(0, 1, 1);
+    transform-origin: right; }
   .site-header .site-header__menu > ul.menu .sub-menu li:not(.social-menu-item) a:before,
   .site-header .site-header__menu > .menu > ul .sub-menu li:not(.social-menu-item) a:before {
     content: none; } }