- Responsive menu improved

Author: Marius Cramer

interface/web/themes/default/assets/javascripts/responsive.js

@@ -9,21 +9,26 @@ function loadPushyMenu() {
   // Hauptnavigation
   $('<ul />').appendTo($responsiveNavigation);
 
+  var $addto = false;
   $($mainNavigation).find('a').each(function () {
     var $item = $(this);
     var $activeClass = $item.hasClass('active') ? ' class="active"' : '';
+    var isactive = $activeClass != '' ? true : false;
 
     var capp = $item.attr('data-capp');
     if(capp) $activeClass += ' data-capp="' + capp + '"';
 
 	capp = $item.attr('data-load-content');
     if(capp) $activeClass += ' data-load-content="' + capp + '"';
 
-    $responsiveNavigation.find('ul').append($('<li><a href="' + $item.attr('href') + '"' + $activeClass + '><i class="icon ' + $item.data('icon-class') + '"></i>' + $item.text() + '</a></li>'));
+	var $newel = $('<li><a href="' + $item.attr('href') + '"' + $activeClass + '><i class="icon ' + $item.data('icon-class') + '"></i>' + $item.text() + '</a></li>');
+	if(isactive != '') $addto = $newel;
+    $responsiveNavigation.find('ul').append($newel);
   });
 
   // Subnavigation
-  $('<ul class="subnavi" />').appendTo($responsiveNavigation);
+  if(!$addto) $addto = $responsiveNavigation;
+  $('<ul class="subnavi" />').appendTo($addto);
 
   $($subNavigation).find('a').each(function () {
     var $item = $(this);
@@ -35,6 +40,9 @@ function loadPushyMenu() {
 	capp = $item.attr('data-load-content');
     if(capp) addattr += ' data-load-content="' + capp + '"';
 
+	capp = $item.hasClass('subnav-header');
+	if(capp) addattr += ' class="subnav-header"';
+	
     $responsiveNavigation.find('ul.subnavi').append($('<li><a href="' + $item.attr('href') + '"' + addattr + '>' + $item.text() + '</a></li>'));
   });
 };

interface/web/themes/default/assets/javascripts/responsive.min.js

@@ -7,7 +7,10 @@ html, body {
   .pushy ul.subnavi li {
     font-size: 12px; }
     .pushy ul.subnavi li a {
-      padding: 2px 10px; }
+      padding: 2px 10px;
+      font-weight: normal; }
+    .pushy ul.subnavi li a.subnav-header {
+      font-weight: bold; }
 .pushy a {
   padding: 10px;
   transition: color ease 500ms; }

interface/web/themes/default/assets/stylesheets/responsive.css

@@ -1,5 +1,5 @@
 <tmpl_loop name="nav_left">
-	<header><tmpl_if name="startpage"><a href="#" data-load-content="<tmpl_var name='startpage'>"></tmpl_if><tmpl_var name="title"><tmpl_if name="startpage"></a></tmpl_if></header>
+	<header><tmpl_if name="startpage"><a href="#" class="subnav-header" data-load-content="<tmpl_var name='startpage'>"></tmpl_if><tmpl_var name="title"><tmpl_if name="startpage"></a></tmpl_if></header>
 	<ul id="sub-navigation">
 	  <tmpl_loop name="items">
 	  <li<tmpl_if name="html_id"> id='<tmpl_var name="html_id">' </tmpl_if>>