• Righteous Kill

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis ...

    read-more

  • Quisque sed felis

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus.Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. [caption id="attachment_111" align="alignright" width="300" caption="Image with caption"][/caption] Mauris elit. Donec neque. ...

    read-more

  • Etiam augue pede, molestie eget.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis ...

    read-more

  • Hellgate is back

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris ...

    read-more
Previous Next

Tạo Dropdown Menu đơn giản

Posted by Phạm Hữu Dư On - - 0 nhận xét


Tạo Dropdown Menu đơn giản

11.6.11 / Được đăng bởi Noct
css3 dropdown menu
Lần trước có một bạn nào đó đã giới thiệu một Menu xổ dọc khá đẹp nhưng lại chưa biết cách áp dụng trên Blogger. Sau khi tìm hiểu thì mình thấy loại menu này bố cục khá phức tạp, hơi khó để viết hướng dẫn nên đã loại bớt một số thành phần và điều chỉnh lại CSS, được kết quả như thế này:




     Đầ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.

Categories:

Leave a Reply