Floating menu với hiệu ứng đẹp mắt cho blog

Floating Dropdown Menu for Blogger - Blogspot

DEMO

Dropdown menu (menu xổ dọc) chắc hẳn không còn xa lạ gì đối với các webmaster/blogger. Bài viết này mình sẽ hướng dẫn các bạn tạo một menu cố định hiển thị trên blog với hiệu ứng dropdown với một phong cách hoàn toàn khác so với những dropdown menu thông thường.

Sau đây là các bước thực hiện thủ thuật:

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích HTML/JavaScripts.
Bước 2: Dán đoạn code sau vào phần nội dung:

<style type='text/css'>
#kjmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#kjmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#kjmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}
#kjmenu li{list-style:none;margin:0 0 5px;padding:0;} #kjmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}
#kjmenu li a:hover{
color:#fff;}
#kjmenu:hover{
z-index:5;
height:175px;
</style>
<div id="kjmenu">
<h3>
FLOATING MENU</h3>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</div>

Nếu muốn thêm menu, các bạn chỉ cần chèn đoạn code sau vào trước dòng in đậm:

<li><a href="#">menu</a></li>

Có thể để lại comment bên dưới nếu bạn cần hỗ trợ !

Chúc các bạn thành công !