It works! With animations

2 files changed, 25 insertions, 10 deletions

diff --git a/book/src/main/resources/css/side-menu.css b/book/src/main/resources/css/side-menu.css
index cc23949..2a64f7f 100755
--- a/book/src/main/resources/css/side-menu.css
+++ b/book/src/main/resources/css/side-menu.css
@@ -302,13 +302,16 @@ code{
 .header-link{
     opacity: 0.05;
 }
-.collapsed.menu-item-list li.hide > ul{
-    opacity: 1;
+#menu .menu-item-list .hide ul li > a{
+    padding-top: 0px;
+    padding-bottom: 0px;
+}
+#menu .collapsed.menu-item-list li.hide > ul{
     overflow: hidden;
-    height: 0px;
 }
-.collapsed.menu-item-list .hide li > a{
+#menu .expanded.menu-item-list .hide li > a{
     background: none;
+    color: #777;
 }
 
 #menu .menu-item-list li.selected{
@@ -318,6 +321,15 @@ code{
     border-left: none;
 }
 
+.menu-item-list ul, .menu-item-list a{
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+    overflow: hidden
+}
+
 /*Override stuff from pure =/ it's not doing what I want*/
 .pure-menu li > ul{
     position:relative;
diff --git a/examples/demos/src/main/scala/scrollmenu/ScrollMenu.scala b/examples/demos/src/main/scala/scrollmenu/ScrollMenu.scala
index 19d69f4..83b5860 100644
--- a/examples/demos/src/main/scala/scrollmenu/ScrollMenu.scala
+++ b/examples/demos/src/main/scala/scrollmenu/ScrollMenu.scala
@@ -23,6 +23,7 @@ class ScrollSpy(structure: Tree[String],
         li(
           a(
             t.value,
+            display := (if (i == -1) "none" else "block"),
             href:="#"+Controller.munge(t.value),
             cls:="menu-item"
           )
@@ -90,21 +91,23 @@ class ScrollSpy(structure: Tree[String],
       val childIndexes = children.map(walkIndex)
       val childWin = childIndexes.indexWhere(_ != null)
       if (childWin != -1) t :: childIndexes(childWin)
-      else if (win) Nil
+      else if (win) List(t)
       else null
     }
 
     val winPath = walkIndex(domTrees)
     val winItem = winPath.last.value
     def walkTree(tree: Tree[MenuNode], indices: List[Tree[MenuNode]]): Unit = {
-      for(item <- indices){
-        item.value.frag.classList.remove("hide")
-        item.value.frag.classList.remove("selected")
-        item.value.frag.children(0).classList.add("pure-menu-selected")
-        for(child <- item.children){
+      for(Tree(MenuNode(frag, _, start, end), children) <- indices){
+        frag.classList.remove("hide")
+        frag.classList.remove("selected")
+        frag.children(1).asInstanceOf[dom.HTMLElement].style.maxHeight = (end - start + 1) * 44 + "px"
+        frag.children(0).classList.add("pure-menu-selected")
+        for(child <- children if child.value.frag != indices(1).value.frag){
           val childFrag = child.value.frag
           childFrag.children(0).classList.remove("pure-menu-selected")
           childFrag.classList.add("hide")
+          childFrag.children(1).asInstanceOf[dom.HTMLElement].style.maxHeight = "0px"
           if (child.value.start < winItem.start) childFrag.classList.add("selected")
           else childFrag.classList.remove("selected")
         }