Bootstrap Snippet mobile menu using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="demo">
  <div class="demo__top"></div>
  <div class="demo__light"></div>
  <div class="demo__content">
    <div class="demo__menu page-active-1">
      <div class="demo__menu-item demo__menu-item-1 m--btn js-menuBtn" data-page="1">
        <span class="demo__menu-item-content">1</span>
      </div>
      <div class="demo__menu-item demo__menu-item-2" data-page="2">
        <span class="demo__menu-item-content">2</span>
      </div>
      <div class="demo__menu-item demo__menu-item-3" data-page="3">
        <span class="demo__menu-item-content">3</span>
      </div>
      <div class="demo__menu-item demo__menu-item-4" data-page="4">
        <span class="demo__menu-item-content">4</span>
      </div>
      <div class="demo__menu-item demo__menu-item-5" data-page="5">
        <span class="demo__menu-item-content">?!</span>
      </div>
    </div>
    <div class="demo__page demo__page-1 active">
      <h2 class="demo__page-heading">
        BMW i<span class="demo__page-heading-colored">8</span>
      </h2>
      <h3 class="demo__page-subheading">Concept</h3>
      <div class="demo__page-poly"></div>
    </div>
    <div class="demo__page demo__page-2">
      <h2 class="demo__page-heading">Page 2</h2>
      <div class="demo__page-poly"></div>
    </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1;
}
html, body {
  font-size: 62.5%;
  height: 100%;
}
body {
  background: -webkit-radial-gradient(circle, #2d4959 0%, #101821 100%);
  background: radial-gradient(circle, #2d4959 0%, #101821 100%);
}
.demo {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12.9rem;
  margin-top: -28rem;
  width: 25.8rem;
  height: 56rem;
  background: #FFFFFF;
  border-radius: 3.4rem;
  padding: 5rem 0;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.demo__top {
  position: absolute;
  left: 50%;
  margin-left: -2.2rem;
  top: 2.4rem;
  width: 4.4rem;
  height: 0.5rem;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function() {
  
  var animating = false;
  
  function menuToggle() {
    $(".demo__page, .demo__menu, .demo__light").toggleClass("menu-active");
    $(".js-menuBtn").toggleClass("m--btn");
    $(document).off("click", ".demo__content", closeNotFocusedMenu);
  };
  
  function closeNotFocusedMenu(e) {
    if (!$(e.target).closest(".demo__menu").length) {
      menuToggle();
      $(document).off("click", ".demo__content", closeNotFocusedMenu);
    }
  };
  
  $(document).on("click", ".js-menuBtn", function() {
    if (animating) return;
    menuToggle();
    $(document).on("click", ".demo__content", closeNotFocusedMenu);
  });
  
  $(document).on("click", ".demo__menu-item:not(.js-menuBtn)", function() {
    animating  = true;
    var $this = $(this);
    var page = +$this.data("page");
    $(".js-menuBtn").removeClass("js-menuBtn");
    $(".demo__page.active").removeClass("active");
    $this.addClass("js-menuBtn m--btn");
    $(".demo__page-"+page).addClass("active");
    $(".demo__page, .demo__menu, .demo__light").removeClass("menu-active");
    $(document).off("click", ".demo__content", closeNotFocusedMenu);
    setTimeout(function() {
      $(".demo__menu")[0].className = $(".demo__menu")[0].className.replace(/\bpage-active-.*\b/gi, "");
      $(".demo__menu").addClass("page-active-"+page);
      animating = false;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"mobile menu"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"mobile menu" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"mobile menu"
Bootstrap 3.0.0 Snippet by evarevirus