Hi quest ,  welcome  |  sign in  |  registered now  |  need help ?

About

Blogger templates

Tạo menu rơi đơn giản

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:
                                     css3 dropdown menu



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

2 nhận xét:

Lê Hoàng Chiến nói...

Mình thấy rất hay nhưng mình không muốn sử dụng màu hiện tại giống như trên menu demo của bạn mà mình muốn chỉnh màu cho menu thì sao ?

lúc 20:06 28 tháng 3, 2012
anh tu nói...

Bạn vào file http://dl.dropbox.com/u/11103024/menu.css để chỉnh sửa lại mã css.
Bạn tìm đến vị trí này.
.menu {
list-style:none;
width:900px;
margin:30px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #830701;
border: 1px solid #a40802;
border-top: 1px solid #fd190f;
background: -moz-linear-gradient(top, #d70b02, #830701);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d70b02), to(#830701)); }
Bạn thay màu from(#d70b02), to(#830701)thành các màu mà bạn thích.
Bạn dùng google code để lưu mới hay copy tất cả file đó dán 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.

lúc 17:52 29 tháng 3, 2012

Đăng nhận xét

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