Loading post navigation ...
 
 

Pro page

1
Nhận xét

Tạo menu chính ở sidebar (Hiển thị icon kết hợp dịch kí tự)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Đây là bài viết thứ 2 về menu nằm dọc ở sidebar. Bài viết trước mình sử dụng lệnh onmouseover để thay đổi màu nền của menu khi click vào. Bài viết này mình sẽ hướng dẫn hiệu ứng khác, đó là hiển thị icon nhỏ ở đầu mỗi menu và kết hợp hiệu ứng dịch chuyển kí tự.


Có thể xem demo ở đây : http://fandung-test.blogspot.com/ (blackmenu demo)

Đầu tiên bạn chèn code CSS của menu vào trong code template, ta làm như sau:
1. Đăng nhập blog
2. Vào chỉnh sửa code HTML
3. Chèn code CSS bên dưới vào trên dòng ]]></b:skin>

ul.navigation {
list-style:none;
width: 160px;
margin:0;
padding:0;
}

#menu a {
display: block;
padding: 5px 3px 5px 10px;
font-weight:bold;
background-color: #222222;
border-top: 1px solid #efefef; /* code tạo dòng ngăn cách giữa các menu*/
}

#menu a:link {
color: #efefef;
text-decoration: none;
}

#menu a:visited {
color: #efefef;
text-decoration: none;
}

#menu a:hover {
background:#222222 url(http://www.tutorial5.com/images/stories/menu-arrow.gif) no-repeat left center;
text-indent:15px; /* dòng lệnh này sẽ làm dịch chuyển các kí tự đi 15px */
}

#menu a:active {
color: #efefef;
text-decoration: none;
}


Chú ý : ảnh icon http://www.tutorial5.com/images/stories/menu-arrow.gif bạn có thể thay đổi theo ý bạn. Nếu sử dụng ảnh này, bạn nên chú ý đến màu nền của menu và màu nền của ảnh.

4. Save template lại.
5. Tạo 1 Widet HTML/Javascript rồi chèn code HTML bên dưới vào:

<span id="menu">

<ul class="navigation">
<li><a href="#" class="menu">Menu 1</a></li>
<li><a href="#" class="menu">Menu 2</a></li>
<li><a href="#" class="menu">Menu 3</a></li>
<li><a href="#" class="menu">Menu 4</a></li>
</ul>

</span>


6. Save lại là xong.

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



Enter your mail address:

1

byebye

This article feel too good, I like it very much, perhaps I know not of these very deep, but I hope you will soon update your work!!!hermes birkin replica



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home