Tạo Hộp Chọn Chủ Đề Bạn Quan Tâm

Tạo Hộp Chọn Chủ Đề Bạn Quan Tâm

Có 2 mẫu hộp để bạn lựa chọn

1. Click để mở
2. Tự động mở khi rê chuột vào khung hộp

Trước tiên bạn thêm 1 tiện ích tại nơi bạn muốn đặt chủ đề và chèn code sau

1.Click để mở dán vào doạn code sau :

<div class='widget-content'>
<div class='widget-content list-label-widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='width:100%;border-radius: 5px; border: 1px solid #528B8B; font: normal bold 13px Tahoma, Arial,Sans-Serif;color: #006400; margin: 0; padding: 0;'>
<option />Chọn chủ đề
<option value="Link nhãn?&max-results=5 " /> Tên nhãn
<option value="Link nhãn?&max-results=5" /> Tên nhãn
<option value="Link nhãn?&max-results=5" /> Tên nhãn
</select>
</div>
</div>

Nếu nhiều nhãn thì cứ thêm

<option value="Link nhãn?&max-results=5" /> Tên nhãn

Vào trước

</select>

2.Tự động mở khi rê chuột, bạn dán vào đoạn code sau :

<style type="text/css">
ul.dauto1label{display:none;}
li.main-menu:hover ul.dauto1label {display:block;z-index:100}
li.main-menu {position:relative;font: bold 14px times,Sans-Serif ;padding:2px !important}
ul.dauto1label{position:absolute;background:#f5f5f5;width:100%;padding:7px;border: 1px solid #666;border-radius:3px;margin:0}
.drtitle {border: 1px solid teal; font: bold 16px times,Sans-Serif ;color: teal; margin:o; padding: 3px;border-radius:3px}
ul.dauto1label li{border-bottom:1px dotted teal;padding:2px!important}
.dauto1label{
max-height: 295px;
overflow-x: hidden;
overflow-y: auto;
height: auto;}
</style>
<div class='sidebar section' id='sidebar'><div class='widget Label' id='Label1'>
<div class='widget-content list-label-widget-content'>
<li class='main-menu'><a class='drtitle'>Chọn chủ đề quan tâm &#9660;</a>
<ul class='dauto1label'>
<li>
<a dir='ltr' href="Link nhãn?&amp;max-results=5">Tên nhãn</a></li>
<li>
<a dir='ltr' href="Link nhãn?&amp;max-results=5">Tên nhãn</a></li>
<li><a dir='ltr'
href="Link nhãn?&amp;max-results=5">Tên nhãn</a></li>
</ul>
</li>
</div>
</div>
</div>

Nếu nhiều nhãn chỉ việc thêm

<li><a dir='ltr'
href="Link nhãn?&amp;max-results=5">Tên nhãn</a></li>

Vào trước

</ul>

Thế là xong, chúc các bạn thành công!

Share Share Share

Thủ thuật