Home » Thủ thuật blog
Menu dọc sổ ngang - Chỉ sử dụng CSS
Thứ Năm, 21 tháng 5, 2009
CSS Menu Without Javascript

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.

- 4+ Hiệu ứng TEXT đơn giản từ CSS
- Bo 2 cạnh bên với CSS dùng hình ảnh
- Tạo ngôi hình ngôi sao với CSS Border
- 18 đọan code CSS ngắn - Rất có ích cho việc chỉnh sửa code CSS của template
- Tạo tab nội dung với CSS
- Menu nằm ngang - Hiệu ứng sổ menu con kiểu 1 hàng ngang (Mootools effect)
- Bộ sưu tập 31 style menu nằm ngang
- CSS Outline : Tạo đường viền cho khung
- Tạo tab có nội dung trượt liên tục theo thời gian - Ứng dụng của Mootools
- Hiểu rõ hơn về bố cục Blog của blogspot : Dành cho người mới bắt đầu tập chỉnh sửa CSS
- Bo góc với CSS : Bo 4 góc, 2 góc trên, 2 góc dưới... dùng hình ảnh
- Bo góc với lệnh CSS
Comments[ 0 ]
Đăng nhận xét