Applied styling for active item in tiered menus

Author: Çağatay Çivici

components/menu/menu.css

@@ -162,6 +162,10 @@
     vertical-align: middle;
 }
 
+.ui-slidemenu .ui-slidemenuitem-active > .ui-submenu > ul {
+    display: block !important;
+}
+
 /** MegaMenu **/
 .ui-megamenu .ui-g {
     flex-wrap: nowrap;

components/slidemenu/slidemenu.ts

@@ -12,7 +12,7 @@ import {Router} from '@angular/router';
             [style.width.px]="menuWidth" [style.left.px]="root ? slideMenu.left : slideMenu.menuWidth" 
             [style.transitionProperty]="root ? 'left' : 'none'" [style.transitionDuration]="effectDuration + 'ms'" [style.transitionTimingFunction]="easing">
             <template ngFor let-child [ngForOf]="(root ? item : item.items)">
-                <li #listitem [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-menuitem-active':listitem==activeItem}">
+                <li #listitem [ngClass]="{'ui-menuitem ui-widget ui-corner-all':true,'ui-menu-parent':child.items,'ui-slidemenuitem-active':listitem==activeItem}">
                     <a [href]="child.url||'#'" class="ui-menuitem-link ui-corner-all" 
                         [ngClass]="{'ui-menuitem-link-parent':child.items,'ui-state-disabled':child.disabled}" 
                         (click)="itemClick($event, child, listitem)">

resources/themes/_theme.scss

@@ -347,6 +347,13 @@
                 border-color: transparent;
             }
         }
+        
+        &.ui-menuitem-active {
+            > .ui-menuitem-link {
+                @include hover-element();
+                border-color: transparent;
+            }
+        }
     }
 }
 

resources/themes/bootstrap/theme.css

@@ -1947,10 +1947,6 @@ body .ui-menu .ui-menu-list .ui-menuitem {
     -webkit-border-radius: 0;
     border-radius: 0;
 }
-body .ui-menu .ui-menu-list .ui-menuitem:hover {
-    background-color: #0275d8;
-    color: #ffffff;
-}
 body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
     padding: 0.5em 0.75em;
     width: 100%;
@@ -1960,7 +1956,8 @@ body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link {
     border-radius: 0;
     color: #373a3c;
 }
-body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link:hover {
+body .ui-menu .ui-menu-list .ui-menuitem .ui-menuitem-link:hover,
+body .ui-menu .ui-menu-list .ui-menuitem.ui-menuitem-active > .ui-menuitem-link {
     background-color: #0275d8;
     color: #ffffff;
 }

resources/themes/omega/theme.scss

@@ -451,6 +451,13 @@ $invalidInputBorderColor: #f44336;
                 color: #ffffff;
             }
         }
+        
+        &.ui-menuitem-active {
+            > .ui-menuitem-link {
+                background-color: #a6a6a6;
+                color: #ffffff;
+            }
+        }
     }
 }