Menu dọc ẩn hiện

DEMO:  http://codepen.io/Beohoavinh/full/egoJrE/

Chèn code dưới vào phần menu:

	<nav>
	  <ul>
	    <li>Home</li>
	    <li>About me</li>
	    <li>Blog</li>
	    <li>Contact</li>
	  </ul>
	</nav>
	<div class="openNav">
	  <div class="icon"></div>
	</div>

	<div class="wrapper">
	  <section>
	  <h1>Chia Sẻ 78</h1>
	  </section>
	</div>
	
	<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	

Tiếp đến chèn css:

.navOpen {
overflow: hidden;
}
.wrapper {
transition-duration: 0.5s;
transition-timing-function: swing;
background-color: white;
width: 100%;
height: 100%;
position: relative;
padding: 100px 40px;
}
.wrapper.open {
transform: translateX(250px) translateY(50px);
-webkit-transform: translateX(250px) translateY(50px);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}
.wrapper section {
max-width: 600px;
margin: 0 auto;
}
.wrapper section h1 {
font-weight: 300;
font-size: 30px;
margin-bottom: 10px;
}
.wrapper section h2 {
font-weight: 300;
font-size: 20px;
margin-bottom: 40px;
}
.wrapper section p {
margin-bottom: 40px;
}
.openNav {
transition-duration: 0.5s;
transition-timing-function: swing;
width: 50px;
height: 50px;
background-color: #14B9FF;
position: fixed;
top: 20px;
left: 20px;
z-index: 9;
}
.openNav:hover {
cursor: pointer;
}
.openNav .icon {
transition-duration: 0.2s;
position: absolute;
width: 30px;
height: 2px;
background-color: white;
top: 24px;
left: 10px;
}
.openNav .icon:before,
.openNav .icon:after {
transition-duration: 0.5s;
background-color: white;
position: absolute;
content: "";
width: 30px;
height: 2px;
left: 0px;
}
.openNav .icon:before {
top: -7px;
}
.openNav .icon:after {
top: 7px;
}
.openNav.open {
transform: translateX(250px) translateY(50px);
-webkit-transform: translateX(250px) translateY(50px);
}
.openNav.open .icon {
background-color: transparent;
}
.openNav.open .icon:before,
.openNav.open .icon:after {
top: 0;
}
.openNav.open .icon:before {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.openNav.open .icon:after {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
nav {
background-color: #14B9FF;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
}
nav ul {
width: 250px;
margin-top: 50px;
}
nav ul:hover li {
color: rgba(255, 255, 255, 0.5);
}
nav ul li {
transition-duration: 0.25s;
display: block;
padding: 5px 40px;
color: white;
letter-spacing: 0.02em;
text-align: right;
}
nav ul li:hover {
cursor: pointer;
color: white;
}

Chèn JS cuối cùng là xong:

<script type="text/javascript">

$('.openNav').click(function () {
$('body').toggleClass('navOpen');
$('nav').toggleClass('open');
$('.wrapper').toggleClass('open');
$(this).toggleClass('open');
});
</script>

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh