Hướng dẫn tạo thanh Drop Menu cố định ở đầu blog.

Hướng dẫn tạo thanh Drop Menu cố định ở đầu blog.

Hôm trước mình đã hướng dẫn tạo thanh menu cố định ở đầu blog nhưng với thủ thuật trên thì nó chỉ đơn giản là một menu từ linklist. Hôm nay mình sẽ phát triển thủ thuật này lên 1 tí theo lời nhờ củaiG4VN thêm hiệu ứng drop cho thanh menu này.

Xem Demo

1. Vào template chèn đoạn css sau phía trên thẻ ]]></b:skin>

#topmenu-outer{z-index:30; height:20px;width:100%;background:#545454; color:#fff; text-shadow:1px 1px 1px #000; top:0px;right:0px; position:fixed;padding:5px;}
#topmenu{width:990px;margin:auto;}
#topmenu1{width:790px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px;    text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu {    list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center;    position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto;    position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px;    }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px;    line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0;    float:none;text-align:left;width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}

2. Tiếp tục chèn đoạn code sau vào bên dưới thẻ mở <body...> (dấu ... có thể khác nhau hoặc không có tùy blog)

<div id='topmenu-outer'>
<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML31' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Tìm kiếm thủ thuật ...&quot;;}' onfocus='if (this.value == &quot;Tìm kiếm thủ thuật ...&quot;) {this.value = &quot;&quot;}' tabindex='7' type='text' value='Tìm kiếm thủ thuật ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='www.voquocan.com'/>
</form></div>
<div style='clear:both'/>
</div>
</div>

3. Save template lại rồi về mục Phần tử trang bạn sẽ thấy xuất hiện một tiện ích HTML mới ở đầu blog. Bạn chèn đoạn code sau vào tiện ích HTML trên:

<ul class="menu">
<li class="drop0"><a href="http://www.voquocan.com">Trang Chủ</a></li>
<li class="drop0"><a href="http://www.voquocan.com/p/sitemap.html">Sơ Đồ Blog</a></li>
<li class="drop0"><a href="http://www.voquocan.com/p/voquocan.html">About Me</a></li>
<li><a href="http://www.voquocan.com/p/sitemap.html" class="drop">Danh sách Label</a>
<div class="drop1">
<ul>
<li><a href="http://www.voquocan.com/search/label/Thủ thuật blog?max-results=5">Tất cả thủ thuật</a></li>
<li><a href="http://www.voquocan.com/search/label/Blogger?max-results=5">Blogger</a></li>
<li><a href="http://www.voquocan.com/search/label/Comments?max-results=5">Comments</a></li>
<li><a href="http://www.voquocan.com/search/label/Emoticons?max-results=5">Emoticons (Icons)</a></li>
<li><a href="http://www.voquocan.com/search/label/Bookmark?max-results=5">Bookmark</a></li>
</ul>
</div></li>

<li><a href="http://www.voquocan.com/p/sitemap.html" class="drop">Bài Viết Xem Nhiều</a>
<div class="drop2">

<div class="col">
<h3>Menu</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/03/top-menu.html">Float Menu</a></li>
<li><a href="http://www.voquocan.com/2012/02/drop-menu.html">Drop Menu 1</a></li>
<li><a href="http://www.voquocan.com/2012/03/top-menu.html">Drop Menu 2</a></li>
</ul>
</div>

<div class="col">
<h3>Template</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/share-template-01.html">Template 01</a></li>
<li><a href="http://www.voquocan.com/2012/03/template.html">HTML</a></li>
<li><a href="http://www.voquocan.com/2012/03/css01.html">CSS</a></li>
</ul>
</div>

<div class="col">
<h3>Comments</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/threaded-comment.html">Comments 6 cấp</a></li>
<li><a href="http://www.voquocan.com/2012/01/mot-giao-dien-khac-cho-threaded.html">Comments 2 cấp</a></li>
<li><a href="http://www.voquocan.com/2011/12/tao-khung-quick-comments-cho-blog-cbox.html">Quick Comments</a></li>
</ul>
</div>

<div class="col">
<h3>Blogger</h3>
<ul>
<li><a href="http://www.voquocan.com/2012/02/link.html">Liên kết blog</a></li>
<li><a href="http://www.voquocan.com/2011/01/ask.html">Hỏi - Đáp</a></li>
<li><a href="http://www.voquocan.com/2011/12/nhung-ieu-can-luu-y-khi-design-blog.html">Bí Quyết</a></li>
</ul>

</div></div></li></ul>

Save lại là xem như hoàn thành.
4. Thay đổi code:

Đoạn code ở bước 1 là css. Bạn tìm hiểu bài viết này nếu muốn thay đổi về css.
Đoạn code ở bước 2 thay www.voquocan.com thành địa chỉ blog của bạn.
Đoạn code ở bước 3 Trong đoạn code này chú ý 1 tí bạn sẽ thấy có 3 class lớn.
 » drop0: là không drop menu.
 » drop1: là menu drop 1 cột.
 » drop2: là menu drop 2 cột
Bạn thay đổi nội dung cho phù hợp là được.

Nếu có vấn đề gì bạn để lại comments bên dưới mình sẽ hướng dẫn trong thời gian sớm nhất có thể. Chúc bạn thành công!