rockymanobi/CSS3_Drawer_Navigation.md

## CSS3_Drawer_Navigation.md

      
    Raw
  

              CSS3_Drawer_Navigation.md
            
          
    Overview

A sample implementation of drawer navigation for Safari on iPad. The basic specification is following...

By pressing the navigation buttons, sub contents will appear from left and bottom of the window.
The image always fit the main window by using transition: scale, even when the main window is squashed by the sub contents.

GetStarted

You can just download this gist and open index.html with your browser, or upload them to some where, and access to index.html from your iPad.
Gist can be downloaded here.
caution

this sample codes are designed to work on iPad Safari, so if you try to look how they work on your desktop, you need to use webkit engine which is included in Chrome or Safari.
Requirements

Internet Connection is required since all the ext libs are located on CDN.

jQuery
Bootstrap3


## image.jpg

      
    Raw
  

              image.jpg
            
          
## index.html
<!DOCTYPE html>
<html>
<head>
  <title>TITLE</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

  <link href="./sample.css" media="all" rel="stylesheet">
</head>

<body class="">
  <nav>
    <button class="pull-btn">LEFT</button>
    <button class="pull-btn">LEFT</button>
    <button class="up-btn">BOTTOM</button>
    <button class="up-btn">BOTTOM</button>
  </nav>
  <div id="IMAGE-BOX">
    <img src="./image.jpg" id="MAIN-IMAGE">
  </div>

  <div id="SIDE-PANEL">
    <dl>
      <dt>INPUT1</dt>
      <dd><input class="input-large" type="text" placeholder="input1"></dd>
      <dt>INPUT2</dt>
      <dd><input type="text" placeholder="input2"></dd>
    </dl>
    <button class="pull-btn"> &lt&lt&lt; </button>
  </div>

  <div id="BOTTOM-PANEL">
    <h1>BOTTOM CONTENT</h1>
    <button class="up-btn">close</button>
  </div>

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

</body>
</html>


## sample.css
body{
  width: 1024px;
  height: 672px; // considering the address bar of Safari iOS7
  background-color: white;
}

#IMAGE-BOX{
  background-color: #eeeeee;
  width: 924px;
  height: 672px;

  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 100px;
  padding: 30px 10px;

  transition: all 0.3s;
  -webkit-transform: translate3d( 0px, 0px, 0px);
}

#MAIN-IMAGE{
  height: 100%;
  transition: -webkit-transform 0.3s;
  width: 100%;
}

#SIDE-PANEL{

  box-sizing: border-box;
  background-color: #ffaa00;
  width: 200px;
  height: 672px;
  padding: 20px;

  position: absolute;
  top: 0px;
  bottom: 0px;

  -webkit-transform: translate3d( -200px, 0px, 0px);
  transition: all 0.3s;
}


#BOTTOM-PANEL{
  box-sizing: border-box;
  background-color: #ffaa00;
  width: 1024px;
  height: 200px;
  padding: 20px;

  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;

  -webkit-transform: translate3d( -1024px, 0, 0px);
  transition: all 0.3s;
}


// style definitions for the navigation buttons
nav{
  position: absolute;
  z-index: 10;
  left:0px;
}

  nav button{
    display: block;
    margin: 30px 0px 70px;
    height: 80px;
    width: 80px;
    border-radius: 0px;
  }


// style definitions when body is classed by "pull"
.pull{}
  .pull #IMAGE-BOX{
    -webkit-transform: translate3d( 100px, 0px, 0px);
    width: 824px;
  }

  .pull #MAIN-IMAGE{
    -webkit-transform: scale( 0.8, 0.8);
  }

  .pull #SIDE-PANEL{
    -webkit-transform: translate3d( 0px, 0px, 0px);
  }

  .pull nav{
    display: none;
  }


// style definitions when body is classed by "pull"
.up{}
  .up #IMAGE-BOX{
    -webkit-transform: translate3d( 0px, -100px, 0px);
  }

  .up #MAIN-IMAGE{
    -webkit-transform: scale( 0.75, 0.75);
  }

  .up #BOTTOM-PANEL{
    -webkit-transform: translate3d( 0px, 0px, 0px);
  }

  .up nav{
    display: none;
  }


## sample.js
$(document).ready( function(){

  $('.pull-btn').on('click',function(e){
    e.preventDefault();
    toggleSide();
  });

  $('.up-btn').on('click',function(e){
    e.preventDefault();
    toggleUp();
  });

});


function toggleSide(){
  $('body').toggleClass('pull');
}
function toggleUp(){
  $('body').toggleClass('up');
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>TITLE</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

	<link href="./sample.css" media="all" rel="stylesheet">
	</head>

	<body class="">
	<nav>
	<button class="pull-btn">LEFT</button>
	<button class="pull-btn">LEFT</button>
	<button class="up-btn">BOTTOM</button>
	<button class="up-btn">BOTTOM</button>
	</nav>
	<div id="IMAGE-BOX">
	<img src="./image.jpg" id="MAIN-IMAGE">
	</div>

	<div id="SIDE-PANEL">
	<dl>
	<dt>INPUT1</dt>
	<dd><input class="input-large" type="text" placeholder="input1"></dd>
	<dt>INPUT2</dt>
	<dd><input type="text" placeholder="input2"></dd>
	</dl>
	<button class="pull-btn"> &lt&lt< </button>
	</div>

	<div id="BOTTOM-PANEL">
	<h1>BOTTOM CONTENT</h1>
	<button class="up-btn">close</button>
	</div>

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

	</body>
	</html>
	body{
	width: 1024px;
	height: 672px; // considering the address bar of Safari iOS7
	background-color: white;
	}

	#IMAGE-BOX{
	background-color: #eeeeee;
	width: 924px;
	height: 672px;

	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 100px;
	padding: 30px 10px;

	transition: all 0.3s;
	-webkit-transform: translate3d( 0px, 0px, 0px);
	}

	#MAIN-IMAGE{
	height: 100%;
	transition: -webkit-transform 0.3s;
	width: 100%;
	}

	#SIDE-PANEL{

	box-sizing: border-box;
	background-color: #ffaa00;
	width: 200px;
	height: 672px;
	padding: 20px;

	position: absolute;
	top: 0px;
	bottom: 0px;

	-webkit-transform: translate3d( -200px, 0px, 0px);
	transition: all 0.3s;
	}


	#BOTTOM-PANEL{
	box-sizing: border-box;
	background-color: #ffaa00;
	width: 1024px;
	height: 200px;
	padding: 20px;

	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;

	-webkit-transform: translate3d( -1024px, 0, 0px);
	transition: all 0.3s;
	}


	// style definitions for the navigation buttons
	nav{
	position: absolute;
	z-index: 10;
	left:0px;
	}

	nav button{
	display: block;
	margin: 30px 0px 70px;
	height: 80px;
	width: 80px;
	border-radius: 0px;
	}


	// style definitions when body is classed by "pull"
	.pull{}
	.pull #IMAGE-BOX{
	-webkit-transform: translate3d( 100px, 0px, 0px);
	width: 824px;
	}

	.pull #MAIN-IMAGE{
	-webkit-transform: scale( 0.8, 0.8);
	}

	.pull #SIDE-PANEL{
	-webkit-transform: translate3d( 0px, 0px, 0px);
	}

	.pull nav{
	display: none;
	}



	// style definitions when body is classed by "pull"
	.up{}
	.up #IMAGE-BOX{
	-webkit-transform: translate3d( 0px, -100px, 0px);
	}

	.up #MAIN-IMAGE{
	-webkit-transform: scale( 0.75, 0.75);
	}

	.up #BOTTOM-PANEL{
	-webkit-transform: translate3d( 0px, 0px, 0px);
	}

	.up nav{
	display: none;
	}
	$(document).ready( function(){

	$('.pull-btn').on('click',function(e){
	e.preventDefault();
	toggleSide();
	});

	$('.up-btn').on('click',function(e){
	e.preventDefault();
	toggleUp();
	});

	});


	function toggleSide(){
	$('body').toggleClass('pull');
	}
	function toggleUp(){
	$('body').toggleClass('up');
	}