visual tweaks for hierarchical menus

michmech · May 12, 2017 · 12b4bcc · 12b4bcc
1 parent 54078e8
commit 12b4bcc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/xonomy.css b/xonomy.css
@@ -153,10 +153,13 @@
 
 /*When the pop-up box functions as menu or picker*/
 #xonomyBubble.nerd #xonomyBubbleContent div.menu { margin: -5px; max-height: 250px; overflow-y: auto; white-space: nowrap; }
-#xonomyBubble.nerd #xonomyBubbleContent div.submenu { position: absolute; display: none; }
-#xonomyBubble.nerd #xonomyBubbleContent div.menuItem:hover div { position: relative; padding: 4px; display: block; }
-#xonomyBubble.nerd #xonomyBubbleContent div.submenu div.menuItem:hover { background: #fbf4b8; }
-#xonomyBubble.nerd #xonomyBubbleContent div.menuItem { padding: 8px 20px 7px 10px; border-top: 1px solid #dddddd; cursor: pointer; margin-top: -1px; }
+#xonomyBubble.nerd #xonomyBubbleContent div.menuItem { padding: 8px 20px 7px 10px; border-top: 1px solid #dddddd; cursor: pointer; margin-top: -1px; background-color: #ffffff;}
+#xonomyBubble.nerd #xonomyBubbleContent div.menuItem div.menuLabel {margin: -8px -20px -7px -10px; padding: 8px 20px 7px 30px; background-color: #ffffff; background-image: url(plus.gif); background-position: 10px center; background-repeat: no-repeat; font-weight: bold;}
+#xonomyBubble.nerd #xonomyBubbleContent div.menuItem div.menuLabel:hover {background-color: #ffffcc;}
+#xonomyBubble.nerd #xonomyBubbleContent div.submenu { margin: 0px -20px -7px -10px; display: none; }
+#xonomyBubble.nerd #xonomyBubbleContent div.submenu div.menuItem { padding-left: 30px; }
+#xonomyBubble.nerd #xonomyBubbleContent div.menuItem.expanded div.menuLabel {background-image: url(minus.gif);}
+#xonomyBubble.nerd #xonomyBubbleContent div.menuItem.expanded > div.menuLabel {margin-bottom: 0px; padding-bottom: 7px;}
 #xonomyBubble.nerd #xonomyBubbleContent span.techno { font-family: monospace; font-size: 0.9rem; }
 #xonomyBubble.nerd #xonomyBubbleContent span.techno span.punc {color: #669acc; }
 #xonomyBubble.nerd #xonomyBubbleContent span.techno span.atName { color: #ff4455; }
@@ -351,10 +354,13 @@
 
 /*When the pop-up box functions as menu or picker*/
 #xonomyBubble.laic #xonomyBubbleContent div.menu { margin: -10px; max-height: 250px; overflow-y: auto; white-space: nowrap; }
-#xonomyBubble.laic #xonomyBubbleContent div.submenu { position: absolute; display: none; }
-#xonomyBubble.laic #xonomyBubbleContent div.menuItem:hover div { position: relative; padding: 4px; display: block; }
-#xonomyBubble.laic #xonomyBubbleContent div.submenu div.menuItem:hover { background: #fbf4b8; }
-#xonomyBubble.laic #xonomyBubbleContent div.menuItem { padding: 10px 20px 10px 10px; border-top: 1px solid #dddddd; cursor: pointer; margin-top: -1px; }
+#xonomyBubble.laic #xonomyBubbleContent div.menuItem { padding: 10px 20px 10px 10px; border-top: 1px solid #dddddd; cursor: pointer; margin-top: -1px; background-color: #ffffff;}
+#xonomyBubble.laic #xonomyBubbleContent div.menuItem div.menuLabel {margin: -8px -20px -7px -10px; padding: 8px 20px 7px 30px; background-color: #ffffff; background-image: url(plus.gif); background-position: 10px center; background-repeat: no-repeat; font-weight: bold;}
+#xonomyBubble.laic #xonomyBubbleContent div.menuItem div.menuLabel:hover {background-color: #f6f6f6;}
+#xonomyBubble.laic #xonomyBubbleContent div.submenu { margin: 0px -20px -7px -10px; display: none; }
+#xonomyBubble.laic #xonomyBubbleContent div.submenu div.menuItem { padding-left: 30px; }
+#xonomyBubble.laic #xonomyBubbleContent div.menuItem.expanded div.menuLabel {background-image: url(minus.gif);}
+#xonomyBubble.laic #xonomyBubbleContent div.menuItem.expanded > div.menuLabel {margin-bottom: 0px; padding-bottom: 7px;}
 #xonomyBubble.laic #xonomyBubbleContent .techno { font-family: monospace; font-size: 0.85rem; color: #444444; }
 #xonomyBubble.laic #xonomyBubbleContent .techno span.atName { font-family: Verdana, sans-serif; font-weight: bold; color: #6385bf; }
 #xonomyBubble.laic #xonomyBubbleContent .techno span.atValue { font-family: monospace; font-size: 0.75rem; color: #444444; }

diff --git a/xonomy.js b/xonomy.js
@@ -983,6 +983,11 @@ Xonomy.wyc=function(url, callback){ //a "when-you-can" function for delayed rend
 	return "<span class='wyc' id='"+wycID+"'></span>";
 };
 
+Xonomy.toggleSubmenu=function(menuItem){
+	var $menuItem=$(menuItem);
+	if($menuItem.hasClass("expanded")){ $menuItem.removeClass("expanded"); $menuItem.find(".submenu").first().slideUp("fast"); }
+	else { $menuItem.addClass("expanded"); $menuItem.find(".submenu").first().slideDown("fast"); };
+}
 Xonomy.internalMenu=function(htmlID, items, harvest, getter, indices) {
 	indices = indices || [];
 	var fragments = items.map(function (item, i) {
@@ -994,7 +999,7 @@ Xonomy.internalMenu=function(htmlID, items, harvest, getter, indices) {
 			indices.push(i);
 			if (item.menu) {
 				html+="<div class='menuItem'>";
-				html+="<div class='menuLabel'>"+Xonomy.formatCaption(Xonomy.textByLang(item.caption(jsMe)))+"</div>";
+				html+="<div class='menuLabel' onclick='Xonomy.toggleSubmenu(this.parentNode)'>"+Xonomy.formatCaption(Xonomy.textByLang(item.caption(jsMe)))+"</div>";
 				html+=Xonomy.internalMenu(htmlID, item.menu, harvest, getter, indices);
 				html+="</div>";
 			} else {