LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Mobile menu demo

Click the button above to see the mobile menu in action!

The menu functionality was inspired by the Settings app in iOS.

This implementation uses some jQuery and flexbox. The orginal code was written for a WordPress theme, so absolute positioning was used (rather than fixed positioning - which is easier) to avoid conflicts with the admin bar (when the user is logged-in).

CSS
body {
  background:#aaccff;
}
* {
  box-sizing: border-box; /* Because I can! */
}
.mobile {
  background:#fff;
  border:2px solid black;
  border-radius:8px;
  height:480px;
  margin:10vh auto;
  overflow:hidden; /* NB: Remove this overflow property if you want to get a better idea of what is happening "under the hood" */
  position:relative;
  width:320px;
}
.mobile-controls {
  background:#000;
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
  padding:10px;
}
.mobile-controls button {
  background:none;
  border:1px solid #fff;
  border-radius:8px;
  color:#fff;
  height:40px;
  padding:0 15px;
}
button:hover {
  cursor:pointer;
}
.mobile-controls button:hover {
  background:#fff;
  color:#000;
}
.mobile-controls .back-button {
  display:none;
}
.mobile-menu {
  background:#ffc;
  display:none;
  height:100%;
  left:0;
  position:absolute;
  width:100%;
  z-index:10;
}
ul {
  margin:0;
  padding: 0;
  width: 100%;
  position: absolute;
  transition: 0.25s;
}
li {
  border-bottom: 1px solid black;
  display: flex;
  justify-content: space-between;
  list-style: none;
}
li a {
  color:#000;
  flex:3;
  padding:10px;
  text-decoration:none;
}
li button {
  background:none;
  border:0;
  flex:1;
  text-align:right;
  padding:10px;
}

li:hover {
  background: #2ecc71;
}
li:hover > a {
  color:#fff;
}
li:hover > button {
  color:#fff;
}
div > ul {
  top:0;
  left:0;
}
div > ul ul {
  display: none;
  top:0;
  left:100%;
}
/* Content styles below here */
section {
  line-height:1.5;
  padding:20px;
}
h1 {
  font-size:1.5rem;
}
JS
$(document).ready(function () {
  
  // Variable declaration...
  var left, width, newLeft;
  
  // Add the "top-menu" class to the top level ul...
  $('.mobile-menu').children('ul').addClass('top-menu');
  
  // Add buttons to items that have submenus...
  $('.has_child_menu').append('');
  
  // Mobile menu toggle functionality
    $('.menu-toggle').on('click', function () {
        
        // Detect whether the mobile menu is being displayed...
        display = $('.mobile-menu').css("display");
        
        if (display === 'none') {
            
            // Display the menu...
            $('.mobile-menu').css("display", "block");
            
        } else {
            
            // Hide the mobile menu...
            $('.mobile-menu').css("display", "none");
            
            // and reset the mobile menu...
            $('.current-menu').removeClass('current-menu');
            $('.top-menu').css("left", "0");
            $('.back-button').css("display", "none");
        }
    });

  // Functionality to reveal the submenus...
  $('.arrow').on('click', function () {

    // The .current-menu will no longer be current, so remove that class...
    $('.current-menu').removeClass('current-menu');

    // Turn on the display property of the child menu
    $(this).siblings('ul').css("display", "block").addClass('current-menu');

    left = parseFloat($('.top-menu').css("left"));
    width = Math.round($('.mobile').width());
    newLeft = left - width;

    // Slide the new menu leftwards (into the .mobile viewport)...
    $('.top-menu').css("left", newLeft);
    
    // Also display the "back button" (if it is hidden)...
    if ($('.back-button').css("display") === "none") {
        $('.back-button').css("display", "flex");
    }

  });

  // Functionality to return to parent menus...
  $('.back-button').on('click', function () {
    
    // Hide the back button (if the current menu is the top menu)...
    if ($('.current-menu').parent().parent().hasClass('top-menu')) {
        $('.back-button').css("display", "none");
    }

    left = parseFloat($('.top-menu').css("left"));
    width = Math.round($('.mobile').width());
    newLeft = left + width;

    // Slide the new menu leftwards (into the .mobile viewport)...
    $('.top-menu').css("left", newLeft);

    // Allow 0.25 seconds for the css transition to finish...
    window.setTimeout(function () {

      // Hide the out-going .current-menu...
      $('.current-menu').css("display", "none");

      // Add the .current-menu to the new current menu...
      $('.current-menu').parent().parent().addClass('current-menu');

      // Remove the .current-menu class from the out-going submenu...
      $('.current-menu .current-menu').removeClass('current-menu');

    }, 250);

  });

});

Description

A multi-level mobile menu inspired by the behaviour of the iOS Settings app. When menu buttons are clicked, the menu slides left to reveal the submenu. Originally coded for a WordPress theme, the menu uses absolute positioning, so that the admin bar does not cause problems (if the user is logged-in). The menu also uses flexbox and jQuery.
Term
Wed, 12/27/2017 - 06:57

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv