Support nested menus (nested uls)

VPenkovgh-4

app/css/okayNav-base.css

@@ -8,18 +8,15 @@ body.okayNav-loaded {
 .okayNav-header {
   position: fixed;
   top: 0;
-  display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   flex-direction: row;
   width: 100%;
   padding: 0 15px;
-  -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
-  -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
 }
@@ -30,22 +27,22 @@ body.okayNav-loaded {
       -ms-user-select: none;
           user-select: none;
 }
-.okayNav ul {
+.okayNav > ul {
   /* We want two navigations - one hidden and one visible */
   float: left;
 }
-.okayNav a {
+.okayNav > ul > li > a {
   position: relative;
   z-index: 1;
 }
 .okayNav__nav--visible {
   overflow: hidden;
   white-space: nowrap;
 }
-.okayNav__nav--visible li {
+.okayNav__nav--visible > li {
   display: inline-block;
 }
-.okayNav__nav--visible a {
+.okayNav__nav--visible > li > a {
   /* Link styling for the visible part of the nav */
   display: block;
   padding: 15px 15px;
@@ -62,30 +59,25 @@ body.okayNav-loaded {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.okayNav__nav--invisible a {
+.okayNav__nav--invisible > li > a {
   display: block;
   width: 240px;
   padding: 15px;
   background: #fff;
 }
 .okayNav__nav--invisible.nav-left {
   left: 0;
-  -webkit-transform: translateX(-100%);
-          transform: translateX(-100%);
+  transform: translateX(-100%);
 }
 .okayNav__nav--invisible.nav-right {
   right: 0;
-  -webkit-transform: translateX(100%);
-          transform: translateX(100%);
+  transform: translateX(100%);
 }
 .okayNav__nav--invisible.transition-enabled {
-  transition: -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
   transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
-  transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
 }
 .okayNav__nav--invisible.nav-open {
-  -webkit-transform: translateX(0);
-          transform: translateX(0);
+  transform: translateX(0);
 }
 /* Kebab icon */
 .okayNav__menu-toggle {
@@ -96,9 +88,7 @@ body.okayNav-loaded {
   width: 40px;
   height: 20px;
   cursor: pointer;
-  transition: -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
   transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
-  transition: transform 400ms cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 400ms cubic-bezier(0.55, 0, 0.1, 1);
 }
 .okayNav__menu-toggle.okay-invisible {
   position: absolute;
@@ -125,14 +115,12 @@ body.okayNav-loaded {
 }
 .okayNav__menu-toggle span:nth-child(2) {
   top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
+  transform: translateY(-50%);
 }
 .okayNav__menu-toggle span:nth-child(3) {
   bottom: 0;
 }
 .okayNav__menu-toggle.icon--active {
   /* Kebab icon when off-screen nav is open */
-  -webkit-transform: rotate(90deg);
-          transform: rotate(90deg);
+  transform: rotate(90deg);
 }

app/js/jquery.okayNav.js

@@ -347,10 +347,10 @@
         },
 
         getVisibleItemCount: function() {
-            return $('li', self.nav_visible).length;
+            return $('> li', self.nav_visible).length;
         },
         getHiddenItemCount: function() {
-            return $('li', self.nav_invisible).length;
+            return $('> li', self.nav_invisible).length;
         },
 
         recalcNav: function() {
@@ -386,7 +386,7 @@
         },
 
         _collapseNavItem: function() {
-            var $last_child = $('li:last-child', self.nav_visible);
+            var $last_child = $('> li:last-child', self.nav_visible);
             self.last_visible_child_width = $last_child.outerWidth(true);
             self.document.trigger('okayNav:collapseItem', $last_child);
             $last_child.detach().prependTo(self.nav_invisible);
@@ -398,24 +398,24 @@
         },
 
         _expandNavItem: function() {
-            var $first = $('li:first-child', self.nav_invisible);
+            var $first = $('> li:first-child', self.nav_invisible);
             self.document.trigger('okayNav:expandItem', $first);
             $first.detach().appendTo(self.nav_visible);
             self.options.itemDisplayed.call();
         },
 
         _expandAllItems: function() {
-            $('li', self.nav_invisible).detach().appendTo(self.nav_visible);
+            $('> li', self.nav_invisible).detach().appendTo(self.nav_visible);
             self.options.itemDisplayed.call();
         },
 
         _collapseAllItems: function() {
-            $('li', self.nav_visible).detach().appendTo(self.nav_invisible);
+            $('> li', self.nav_visible).detach().appendTo(self.nav_invisible);
             self.options.itemHidden.call();
         },
 
         destroy: function() {
-            $('li', self.nav_invisible).appendTo(self.nav_visible);
+            $('> li', self.nav_invisible).appendTo(self.nav_visible);
             self.nav_invisible.remove();
             self.nav_visible.removeClass('okayNav__nav--visible');
             self.toggle_icon.remove();

app/less/okayNav-base.less

@@ -37,32 +37,40 @@ body.okayNav-loaded {overflow-x: hidden}
 		user-select: none;
 	}
 
-	ul {
-		/* We want two navigations - one hidden and one visible */
-		float: left
-	}
+  >ul {
+    /* We want two navigations - one hidden and one visible */
+    float: left;
+
+    >li {
+
+      >a {
+        position: relative;
+        z-index: 1;
+      }
+
+    }
+
+  }
 
-	a {
-		position: relative;
-		z-index: 1;
-	}
 }
 
 .okayNav__nav--visible {
 	overflow: hidden;
 
 	white-space: nowrap;
 
-	li {display: inline-block;}
+  >li {
+    display: inline-block;
 
-	a {
-		/* Link styling for the visible part of the nav */
-		display: block;
+    >a {
+      /* Link styling for the visible part of the nav */
+      display: block;
 
-		padding: @oknav-links-padding-y @oknav-links-padding-x;
+      padding: @oknav-links-padding-y @oknav-links-padding-x;
 
-		transition: color @oknav-transition-speed @oknav-transition-curve;
-	}
+      transition: color @oknav-transition-speed @oknav-transition-curve;
+    }
+  }
 
     &:empty {
         & ~ .okayNav__menu-toggle {top: 0}
@@ -78,14 +86,16 @@ body.okayNav-loaded {overflow-x: hidden}
 	overflow-y: scroll;
 	-webkit-overflow-scrolling: touch;
 
-	a {
-		display: block;
+  >li {
+    >a {
+      display: block;
 
-		width: 240px;
-		padding: 15px;
+      width: 240px;
+      padding: 15px;
 
-		background: #fff;
-	}
+      background: #fff;
+    }
+  }
 
 	&.nav-left {
 		left: 0;