Batch v2

by ethanpil

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/2.7.5/idangerous.swiper.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.min.js"></script>
<script src="http://delivr.cdnjs.net/swiper/2.6.1/plugins/hashnav/idangerous.swiper.hashnav.min.js"></script>
<script src="http://delivr.cdnjs.net/swiper/2.6.1/idangerous.swiper.min.js"></script>
<nav class="slide-menu">
    <ul>    
        <li class="close-menu"><i class="fa fa-times-circle"></i> Close</li>
        <li><a href="#slide-1"><i class="fa fa-beer"></i> Whats On Tap?</a></li>
        <li><a href="#slide-2"><i class="fa fa-map-marker"></i> Find Us</a></li>
        <li><a href="#slide-3"><i class="fa fa-phone"></i> Call Us</a></li>
        <li><a href="#slide-4"><i class="fa fa-cog"></i> Settings</a></li>
    </ul>
</nav>
<div class="swiper-container">
  <div class="swiper-wrapper">

      <div id="slide-0" data-hash="slide-0" class="swiper-slide">
          <img class="open-menu" src="http://static.squarespace.com/static/511a8e05e4b0d075328b6224/t/5337342ee4b07691c1908273/1396126766794/batch%20logo%20small%20jpg.jpg">
     </div>
          
      <div id="slide-1" data-hash="slide-1" class="swiper-slide">
          <ul id="brewlist"></ul>
      </div>

      <div id="slide-2" data-hash="slide-2" class="swiper-slide">
           Two
      </div>
      

      <div id="slide-3" data-hash="slide-3" class="swiper-slide"> 
          Three
      </div>
 

      <div id="slide-4" data-hash="slide-4" class="swiper-slide"> 
          4444
      </div>          
          
  </div>
</div>

SCSS

body { 
        margin: 0; 
        padding: 0;
        font-family: Sans-Serif;
}
nav.slide-menu {
    top: 0;
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    z-index: 99999;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-transition-duration: .25s;
    transition-duration: .25s;
    background: rgb(102, 26, 26);
    
    &.open {
         -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);       
    }
    ul { margin: 0; padding: 0; }
    li {
        display: block;
        text-align: left;
        border-bottom: solid 1px #3184a1;
        border-top: solid 1px #b5dbe9;
        padding: 10px 0 10px 10px;
    }
    li:first-child {
        border-top: none
    }
    li:last-child {
        border-bottom: none
    }
    li a {    
        font-size: 18px;
        text-decoration: none;
        color: white;
    }
    .close-menu {
        background-color: #9B4726;
        cursor: pointer;
        color: white;
    }
}

.swiper-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.swiper-slide {
  width: 100%;
  height: 100%;
}

img {
    max-width: 100%;
    height: auto;
}
#slide-0 { }

#slide-1 {
    img {
        max-height: 50%;
        margin: 0 auto;
        display: block;
    }
}
#slide-2 {
    button {
        
        width: 3%;
        position: absolute;
        top: 1%;
        bottom: 1%;
        z-index: 9999;
    }
    i { max-height: 5%; }
    iframe { z-index: 1; }
}
#slide-3 {  }

JavaScript

var public_spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1bnIENIbflrH-KvMfwYLPlRk59z_PdIJm0Xa-3YyPdD0/pubhtml?gid=0&single=true';

$(function(){
    
  //Load the external data
    var tabletop = Tabletop.init( { 
        key: public_spreadsheet_url, 
        callback: showInfo } );

    function showInfo(data) {

        $.each( tabletop.sheets("Sheet1").all(), function(i, brew) {
          var brew_li = $('<li><h4>' + brew.name + '</h4></li>')
          brew_li.append();
          brew_li.append("<p>" + brew.description + "</p>");
          brew_li.appendTo("#brewlist");
        })
        
    }    

    
  //Initialize the main swiper  
  var mySwiper = $('.swiper-container').swiper({
    mode:'horizontal',
    loop: false,
    hashNav:true,
    swipeToNext: false,
    swipeToPrev: false,
    onSlideChangeStart: function(swiper){
        $('.slide-menu').removeClass("open");
    }
  });

  //Process the main button clicks to swipe to page.
   $('.slide-menu a').click(function(){
       mySwiper.swipeTo($(this).data('target'));
   });
    
   
   $('.open-menu').click(function(){
       $('.slide-menu').toggleClass("open");
    });
   
    $('.close-menu').click(function(){
       $('.slide-menu').removeClass("open");
    });   
    
    
})