Loading post navigation ...
 
 

Pro page

5
Nhận xét

Menu dọc sổ ngang - Chỉ sử dụng CSS

| by Phan Dũng | views

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

CSS Menu Without Javascript
[FD's BlOg] - Thông thường các các menu có hiệu ứng sổ ngang(hoặc dọc) thường luôn luôn đi với 1 file javascript để tạo hiệu ứng. Hôm nay mình sẽ giới thiệu một dạng menu nữa, nhưng không sử dụng javascript.
Xem demo trực tiếp ở đây : http://data.fandung.com/css/cssmenu.html


Hình ảnh minh họa:

Đầu tiên ta sẽ chèn code CSS vào trong code template.
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Chèn đọan code CSS vào sau dòng code <head>

<link href='http://data.fandung.com/css/flyout_h.css' media='all' rel='stylesheet' type='text/css'/>
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="http://data.fandung.com/css/flyout_h_ie.css" />
<![endif]-->

- Bạn có thể download file CSS về và sửa theo ý mình rồi up lên host để lấy link. (xài host 110mb.com như của mình cũng được). Sở dĩ phải làm vậy là để thủ thuật có thể chạy trên IE. Mình đã test trường hợp thay các link CSS trên bằng code CSS trực tiếp, nhưng thủ thuật không chạy (ngay cả trên firefox), nếu bạn chèn thẳng code CSS vào mà không có dòng <!--[if lte IE 6]> {code CSS cho IE} <![endif]--> thì thủ thuật vẫn chạy được trên firefox, nhưng IE thì không. Vì thế tốt nhất nên xài link CSS gián tiếp kiểu này thì tốt hơn.

5. Save template.
6. Tạo 1 widget HTML/Javascript rồi dán code HTML bên dưới vào:

<div class="container">
<div class="menu">

<ul>
<li><a class="hide" href="#">Menu1</a>

<!--[if lte IE 6]>
<a href="#">Menu1
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#" >Submenu1.1</a></li>
<li><a href="#" >Submenu1.2</a></li>
<li><a href="#" >Submenu1.3</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">Menu2</a>

<!--[if lte IE 6]>
<a href="#">Menu2
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#">SubMenu2.1</a></li>
<li><a href="#">SubMenu2.2</a></li>
<li><a href="#">SubMenu2.3</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">Menu3</a>

<!--[if lte IE 6]>
<a href="#">Menu3
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#">SubMenu3.1</a></li>
<li><a href="#">SubMenu3.2</a></li>
<li><a href="#">SubMenu3.3</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="#">Menu4</a>

<!--[if lte IE 6]>
<a href="#">Menu4
<table><tr><td>
<![endif]-->

<ul>
<li><a href="#">SubMenu4.1</a></li>
<li><a href="#">SubMenu4.2</a></li>
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

</ul>

</div>
</div>

- Thay kí tự "#" bằng liên kết của bạn.

Như vậy đã xong, chúc các bạn thành công.


Enter your mail address:

5

ucmasnb

có thể cho nó nằm ngang ra được không bác fandung :S

Khách (ẩn danh)

Không sổ dọc đc anh ak :

Captcha Pro

Captcha Pro Softwave: http://captcha-softwave.blogspot.com

Khách (ẩn danh)

link file css hình như die rồi đó bạn

Sage Phạm

cho nó sang bên phải rồi ẩn hiện nó ntn bác fandung?



☺ 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