Chèn Code Dưới vào sau /header:
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="menu-wrap">
<nav class="menu-top">
<div class="profile"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlQeHPOd0MfDFyH578k2wTQi23d4zKE0nxA_aiRbk17bg1gEk7q476DUINycfLPI7_jNPf9KF4Lb1KauFi13Q_u0KT1pBNAFFQLf009zADLcozsnijf9kF32eYRfDU7KkRJRAo2J3Vx54/s1600/123213.png" alt="Bẽo Hòa Vinh"/><span>Bẽo Hòa Vinh</span></div>
<div class="icon-list">
<a href="#"><i class="fa fa-fw fa-star-o"></i></a>
<a href="#"><i class="fa fa-fw fa-bell-o"></i></a>
<a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
<a href="#"><i class="fa fa-fw fa-comment-o"></i></a>
</div>
</nav>
<nav class="menu-side">
<a href="#">Recent Stories</a>
<a href="#">Reading List</a>
<a href="#">My Stories</a>
<a href="#">Categories</a>
</nav>
</div>
<button class="menu-button" id="open-button"></button>
<div class="content-wrap">
<div class="content">
<header class="codrops-header">
<h1>Chia Sẻ 78 <span>TÁC GIẢ ẨN HIỆN</span></h1>
<p>
ĐI ĐỂ TRỞ VỀ <br/>
Sáng tác: Tiên Cookie <br/>
<br/>
Verse: <br/>
Tôi đang ở một nơi rất xa, nơi không<br/> có khói bụi thành phố <br/>
Ở một nơi đẹp như mơ <br/>
Trên cao êm êm mây trắng bay lặng nhìn<br/> biển rộng sóng vỗ <br/>
Cuộc đời tôi là những chuyến đi dài <br/>
<br/>
Pre: <br/>
Vượt suối thác, vượt núi dốc, dù chênh<br/> vênh, có xá gì <br/>
Có biết bao thứ tươi đẹp vẫn cứ ở đó<br/> đang chờ tôi <br/>
Người xung quanh ở nơi đây thật dễ mến<br/> dẫu mới gặp <br/>
Ánh mắt lấp lánh hiền hoà chào tôi<br/> chào người bạn mới <br/>
<br/>
Chorus: <br/>
Từng chặng đường dài mà ta qua, giờ<br/> ngồi một mình lại thấy nhớ <br/>
Ngày ngày mặt trời rạng ngời vươn cao<br/> lên từ trên mái nhà <br/>
Từng chặng đường dài mà ta qua đều để<br/> lại kỉ niệm quý giá <br/>
Để lại một điều rằng càng đi xa ta<br/> càng thêm nhớ nhà <br/>
<br/>
Đi thật xa để trở về <br/>
Đi thật xa để trở về <br/>
Có một nơi để trở về <br/>
Đi, Đi để trở về <br/>
<br/>
Verse II: <br/>
Tôi đang ở một nơi rất xa, nơi không<br/> có khói bụi thành phố<br/>
Ở một nơi đẹp như mơ <br/>
Trên cao êm êm mây trắng bay lặng nhìn<br/> biển rộng sóng vỗ <br/>
Cuộc đời tôi là những chuyến đi dài <br/>
<br/>
pre: <br/>
Vượt suối thác, vượt núi dốc, dù chênh<br/> vênh, có xá gì <br/>
Có biết bao thứ tươi đẹp còn đang<br/> trông mong tôi ghé qua <br/>
Người xung quanh ở nơi đây thật dễ mến<br/> dẫu mới gặp <br/>
Ánh mắt lấp lánh hiền hoà chào tôi<br/> chào người bạn mới <br/>
<br/>
Chorus: <br/>
Từng chặng đường dài mà ta qua, giờ<br/> ngồi một mình lại thấy nhớ<br/>
Ngày ngày mặt trời rạng ngời vươn cao<br/> lên từ trên mái nhà <br/>
Từng chặng đường dài mà ta qua đều để<br/> lại kỉ niệm quý giá <br/>
Để lại một điều rằng càng đi xa ta<br/> càng thêm nhớ nhà <br/>
<br/>
Đi thật xa để trở về <br/>
Đi thật xa để trở về <br/>
Có một nơi để trở về <br/>
Đi, Đi để trở về <br/>
<br/>
Brigde:
<br/>
Cuộc đời thật đẹp khi được đi muôn nơi<br/> xa xôi rộng lớn <br/>
Nhưng ta vẫn có nơi để trở về sau mỗi<br/> chuyến đi <br/>
Điều kì diệu là con người ta đi xa hơn<br/> để trưởng thành hơn <br/>
Không quên mang theo bên cạnh hành<br/> trang nỗi nhớ gia đình<br/>
</p>
</header>
</div>
</div><!-- /content-wrap -->
</div><!-- /container -->
<script src="http://demo.htmleaf.com/1410/201410182336/js/main.js"></script>
Chèn CSS dưới vào:
.menu-wrap a {
color: #b8b7ad;
}
.menu-wrap a:hover,
.menu-wrap a:focus {
color: #c94e50;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.content {
position: relative;
background: #b4bad2;
}
/* Overlay */
.content::before {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
content: '';
opacity: 0;
-webkit-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
transition: opacity 0.3s, transform 0s 0.3s;
}
/* Menu Button */
.menu-button {
position: fixed;
z-index: 1000;
margin: 1em;
padding: 0;
width: 2.5em;
height: 2.25em;
border: none;
text-indent: 2.5em;
font-size: 1.5em;
color: transparent;
background: transparent;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.menu-button::before {
position: absolute;
top: 0.5em;
right: 0.5em;
bottom: 0.5em;
left: 0.5em;
background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
content: '';
}
.menu-button:hover {
opacity: 0.6;
}
/* Menu */
.menu-wrap {
position: absolute;
font-weight: 700;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.menu-top {
line-height: 58px;
}
.menu-top .profile {
display: inline-block;
padding: 8px 10px;
line-height: 42px;
}
.menu-top .profile,
.menu-side {
width: 300px;
}
.menu-top .profile img {
float: left;
margin-right: 1em;
width: 43px;
}
.icon-list {
display: inline-block;
font-size: 1.25em;
}
.icon-list a {
margin: 0 1em 0 0;
padding: 0;
}
@media screen and (max-width: 32em) {
.icon-list {
padding-left: 1em;
}
}
.menu-side a {
display: block;
padding: 1.2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.menu-side a:first-child {
border-top: 1px solid rgba(0,0,0,0.1);
}
/* Shown menu */
.show-menu .menu-wrap {
opacity: 1;
}
.show-menu .content-wrap,
.show-menu .menu-button {
-webkit-transform: translate3d(300px,60px,0);
transform: translate3d(300px,60px,0);
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Header */
.codrops-header {
margin: 0 auto;
padding: 3em 2em;
text-align: center;
height: 100%;
}
.codrops-header h1 {
margin: 0 auto;
font-weight: 800;
font-size: 3.75em;
line-height: 1;
}
.codrops-header h1 span {
display: block;
font-size: 50%;
font-weight: 400;
padding-top: 0.325em;
}
.codrops-links {
text-transform: uppercase;
font-weight: 700;
font-size: 0.69em;
line-height: 2.2;
padding: 1.61em 5em;
}
.codrops-links a {
display: inline-block;
padding: 0 1em;
text-decoration: none;
letter-spacing: 1px;
}
.codrops-icon:before {
margin: 0 4px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'codropsicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
/* Demo Buttons Style */
.codrops-demos {
font-size: 1em;
max-width: 1200px;
margin: 3em auto 5em;
padding: 2em 10em 0;
}
.codrops-demos > a {
display: inline-block;
margin: 0.75em;
padding: 1.35em 1.1em;
width: 15em;
background: #fffce1;
outline: none;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 800;
border-radius: 20px/50px;
}
.codrops-demos > a.current-demo {
background: #c94e50;
color: #fffce1;
}
/* Related demos */
.related {
margin-top: 5em;
padding: 0 3em 5em;
}
.related p {
font-size: 1.5em;
font-weight: 700;
}
.related > a {
display: inline-block;
text-align: center;
margin: 20px 10px;
padding: 25px;
border-radius: 35px/200px;
background: #fffce1;
max-width: 100%;
}
.related a img {
max-width: 100%;
opacity: 0.8;
border-radius: 20px/100px;
}
.related a:hover img,
.related a:active img {
opacity: 1;
}
.related a h3 {
margin: 0;
padding: 0.5em 0.75em 0.3em;
max-width: 300px;
text-align: left;
}
body #cdawrap {
top: auto;
bottom: 35px;
right: 35px;
background: #b4bad2;
border: 1px solid rgba(131,135,151,0.6);
}
.demo-wave body #cdawrap {
top: 35px;
right: 35px;
bottom: auto;
}
@media screen and (max-width: 40em) {
body {
font-size: 80%;
}
.codrops-header h1 {
font-size: 2.5em;
}
.codrops-demos {
max-width: 900px;
padding: 2em 2em 0;
}
.related > a {
margin: 20px 0;
}
}
@media screen and (max-width: 25em) {
.codrops-icon {
font-size: 250%;
}
.codrops-icon span {
display: none;
}
}
Cuối là chèn JS:
<script type="text/javascript">
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
</script>
<script type="text/javascript">
/**
* main.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2014, Codrops
* http://www.codrops.com
*/
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init();
})();
</script>
![[Học CSS] Kỹ thuật tạo menu dọc cơ bản](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8dZT7gKlkdZNTlavZvXzo22HPsFdlukuDkNAMkoZUPVGPJFlT_-ylMMY-D5kCB5QDm238inmzrFp615b9zv_IsWdy1ol4Stnh2wmAENMXddlOhCSwVBN0vf14-q7g0ZS9OjU3L47opfA/s1600/0.jpg "[Học CSS] Kỹ thuật tạo menu dọc cơ bản")
