如何让我的侧边菜单在切换时按下其他元素？

Question

我无法在侧面菜单的切换时使侧面菜单推开其他元素（通过侧面菜单的相同宽度）。我希望侧面菜单在滑入时将相邻元素推开。非常感谢，这是我的代码。

git clone https://github.com/docker-32bit/ubuntu.git
cd ubuntu
bash build-image.sh

$(document).ready(function() {

	$("#hamburger").click(function() {
		$("header nav").animate({width: 'toggle'});
	});
	$("header nav").mouseleave(function() {
		$("header nav").animate({width: 'toggle'});
	});
});

/* Universal Styles */

* {
	box-sizing: border-box;
}
body {
	text-align: center;
}
a {
	text-decoration: none;
	color: inherit;
}
ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
}

/* Cross Styles */

aside,
.navBlock {
	font-family: 'Bungee Inline', cursive;
}

/* Header Styles */

.logo {
	width: 150px; 
	cursor: pointer;
	transition: all .2s;
	float: left;
	margin-bottom: 10px;
}
nav,
header{
	overflow: auto;
	width: 100%;
}

#hamburger {
	float: right;
	transition: all .2s;
	cursor: pointer;
}
/* Navigation Styles */

	header nav {
		position: absolute;
		width: 50%;
		top: 0;
		height: 100%;
		background-color: #354551;
		margin: 0;
		box-shadow: inset 0px 0px 12px 2px rgba(0,0,0,0.75);
		display: none;
		z-index: 100;
	}
	.navBlock {
		background-color: #354551;
		text-transform: uppercase;
		font-size: 2em;
		color: white;
		letter-spacing: 3px;
	    border: none;
	    cursor: pointer;
	    line-height: 175%;
	    transition: all .2s;
	}
	header nav ul {
		box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
		margin-top: 50%;
		border-top: 1px dashed lightgrey;
		border-bottom: 1px dashed lightgrey;
	}

/* Profiles Styles */

aside ul,
aside li,
aside {
	overflow: auto;
}
aside {
	background-color: #90afc5;
	box-shadow: inset 0px 20px 9px -22px #000;
	color: #eef3f6;
	font-size: 1.5em;
	letter-spacing: 2px;
	text-shadow: 0px 1px 1px #4d4d4d;
	width: 100%;
}
aside li {
	display: inline;
}
aside img {
	border-radius: 100%;
	transition: all .2s;
}

/* Footer Styles */

footer {
	font-family: 'Oswald', cursive;
	letter-spacing: 1px;
	font-size: .9em;
	height: 25px;
	background-color: #abc3d3;
	color: #2c4354;
}
footer span {
	line-height: 25px;
}

/* Showcase */

main h4 {
	margin-top: 30px;
	color: white;
	font-size: 2em;
	letter-spacing: 2px;
	text-shadow: 0px 1px 1px #4d4d4d;
	font-family: 'Bungee Inline', cursive;
	border: 10x dashed lightgray;
	box-shadow: 0px -20px 9px -22px #000;
}
.webShowcase img,
.logoShowcase img {
	width: 80%;
	margin: 50px auto;
	transition: all .3s;
	border: 1px solid lightgrey;
}
.webShowcase h4 {
	background-color: #ffbb00;
	margin: 0;
}
.webShowcase ul,
.logoShowcase ul {
	margin-top: 30px;
	text-align: center;
}
.webShowcase ul,
.webShowcase li,
.webShowcase,
.logoShowcase,
.logoShowcase li,
.logoShowcase ul {
	overflow: auto;
}
.webShowcase,
.logoShowcase {
	width: 100%;
}
.logoShowcase h4 {
	background-color: #aebd38;
	margin: 0;
}

/* Effects */

aside img:hover,
.logo:hover,
.navBlock:hover,
#hamburger:hover,
main img:hover {
	opacity: .5;
}

/* Tablet View */

@media only screen and (min-width: 767px) {
	aside ul {
		margin-bottom: 10px;
	}
}
/* Computer View */

@media only screen and (min-width: 1200px) {
	.logo {
		width: 250px;
	}
	#hamburger {
		content: url("../media/img/hamburgerResized.png");
	}
	header nav {
		width: 25%;
	}
	.webShowcase img,
	.logoShowcase img {
		width: 30%;
		display: inline-block;
	}
	.webShowcase li,
	.webShowcase,
	.webShowcase ul,
	.logoShowcase,
	.logoShowcase li,
	.logoShowcase ul {
		overflow: auto;
	}
	.webShowcase li,
	.logoShowcase li {
		display: inline;
		margin: 0 10px;
		padding: 0;
	}
	.webShowcase ul,
	.logoShowcase ul {
		margin: 0;
		padding: 0;
	}
	.webShowcase ul:nth-child(odd) {
		background-color: #ffcf4d;
	}
	.webShowcase ul:nth-child(even) {
		background-color: white;
	}
	.logoShowcase ul:nth-child(odd) {
		background-color: #c3d062;
	}
	.logoShowcase ul:nth-child(even) {
		background-color: white;
	}
}

Answer 1

添加此JQuery：

$(document).ready(function() {
 $("#hamburger").click(function() {
 $(".fixed").toggleClass('show');
 $('main').toggleClass('fixed-active');
 $('header').toggleClass('fixed-active');
 });
});

这CSS：

.fixed {
 position: fixed;
 width: 300px;
 top: 0;
 left: 0;
 height: 100%;
 background-color: #354551;
 margin: 0;
 box-shadow: inset 0px 0px 12px 2px rgba(0,0,0,0.75);
 z-index: 100;
 left: -100%;
 transition: all .3s ease-in;
}
.fixed.show{
  left:0;
}
main, header {
  transition: all .3s ease-in;
}
main.fixed-active, header.fixed-active {
 padding-left: 300px;
 position: relative;
}

查看fiddle
希望这有帮助！