Thứ Bảy, 29 tháng 12, 2012

Dropdown menu có search


Menu giúp cho bạn trình bày các chương mục trong blog được gọn gàng và khoa học hơn. Lần trước Karl đã từng giới thiệu cho các bạn một mẫu Menu Drop. Hôm nay Karl tiếp tục giới thiệu cho các bạn thêm một mẫu Menu Drop khác.



Cách thực hiện:
  1. Đăng nhập Blogger
  2. Vào Thiết Kế (Design)
  3. Chọn tab Chỉnh Sửa HTML (Edit HTML). Không cần chọn Mở Rộng tiện ích mẫu (Expand Widget Templates). 
  4. Thêm đoạn code sau trước thẻ  ]]></b:skin> .
#topmenu{background:#545454; color:#fff;width:850px;margin:auto;padding:5px;height:20px;z-index:30;}
#topmenu1{width:650px;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}
- Bạn điều chỉnh lại các Width cho phù hợp với blog của bạn. với:
  • width:850px là chiều rộng của menu thường ứng với chiều rộng của blogspot.
  • width:200px là chiều rộng của ô tìm kiếm
  • width:650px là chiều rộng phần chứa các Sub menu thường bằng width:850px - width:200px
    5. Chèn đoạn code sau trước thẻ  <body> . Với các mẫu Simple của blogspot thì là thẻ:   <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> hoặc tương tự.
- Chèn đoạn code bên dưới vào sau đoạn code vừa tìm được: 

<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML92' 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 bài viết ...&quot;;}' onfocus='if (this.value == &quot;Tìm kiếm bài viết ...&quot;) {this.value = &quot;&quot;}' tabindex='7' type='text' value='Tìm kiếm bài viết ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='http://vinacer.blogspot.com/'/>
</form></div>
<div style='clear:both'/>
</div>
Trong đó:
  • Bạn có thể thay chữ Tìm kiếm bài viết ... bằng chữ bạn muốn. Lưu ý thay cả 3 chữ thì khi click chuột vào mới có hiệu ứng rolover.
  • Thay địa chỉ (URL) blog http://vinacer.blogspot.com/ thành địa chỉ (URL) blog của bạn.
    6. Lưu mẫu (Save template) Lại.
   7. Vào Thiết Kế (Design) - Phần tử trang bạn sẽ thấy xuất hiện 1 HTML92. bạn bấm vào chỉnh sửa và Pate đoạn code bên dưới vào.
<ul class="menu">
<li class="drop0"><a href="http://vinacer.blogspot.com/">Home</a></li>
<li class="drop0"><a href="http://vinacer.blogspot.com/p/so-o-trang-blog-vinacer.html">Site map</a></li>
<li class="drop0"><a href="#">About Me</a></li>
<li><a href="#" class="drop">Drop menu 1</a>
<div class="drop1">
<ul>
<li><a href="#">Drop menu 1.1</a></li>
<li><a href="#">Drop menu 1.2</a></li>
<li><a href="#">Drop menu 1.3</a></li>
<li><a href="#">Drop menu 1.4</a></li>
</ul>
</div></li>

<li><a href="#" class="drop">Drop menu 2</a>
<div class="drop2">

<div class="col">
<h3>Drop menu 2.1.1</h3>
<ul>
<li><a href="#">Drop menu 2.1.2</a></li>
<li><a href="#">Drop menu 2.1.3</a></li>
<li><a href="#">Drop menu 2.1.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.2.1</h3>
<ul>
<li><a href="#">Drop menu 2.2.2</a></li>
<li><a href="#">Drop menu 2.2.3</a></li>
<li><a href="#">Drop menu 2.2.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.3.1</h3>
<ul>
<li><a href="#">Drop menu 2.3.2</a></li>
<li><a href="#">Drop menu 2.3.3</a></li>
<li><a href="#">Drop menu 2.3.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.4.1</h3>
<ul>
<li><a href="#">Drop menu 2.4.2</a></li>
<li><a href="#">Drop menu 2.4.3</a></li>
<li><a href="#">Drop menu 2.4.4</a></li>
</ul>

</div></div></li></ul>
Trong đó:
  • Thay dấu # là liên kết tới bài viết, nhãn hoặc trang của bạn.
  • Thay các phàn màu xãnh là các nhãn, bài viết trên menu chính.
  • Thay phần màu cam là các tiêu đề trong phần Sub menu xổ xuống.
  • Bạn có thể thêm các Sub menu drop bằng cách thêm các phần màu xanh da trơi và xanh la mạ vào ngay trước thẻ </ul>
Chúc thành công!
Người đăng: vào lúc
Nhãn:

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)