Expandable Menu from Bottom Right

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <!-- Adding loads of content -->
      Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla.
      Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam
      eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis
      parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa
      justo sit amet risus. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper
      nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl
      consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur....

CSS

html,
body {
  height: 100%;
}

body.disableScroll {
  overflow: hidden;
}

.header {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 10;
}

.nav-toggle {
  width: 50px;
  height: 50px;
  font-size: 1.5em;
  text-align: center;
  border-radius: 50%;
  background: #00abd1;
  color: #ffffff;
  cursor: pointer;
  overflow: hidden;
}

.nav-toggle .fa {
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  opacity: 1;
  visibility: visible;
  transition: all 0.25s ease-out;
}

.nav-toggle.active .fa-close,
.nav-toggle.active .fa-bars {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.nav-toggle .fa-close {
  line-height: 49px;
  opacity: 0;
  visibility: hidden;
}

.nav-toggle.active .fa-close {
  opacity: 1;
  visibility: visible;
}

.nav-toggle.active .fa-bars {
  opacity: 0;
  visibility: hidden;
}

.nav-toggle.active {
  background-color: #fff;
}

.nav-toggle.active .fa {
  color: #00abd1;
}

.nav-circle-holder {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 50px;
  height: 50px;
  overflow: visible;
  z-index: 2;
}

.nav-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -5px;
  margin-bottom: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00abd1;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  transition: all 0.25s ease-out;
}

.nav-circle.active {
  width: 400vh;
  height: 400vh;
}

.nav-list-holder {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  overflow: auto;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}

.nav-list-holder.active {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.nav-list-holder .nav-list {
  width: 100%;
  margin: 0;
  padding: 10% 80px 10% 10%;
  list-style: none;
  opacity: 0;
  -webkit-transform: translate3d(-16px, 0, 0);
  transform:...

JavaScript

$.fn.hasScrollBar = function() {
  return this.get(0).scrollHeight > this.height();
}

$('.nav-toggle').on('click', function() {
  var bodyHeight = $('body').outerHeight();
  var listHeight = $('.nav-list').outerHeight();

  $('body').toggleClass('disableScroll');
  $(this).toggleClass('active');
  $('.nav-circle').toggleClass('active');
  $('.nav-list-holder').toggleClass('active').scrollTop(0);

  if ($('body').hasScrollBar() && $('body').hasClass('disableScroll')) {
    $('.header').css({
      'right': '30px'
    });
  } else {
    $('.header').css({
      'right': '15px'
    });
  }
});