LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
body {
  background: #eaeaea;
  overflow-x: hidden;
}

#page-contents {
  box-shadow: -1px 1px 3px #999999;
  position: absolute;
  background: #e8e8e8;
  top: 0; left: 0;
  width: 100em;
  height: 80em;
  
  transition: left .2s;
  -moz-transition: left .2s;
  -webkit-transition: left .2s;
	-o-transition: left .2s;
}

.slide {
	left: 270px !important;
}

header {
	width: 100%;
  height: 4em;
 	border-bottom: 2px solid #121212;
	border-top: 1px solid #75787d;
	background-image: -webkit-linear-gradient(top, #484848, #343434);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#484848), to(#343434));
	background-image: -webkit-linear-gradient(top, #484848, #343434);
	background-image: -moz-linear-gradient(top, #484848, #343434);
	background-image: -ms-linear-gradient(top, #484848, #343434);
	background-image: -o-linear-gradient(top, #484848, #343434);
}

button {
	margin: 1em;
  width: 4.5em;
  height: 4em;
  background: none;
  border: none;
  border-radius: .5em;
  cursor: pointer; cursor: hand;
}

button div {
  position: absolute;
  background: #e8e8e8;
  margin-top: -1em;
	width: 3.5em;
  height: .6em;
  border-radius: 1em;
}
JS
$('button').click(function() {
    $('#page-contents').toggleClass('slide');
});
Host Instantly Drag and Drop Website Builder

 

Description

A "Facebook style" slide out menu for mobile using the jQuery toggle function in combination with a CSS transition.
Term
Mon, 11/27/2017 - 22:12

Related Codes

Pen ID
Pen ID
Pen ID