banner

Trang được xây dựng với nội dung giải trí dành cho tuổi thơ, giúp các bé hiểu biết thêm về ngôn ngữ, lịch sử, sự vật đời sống... thông qua các câu truyện Cổ tích, Truyền thuyết dân gian, nghệ thuật vẽ tranh, hài hước... từng bước xây dựng nền tảng trí tuệ cho bé. Trang cũng dành một phần nội dung cho bậc làm cha mẹ như: Đặt tên cho con - Tưởng dễ mà khó, sứ khỏe, nấu ăn, bài thuốc hay... Chúc các bé cùng phụ huynh thư giãn vui khỏe! Bé nào muốn có tranh, video, vui cười... muốn đăng lên trang này, nhờ bố mẹ gửi vào hộp thư: phungban@gmail.com để duyệt nội dung trước khi được đăng nhé!
Bài ngẫu nhiên
Bé nào có tranh đẹp, video hay, vui cười,... muốn đăng trên trang này thì nhờ bố mẹ gửi vào hộp thư: phungban@gmail.com để duyệt trước khi được đăng.
20 tháng 5, 2013
Trang chủ > THỦ THUẬT > Tạo Dropdown Menu đơn giản

Tạo Dropdown Menu đơn giản


Menu xổ dọc khá đẹp loại menu này bố cục khá phức tạp:
Xem thử:
Demo
     Đầu tiên, bạn chèn đoạn sau ngay bên dưới thẻ <body> hoặc phía trên <div id='outer-wrapper'>
<link href='http://dl.dropbox.com/u/11103024/menu.css' media='screen' rel='stylesheet' type='text/css'/>
<b:section id='menu' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML91' locked='false' title='Menu' type='HTML'/>
</b:section>
Đoạn mã trên sẽ tạo một tiện ích Javascript/HTML mới trên blog của bạn, hãy quay lạiPhần tử trang rồi tiếp tục chèn vào tiện ích này:
<ul class="menu">
<li class="no_drop"><a href="#">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
<li><a href="#">Mac Apps</a></li>
<li><a href="#">Web Apps</a></li>
<li><a href="#">NetTuts</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">More...</a></li>
</ul>
</div></div></li>

<li><a href="#" class="drop">2 columns</a>
<div class="dropdown_2columns">

<div class="col_1">
<h3>Some Links</h3>
<ul>
<li><a href="#">ThemeForest</a></li>
<li><a href="#">GraphicRiver</a></li>
<li><a href="#">ActiveDen</a></li>
</ul>
</div>

<div class="col_1">
<h3>Useful Links</h3>
<ul>
<li><a href="#">NetTuts</a></li>
<li><a href="#">VectorTuts</a></li>
<li><a href="#">PsdTuts</a></li>
</ul>
</div>

<div class="col_1">
<h3>Other Stuff</h3>
<ul>
<li><a href="#">FreelanceSwitch</a></li>
<li><a href="#">Creattica</a></li>
<li><a href="#">WorkAwesome</a></li>
</ul>
</div>

<div class="col_1">
<h3>Misc</h3>
<ul>
<li><a href="#">Design</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Flash</a></li>
</ul>
</div></div></li></ul>
Lưu lại và kiểm tra kết quả. Do mã CSS của menu khá dài nên Noct đã chuyển chúng vào trong file menu.css để tiện đăng bài, bạn có thể chuyển ngược lại vào phía trên thẻ</b:skin> trong template để chỉnh sửa, và đừng quên xóa dòng màu xanh.
06:01
Người đăng: vào lúc 06:01
  • Nhận xét bằng Blogger
  • Nhận xét bằng Facebook
Item Reviewed: Tạo Dropdown Menu đơn giản Rating: 5 Reviewed By: PHÙNG BẢO KIÊN