CSS3 Fly Out Menu

Menu với hiệu ứng trượt xuống tuyệt đẹp được viết bởi tác giả của blog DTE sẽ khiến cho blog của bạn trở nên đẹp hơn rất nhiều. Tuy nhiên việc cài đặt cho thủ thuật này lại hết sức đơn giản. Bạn hãy làm theo các bước hướng dẫn bên dưới để thêm menu này vào blog nhé.



Thực hiện

Bước 1: Bạn thêm đoạn code sau trước thẻ ]]></b:skin> trong template của mình
ul#navigation {
  position:fixed;
  margin:0px;
  padding:0px;
  top:0px;
  right:10px;
  list-style:none;
  z-index:999999;
  width:735px;
  font:normal 11px Arial,Sans-Serif;
  -webkit-animation:2s fxhompinav ease-in-out;
  -moz-animation:2s fxhompinav ease-in-out;
  -ms-animation:2s fxhompinav ease-in-out;
  animation:2s fxhompinav ease-in-out;
}

ul#navigation li {
  width:103px;
  display:inline;
  float:left;
  margin:0 0 0 2px;
}

ul#navigation li a {
  display:block;
  float:left;
  margin-top:-78px;
  width:100px;
  height:22px;
  background-color:#111;
  background-repeat:no-repeat;
  background-position:50% 150px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-border-radius:0px 0px 10px 10px;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:10px;
  -khtml-border-bottom-right-radius:10px;
  -khtml-border-bottom-left-radius:10px;
  border-radius:0px 0px 10px 10px;
  color:#ccc;
  text-decoration:none;
  text-align:center;
  text-shadow:0 1px 1px #000;
  padding-top:85px;
  -webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  -o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
  transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}

ul#navigation li a:hover {
  margin-top:-3px;
  background-position:50% 10px;
  color:#fff;
  position:relative;
}

ul#navigation li a:hover:after {
  content:"";
  width:0px;
  height:0px;
  position:absolute;
  top:100%;
  left:45%;
  margin-top:-10px;
  border-width:5px;
  border-style:solid;
  border-color:transparent transparent #e6e6e6 transparent;
}

