Thanh Minh: Tạo menu ngang thả xuống

Bước 1:

Log in vào Blogger, vào Layout và click chọn "Edit HTML"

Bước 2:

Tìm (CTRL+F) đoạn code: </head>
và Dán trên nó đoạn mã dưới:

<link href='http://pcnewsoft.110mb.com/tao%20menu%20blogspot/style.css' rel='stylesheet' type='text/css'/>

<script src='http://pcnewsoft.110mb.com/tao%20menu%20blogspot/script.js' type='text/javascript'/>

Sau đó save lại.
( Link dự phòng của 2 file script.js và style.css : Download ở đây)

Bước 3: Tạo một widgets với nội dung sau:

<ul class="menunew" id="menu">
<li><a href="#" class="menulink">dropdown one</a>
<ul>
<li><a href="#">navigation item 1</a></li>
<li>
<a href="#" class="sub">navigation item 2</a>
<ul>
<li class="topline"><a href="#">navigation item 1</a></li>
<li><a href="#">navigation item 2</a></li>
<li><a href="#">navigation item 3</a></li>
<li><a href="#">navigation item 4</a></li>
<li><a href="#">navigation item 5</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">navigation item 3</a>
<ul>
<li class="topline"><a href="#">navigation item 1</a></li>
<li><a href="#">navigation item 2</a></li>
<li>
<a href="#" class="sub">navigation item 3</a>
<ul>
<li class="topline"><a href="#">navigation item 1</a></li>
<li><a href="#">navigation item 2</a></li>
<li><a href="#">navigation item 3</a></li>
<li><a href="#">navigation item 4</a></li>
<li><a href="#">navigation item 5</a></li>
<li><a href="#">navigation item 6</a></li>
</ul>
</li>
<li><a href="#">navigation item 4</a></li>
</ul>
</li>
<li><a href="#">navigation item 4</a></li>
<li><a href="#">navigation item 5</a></li>
</ul>
</li>
<li><a href="http://blog4vn.blogspot.com" class="menulink">blogger help</a></li>
<li>
<a href="#" class="menulink">dropdown two</a>
<ul>
<li><a href="#">navigation item 1</a></li>
<li>
<a href="#" class="sub">navigation item 2</a>
<ul>
<li class="topline"><a href="#">navigation item 1</a></li>
<li><a href="#">navigation item 2</a></li>
<li><a href="#">navigation item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">dropdown three</a>
<ul>
<li><a href="#">navigation item 1</a></li>
<li><a href="#">navigation item 2</a></li>
<li><a href="#">navigation item 3</a></li>
<li><a href="#">navigation item 4</a></li>
<li><a href="#">navigation item 5</a></li>
<li>
<a href="#" class="sub">navigation item 6</a>
<ul>
<li class="topline"><a href="#">navigation item 1</a></li>
<li><a href="#">navigation item 2</a></li>
</ul>
</li>
<li><a href="#">navigation item 7</a></li>
<li><a href="#">navigation item 8</a></li>
<li><a href="#">navigation item 9</a></li>
<li><a href="#">navigation item 10</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>

Save lại là xong.

Như vậy bạn đã thực hiện được Menu dạng thanh ngang bao gồm các cộc chính sổ xuống các menu phụ cùng nội dung chính như hình minh họa trên. Tất nhiên bạn phải điều chỉnh nội dung các Navigation Item cũng như đường link # trước khi lưu lại công việc đã thực hiện.
Chúc các bạn thành công.

Thanh Minh

Trang chủ

8/1/10

Tạo menu ngang thả xuống

2 nhận xét: