Mobile fly-out menu, with CSS

In this example below you will see how to do a Mobile fly-out menu, with CSS with some HTML / CSS and Javascript

Converts a standard menu layout, to a fly-out mobile menu.Tip: Click or tap anywhere to hide the menu once it is open.

Thumbnail
This awesome code was written by chrishutchinson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright chrishutchinson ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mobile fly-out menu, with CSS</title>
  
  
  <link rel='stylesheet prefetch' href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header>
  <nav>
    <a href="#" class="title">
      Site Title
    </a>
    <ul class="menu">
      <li class="menu-item">
        <a href="#"><i class="fa fa-home"></i> Home</a>
      </li>
      <li class="menu-item">
        <a href="#">About</a>
      </li>
      <li class="menu-item">
        <a href="#">Contact</a>
      </li>
      <li class="menu-item">
        <a href="#">Privacy</a>
      </li>
    </ul>
    <a href="#" class="mobile-menu" data-action="toggleMenu">
      <i class="fa fa-bars" data-action="toggleMenu"></i> MENU
    </a>
  </nav>
</header>

<div class="container">
  <h1>Mobile fly-out menu, with CSS</h1>
  <p>Converts a standard menu layout, to a fly-out mobile menu.</p>
  <p><em>Tip: Click or tap anywhere to hide the menu once it is open.</em></p>
  <ol>
    <li>View this at < 600px width.</li>
    <li>Click the 'MENU' button in the nav.</li>
    <li>Watch the menu fly out from the right.</li>
  </ol>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/chrishutchinson/mobile-fly-out-menu-with-css-exLGo */
/**
* Define our transition mixin just to save time later
*/
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

nav {
  width: 100%;
  background: #eaeaea;
  display: table;
}
nav a {
  color: #000;
  text-decoration: none;
}
nav a.title {
  float: left;
  padding: 10px;
  font-weight: bold;
}
nav a:hover {
  background-color: #d1d1d1;
}
nav ul.menu {
  float: right;
  margin: 0;
  padding: 0;
  list-style-type: none;
  letter-spacing: -4px;
}
nav ul.menu li.menu-item {
  letter-spacing: normal;
  display: inline-block;
}
nav ul.menu li.menu-item a {
  padding: 10px;
  display: block;
}
nav a.mobile-menu {
  display: none;
  float: right;
  padding: 10px;
}

div.container {
  padding: 20px;
}

@media screen and (max-width: 600px) {
  nav ul.menu {
    background: #3a3a3a;
    width: 230px;
    height: 100%;
    position: fixed;
    top: 0;
    right: -230px;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
  }
  nav ul.menu li.menu-item {
    display: block;
    border-bottom: 1px solid #353535;
  }
  nav ul.menu li.menu-item a {
    color: #FFF;
  }
  nav ul.menu li.menu-item a:hover {
    background: #212121;
  }
  nav a.mobile-menu {
    display: block;
  }

  body.nav-open {
    margin-left: -230px;
    margin-right: 230px;
  }
  body.nav-open nav ul.menu {
    right: 0;
  }
}


/*Downloaded from https://www.codeseek.co/chrishutchinson/mobile-fly-out-menu-with-css-exLGo */
$(document).ready(function(){
  /**
  * Define a set of actions, keeps our jQuery neater
  */
  var actions = {
    toggleMenu: function() {
      $('body').toggleClass('nav-open');
    },
    closeMenu: function() {
      $('body').removeClass('nav-open');
    }
  };

  // When any element with a data-action attribute is clicked, we run the action if it exists
  $('body').on('click', '[data-action]', function() {
    var action = $(this).data('action');
    if (action in actions) {
      actions[action].apply(this, arguments);
    }
  });
  
  // Handle body taps to close the menu
  $('html').on('touchstart', 'body.nav-open', function(e){
    if(!$(e.target).is('a')){
      actions.closeMenu();
    }
  });

  // Handle body clicks to close the menu
  $('html').on('click', 'body.nav-open', function(e){
    if(!$(e.target).is('a')){
      actions.closeMenu();
    }
  });
});

Comments