ul#navigation li:nth-child(1) a {
  background-image:url(http://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
  background-image:url(http://2.bp.blogspot.com/-2OSziw4y00Y/TtLybmgNpbI/AAAAAAAABZA/CfXysrknh5k/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
  background-image:url(http://4.bp.blogspot.com/-PafE8z-wPaE/TtLya7QCLRI/AAAAAAAABY0/2ggfAcDdL4c/s1600/search.png);
}
ul#navigation li:nth-child(4) a {
  background-image:url(http://4.bp.blogspot.com/-70Y4BlTmU2k/TtLyY5xd4wI/AAAAAAAABYo/3f2DFCIXHSY/s1600/photo_camera.png);
}
ul#navigation li:nth-child(5) a {
  background-image:url(http://3.bp.blogspot.com/-5gyngAu_azs/TtLyaHMRCpI/AAAAAAAABYs/njvXEAaM4AM/s1600/rss_feed.png);
}
ul#navigation li:nth-child(6) a {
  background-image:url(http://1.bp.blogspot.com/-B6GMO8E3wCQ/TtLyXVvr9lI/AAAAAAAABYY/s5EbibQXFGE/s1600/ipod.png);
}
ul#navigation li:nth-child(7) a {
  background-image:url(http://3.bp.blogspot.com/-m9LeNCW7A4s/TtLyYIsDygI/AAAAAAAABYc/TBmNRPoQZ3s/s1600/mail.png);
}

@-webkit-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@-moz-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@-ms-keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

@keyframes fxhompinav {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}
}

Bước 2: Tìm thẻ </body> và thêm trước nó đoạn code sau rồi lưu lại template
<ul id='navigation'>
     <li><a href='#'>Home</a></li>
     <li><a href='#'>About</a></li>
     <li><a href='#'>Search</a></li>
     <li><a href='#'>Photos</a></li>
     <li><a href='#'>Rss Feed</a></li>
     <li><a href='#'>Podcasts</a></li>
     <li><a href='#'>Contact</a></li>
</ul>
Chúc bạn thành công và blog ngày một đẹp hơn!
Nguồn DTE
13 Comments
Comments

13 comments

Anonymous
26/7/13
lam hoai k dc vay a
Anonymous
26/7/13
http://hangxomhaivl.blogspot.com/
26/7/13
Mình vẫn thực hiện được trên blog demo mà, bạn xem lại cách thực hiện nha. Nếu không send qua email mình test thử
Anonymous
26/7/13
dc roai bi hoa mat tim lon the:xin
vì không thấy trang liên kết của bạn đâu hết nên mình phải đặt ở đây vậy.
Bạn đặt liên kết với blog mình nhé:
Địa chỉ Blog:http://tienganhgioi123.blogspot.com
Tên hiển thị : tienganhgioi123
Favico : http://img547.imageshack.us/img547/7521/xvys.jpg
Nội dung blog:
tienganhgioi123 - Blog Học Anh Văn| Nơi Chia Sẽ Những Bí Quyết Và Kinh Nghiệm Để Học Tốt Tiếng Anh|Phương Pháp Luyện Listening-Speaking-Reading-Writing Mới Nhất|Bài Test: Mini Test-Skill Test-Full Test|
Mình đã add blog bạn, bạn có thể kiểm tra...chúc vui :P
Cảm ơn bạn! Mình đã add website của bạn vào danh sách. Mong rằng chúng ta sẽ hợp tác lâu dài. Chúc bạn thành công!
À, đường dẫn link đến trang liên kết nằng ở icon thứ 2 từ trái sang và ở phía trên thanh menu bạn ạ :cuoi
http://2.bp.blogspot.com/-wJ1FfEHoqwA/Ubcdv8lagEI/AAAAAAAALjc/c1WT9DQ1QS4/s1600/sprite.png
lâu quá e mới vào blog a, nhìn đẹp quá :x chúc a đông khách nhé !!!
Cảm ơn cậu! Template này mình đầu tư mất khá nhiều thời gian mà :thank
12/10/13
Nó chỉ nằm bên phải thôi hả bạn. Mình muốn nó nằm bên trái hay chính giữa dc ko. font chữ lớn hơn được ko bạn.
13/10/13
Bạn thay thuộc tính right thành left của ul#navigation. Như sau:
ul#navigation {
position:fixed;
margin:0px;
padding:0px;
top:0px;
left:10px;
list-style:none;
z-index:999999;
width:735px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s fxhompinav ease-in-out;
-moz-animation:2s fxhompinav ease-in-out;
-ms-animation:2s fxhompinav ease-in-out;
animation:2s fxhompinav ease-in-out;
}
13/10/13
Bạn ơi có thể xem dùm blog mình ko. REUPPHIM.BLOGSPOT.COM.
Mình làm theo hướng dẫn chia bài viết dạng Grid nhưng không làm sao bung tấm hình trong khung ra toàn khung được. Bạn dành ít thời gian chỉ mình với.

bài hướng dẫn ở đây: http://www.trollvl.com/2013/09/hien-thi-bai-viet-duoi-dang-grid-hoac.html?showComment=1381569236021#c3327370533801763444
15/10/13
Được rồi mà bạn, chỉ cần sửa CSS là ổn

Cảm ơn bạn đã ghé thăm Troll VL !
» Tạm thời ngăn không cho comment với chế độ ẩn danh vì có một số bạn không có thành ý cố tình spam. Mong các bạn thông cảm!
» Bạn nên viết bằng Tiếng Việt có dấu để mọi người dễ đọc, dễ bình luận
» Để liên hệ,góp ý và đóng góp bài viết bạn click vào đây
Sử dụng các thẻ sau cho comments
» Chèn nội dung vào blockquote <b rel="quote">Nội dung blockquote</b>
» Chèn nội dung vào note <em rel="note">Nội dung note</em>
» Chèn code vào khung pre <i rel="pre">Nội dung code</i>
» Chèn hình ảnh <i rel="image">Link hình ảnh</i>
» Chèn video từ youtube [youtube]link video[/youtube]
» Chèn link <i rel="anchor">Link</i>

Insert Emoticons
:cuoi
:hihi
:thank
:haha
:meu
:cry
:oaoa
1cuoi
:D
@@
:p
:o
:vi
:ko
:ca
:why
:xin
:lanh
:im
:aoi
:ado
:mda
:tat
0:khoa
a:ab
k:ac
q:ad
w:ae
e:af
l:ag
g:ah
8:ai
9:aj
9:ag
:9a
*Phải có khoảng trống trước các code mới hiển thị mặt cười


Mã Hóa Code Tạo và xem trước comments Cancel Reply
-->