Added .top-level support to mega menus (apply to li elements that sho…

…uld look like section headings). Example at top of section 2 mega menu.

demos/includes/menu-eng.inc

@@ -18,6 +18,11 @@ wet-boew.github.com/wet-boew/License-eng.txt / wet-boew.github.com/wet-boew/Lice
 </div></section></li>
 <li><section><h3><a href="section2/index-eng.html">Section 2</a></h3><div class="mb-sm">
 <div class="span-2">
+<ul>
+<li class="top-level"><a href="#">Item 2a</a></li>
+<li class="top-level"><a href="#">Item 2b</a></li>
+<li class="top-level"><a href="#">Item 2c</a></li>
+</ul>
 <section><h4><a href="#">Section 2.1</a></h4>
 <ul>
 <li><a href="#">Item 2.1.1</a></li>

demos/index-eng.html

@@ -379,8 +379,6 @@ <h1 id="wb-cont">Working examples</h1>
 </section>
 </div>
 
-<div id="mobiletest"></div>
-
 <dl id="gcwu-date-mod" role="contentinfo">
 <dt>Date modified:</dt><dd><span><time>2012-06-17</time></span></dd>
 </dl>

src/js/sass/menubar.scss

@@ -74,11 +74,6 @@
 			list-style-type:none;
 		}
 		li {
-			h3, h4 {
-				a:link, a:visited{
-					text-decoration: underline;
-				}
-			}
 			&,div{
 				display:block;
 				float:none;
@@ -89,6 +84,16 @@
 			a{
 				font-weight:400;
 			}
+			&.top-level{
+				margin-left:-15px;
+				margin-top:0.3em;
+				&:first-child{
+					margin-top:0;
+				}
+				a{
+					font-weight:700;
+				}
+			}
 		}
 	}
 	.expandicon{
@@ -116,7 +121,7 @@
 		border-radius:0 0 3px 3px;
 		-moz-border-radius:0 0 3px 3px;
 		-webkit-border-radius:0 0 3px 3px;
-		h2,h3,h4{
+		h2,h3,h4,.top-level{
 			font-size:1.2em;
 			font-weight:700;
 			margin:0;
@@ -148,10 +153,6 @@
 	}
 }
 
-.mb-sm-open > div > a{
-	font-size: 120%;
-}
-
 .mb-main-link{
 	background-color:#DDD;
 	border-top:1px solid #AAA;

src/js/workers/menubar.js

@@ -105,13 +105,13 @@
 
 			/* [Main] parse mega menu and establish all ARIA and Navigation classes */
 			$scope.find('ul.mb-menu > li').find('a:eq(0)').each(function (index, value) {
-				var $elm = $(value).addClass("knav-" + index + "-0-0"),
-					$childmenu = $elm.closest("li").find(".mb-sm");
+				var $elm = $(value).addClass('knav-' + index + '-0-0'),
+					$childmenu = $elm.closest('li').find('.mb-sm');
 				if ($childmenu.length > 0) {
-					$elm.attr("aria-haspopup", "true").addClass("mb-has-sm").wrapInner("<span class=\"expandicon\"><span class=\"sublink\"></span></span>");
-					$childmenu.attr({"role": "menu", "aria-expanded": "false", "aria-hidden": "true"}).find(":has(:header) ul").attr("role", "menu");
-					$elm.append("<span class=\"wb-invisible\">" + submenuHelp + "</span>");
-					$elm.closest("li").hoverIntent({
+					$elm.attr('aria-haspopup', 'true').addClass('mb-has-sm').wrapInner('<span class="expandicon"><span class="sublink"></span></span>');
+					$childmenu.attr({'role': 'menu', 'aria-expanded': 'false', 'aria-hidden': 'true'}).find(':has(:header) ul').attr('role', 'menu');
+					$elm.append('<span class="wb-invisible">' + submenuHelp + '</span>');
+					$elm.closest('li').hoverIntent({
 						over: function () {
 							return showsubmenu(this);
 						},
@@ -121,24 +121,27 @@
 						timeout: 500
 					});
 					/* now recurse all focusable to be able to navigate */
-					$childmenu.find("h3 a, h4 a, > div > a").each(function (i) {
-						var $this = $(this);
+					$childmenu.find('h3 a, h4 a, div.top-level > a, li.top-level a').each(function (i) {
+						var $this = $(this),
+							$parent = $this.parent();
 						$this.addClass("knav-" + index + "-" + (i + 1) + "-0");
-						$this.parent().next("ul").find("a").each(function (j) {
-							$(this).addClass("knav-" + index + "-" + (i + 1) + "-" + (j + 1));
-							return;
-						});
+						if ($parent.is('h3, h4')) {
+							$this.parent().next("ul").find("a").each(function (j) {
+								$(this).addClass("knav-" + index + "-" + (i + 1) + "-" + (j + 1));
+								return;
+							});
+						}
 						return;
 					});
-					$childmenu.find("> ul a, > div > ul a").each(function (i) {
+					$childmenu.find('> ul li, > div > ul li').filter(':not(.top-level)').children('a').each(function (i) {
 						$(this).addClass("knav-" + index + "-0-" + (i + 1));
 					});
 				}
 			});
 
 			/* if CSS is enabled we want to ensure a correct tabbing response */
 			if (pe.cssenabled) {
-				$scope.find(".mb-sm a").attr("tabindex", "-1");
+				$scope.find('.mb-sm a').attr('tabindex', '-1');
 			}
 
 			// Reattach $scope now that enhancements are complete

src/theme-gcwu-fegc/sass/includes/default-mobile.scss

@@ -441,6 +441,9 @@ img{
 	.top-level.ui-btn-corner-all {
 		border-radius:0.6em;
 	}
+	li.top-level div.ui-btn-inner {
+		padding-left:25px;
+	}
 	#gcwu-bc-in {
 		background:#DFDFDD;
 		background-image:-webkit-gradient(linear,left top,left bottom,from(#F0EFEF),to(#DFDFDD));