Hướng dẫn tạo menu xổ xuống (drop-down menu)

Trong HTML, để tạo một menu xổ xuống, các bạn dùng thẻ <select> kết hợp với các thẻ <option> với những tham số và giá trị cần thiết... Tôi viết bài này khá chi tiết, đọc xong bạn sẽ hiểu được nguyên tắc làm drop-down menu và có thể tự tạo cho mình Label dạng xổ xuống.

CODE tạo menu xổ xuống như sau:

CODE 1:

<select name="tenmenu" onchange="javascript:self.location.href=this.options[this.selectedIndex].value" size="-1">

<option value="v1">display1</option>
<option value="v2" selected>display2</option>
<option value="v3">display3</option>
.......
<option value="vn">displayn</option>

</select>


Đoạn CODE trên có nhiều tham số, nhưng nếu chỉ tạo menu xổ xuống (drop-down) ta chỉ cần chú ý các chỗ màu đỏ. Ở dòng đầu tiên là onchange="javascript:self.location.href=this.options[this.selectedIndex].value". Mã này dùng để xử lý sự kiện khi ta click chọn menu thì trình duyệt sẽ chuyển trang đến trang được chọn. Trang được chọn nằm trong các thẻ <option> bao gồm địa chỉ của trang ( v1, v2, v3,...) và dòng text hiển thị tương ứng (như display1, display2,...). Mã size ="-1" là để chỉ bề rộng của menu. Nếu giá trị là -1 thì menu sẽ tự canh. Bạn có thể thay -1 bằng giá trị nguyên dương khác nếu muốn menu hiện đúng kích cỡ mình thích. Một chú ý nữa là chữ selected . Chữ này có tác dụng hiển thị giá trị của option cần chọn làm mặc định. Bạn có thể cho selected ở option nào mà bạn thích tuy nhiên chỉ có thể cho 1 selected mà thôi.

Ví dụ với đoạn code như sau:

CODE 2:

<select name="drdowmenu" onchange="javascript:self.location.href=this.options[this.selectedIndex].value" >
<option value="http://google.com">Google</option>
<option value="http://blogger.com">Blogger.com</option>
<option value="http://danghienit.blogspot.com" selected>Quang Hien</option>
<option value="http://mail.yahoo.com">Yahoo! Mail</option>
</select>


sẽ thể hiện thành:

GoogleBlogger.comQuang HienYahoo! MailVân vân và vân vân...

Tương tự đoạn CODE 2, bạn có thể thêm nhiều link và text hiển thị bằng cách tạo thêm các option để có một menu dài, đầy đủ.

Áp dụng tạo Drop-Down menu cho label trong blogspot

* Hãy chắc chắn rằng blog của bạn đã có một Label Widget.

- Vào Template -> Edit HTML, download backup một bản template để phòng hờ.
- Chọn Expand Widget Templates
- Tìm đến code của label widget (bằng cách gõ vào type='Label' từ hộp tìm kiếm của trình duyệt). Đoạn code tìm được có dạng như sau:

CODE 3:

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>

</b:if>
<div class='widget-content'>

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Ta sửa từ dòng <b:loop values='data:labels' var='label'> cho đến dòng </b:loop> thành: (thực ra bạn chỉ cần xóa và copy paste thôi)

CODE 4:

<select name='drdowmenu' onchange='javascript:self.location.href=this.options[this.selectedIndex].value' size='-1'>
<option name='selected' value=''>Choose a Label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</option>
</b:loop>
</select>


Trong template của Blogspot sử dụng DOCUMENT TYPE là XHTML 1.0 Strict nên ta phải thay selected thành name='selected'.

- Save Template lại và hoàn tất.

*** Drop-down menu có ưu điểm là chiếm diện tích nhỏ trên trang web nhưng thể hiện đầy đủ. Nhược điểm là người xem lười mở menu và do đó họ không thấy hết được các chủ đề (labels) của bạn một cách trực quan.

Hướng dẫn tạo menu xổ xuống (drop-down menu)