Smartmenus Example

Attempting to expand the menu when mobile

by Mark Kneisler

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/addons/bootstrap/jquery.smartmenus.bootstrap.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/jquery.smartmenus.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.smartmenus/1.0.0/addons/bootstrap/jquery.smartmenus.bootstrap.js"></script>
<body id="app-layout">
  <div class="w3-theme-d4 row">
    <div id="heading_image" class="col-sm-3">
      <a href="/" title="Recordly">
        <img style="width: 205px" src="\images\Recordly-Logo-white.png"></img>
      </a>
    </div>
    <div id="heading_text" class="w3-padding-left col-sm-9">
      <h1 class="middle">Music Management System</h1>
    </div>
  </div>

  <!-- Navbar fixed top -->
  <div id="topnav" class="navbar navbar-default w3-theme" role="navigation">
    <div class="navbar-header">
      <button id="navButton" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand w3-theme" href="#" onclick="showState()">Recordly</a>
    </div>
    <div class="navbar-collapse collapse">

      <!-- Left nav -->
      <ul id="leftnav" class="nav navbar-nav">
        <li>
          <a href="#" id="music" title="Display music information" class="w3-theme  w3-theme-d3">
		Music
					<span...

CSS

.w3-table tr td {
  vertical-align: middle !important;
}

.navbar {
  border: 0 !important;
}

.dropdown-menu {
  padding: 0 !important;
}

.panel-heading {
  font-size: 20px;
}

.footer {
  height: 30px;
  font-size: 12px;
}

.footer .row {
  padding-top: 6px;
}

.navbar-fixed-top .navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
}

.underline {
  text-decoration: underline;
}

.w3-theme,.w3-hover-theme:hover {color:#fff !important;background-color:#2196F3 !important}
.w3-theme-light,.w3-hover-theme-light:hover {color:#000 !important;background-color:#E3F2FD !important}
.w3-theme-dark,.w3-hover-theme-dark:hover {color:#fff !important;background-color:#0D47A1 !important}
.w3-text-theme {color:#2196F3 !important}
.w3-theme-l5,.w3-hover-theme-l5:hover {color:#000 !important;background-color:#E3F2FD !important}
.w3-theme-l4,.w3-hover-theme-l4:hover {color:#000 !important;background-color:#BBDEFB !important}
.w3-theme-l3,.w3-hover-theme-l3:hover {color:#000 !important;background-color:#90CAF9 !important}
.w3-theme-l2,.w3-hover-theme-l2:hover {color:#000 !important;background-color:#64B5F6 !important}
.w3-theme-l1,.w3-hover-theme-l1:hover {color:#fff !important;background-color:#42A5F5 !important}
.w3-theme-d1,.w3-hover-theme-d1:hover {color:#fff !important;background-color:#1E88E5 !important}
.w3-theme-d2,.w3-hover-theme-d2:hover {color:#fff !important;background-color:#1976D2 !important}
.w3-theme-d3,.w3-hover-theme-d3:hover {color:#fff !important;background-color:#1565C0 !important}
.w3-theme-d4,.w3-hover-theme-d4:hover {color:#fff !important;background-color:#0D47A1 !important}
.w3-theme-action {color:#fff !important;background-color:#1565C0 !important}

JavaScript

$(function() {
  var navButton = $('#navButton');
  var topnav = $('#topnav');
  var leftnav = $('#leftnav');
  var rightpnav = $('#rightnav');

  navButton.click(function() {
    alert('In navButton click');
    var activeItem = leftnav.find('a.w3-theme-l3');
    if (!activeItem.is(":visible")) {
      alert('attempting itemActivate');
      leftnav.smartmenus("itemActivate", activeItem);
    }
  }).click();


  leftnav.bind('show.smapi', function(e, menu) {
    alert('In leftnav show');
    var activeItem = leftnav.find('a.w3-theme-l3');
    alert('attempting itemActivate');
    leftnav.smartmenus('itemActivate', activeItem);
  });

  fixHeading();

  $(window).scroll(function() {
    fixTopNav();
  });

  $(window).resize(function() {
    fixHeading();
    fixTopNav();
    fixSwipeBar();
  });

  $(window).on({
    'touchmove': function() {
      fixTopNav();
    }
  });

  $(window).load(function() {
    fixHeading();
    fixTopNav();
    fixSwipeBar();

    var setFocusId = $("#setFocusId");
    if (setFocusId) {
      $("#" + setFocusId.val()).focus();
    }
  });
});

function fixSwipeBar() {
  $("table").each(function() {
    if ($(this).width() > $(this).parent().width()) {
      $("[id^=" + $(this).attr("id") + "Swipe]").addClass("w3-show");
    } else {
      $("[id^=" + $(this).attr("id") + "Swipe]").removeClass("w3-show");
    }
  })
}

function fixHeading() {
  var headingImage = $("#heading_image");
  var headingText = $("#heading_text");
  if (headingText.offset().top > headingImage.offset().top) {
    $("#heading_text").height("auto");
  } else {
    $("#heading_text").height($("#heading_image").height());
  }
}

function fixTopNav() {
  var topNav = $('#topnav');
  var headingImage = $("#heading_image");
  var headingText = $("#heading_text");
  var top = $(window).scrollTop();
  var width = $(window).width();
  if (headingText.offset().top > headingImage.offset().top) {
    var topOffset = headingImage.height() + headingText.height();
  } else...