Thích trang
    Trở thành fan của Tanchau123.blogspot.com

    Bạn muốn nhận tin tức mới nhất từ Tanchau123.blogspot.com? Hãy nhấn nút "Thích" bên dưới để nhận thông tin mới nhất từ chúng tôi trên Facebook.

T

a

n

chau123

Blog Giải Trí Tổng Hợp

trang chủ
Báo lỗi bài
    Báo lỗi thông tin bài viết

    Nhập thông tin báo lỗi vào ô bên dưới

18:30 ngày 27/3/12

Tạo Dropdown Menu đơn giản

Lần trước mình đã 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:

 Xem 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ại Phầ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 mình đã 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
Nếu file die các bạn copy dòng này đặt trước thẻ ]]></b:skin>:
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0 }
.menu ul,.menu li {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left; }
.menu h3 {
font-family:Arial, Helvetica, sans-serif;
font-weight:600;
font-size:14px;
line-height:21px;
margin-top:7px;
margin-bottom:14px;
padding-bottom:7px;
text-shadow: 1px 1px 1px #FFFFFF;
border-bottom:1px solid #888888; }
.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)); }
.menu li {
float:left;
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-top:7px;
border:none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
.menu li:hover {
z-index:2;
background:#F4F4F4;
border:1px solid #aaaaaa;
padding: 4px 9px 4px 9px;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
-khtml-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px; }
.menu li.no_drop:hover {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px; }
.menu li a {
color: #FFFFFF;
outline:0;
text-decoration:none;
display:block;
text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.menu li .drop {
padding-right:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3IFWF0mRYhUWLE_bp34J301E9btU2T6_eczSC2nDwHovkPl8i20_MmzB7Efm3O3wdN10SDyAdKCDQ8egOjhO1VVSmLr45xsIFX_fhUg38usseuiljJuTHus7cFymOYfuLV9w29Iu3xHM//) no-repeat right 8px; }
.menu li:hover .drop {
padding-right:21px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3IFWF0mRYhUWLE_bp34J301E9btU2T6_eczSC2nDwHovkPl8i20_MmzB7Efm3O3wdN10SDyAdKCDQ8egOjhO1VVSmLr45xsIFX_fhUg38usseuiljJuTHus7cFymOYfuLV9w29Iu3xHM//) no-repeat right 7px; }
.menu li:hover div a { color:#a40802; }
.menu li:hover div a:hover { color:#fd190f; }
.menu li ul li a:hover { color:#fd190f; }
.dropdown_1column,.dropdown_2columns {
margin:4px auto;
position:absolute;
background:#F4F4F4;
border:1px solid #aaaaaa;
border-top:none;
padding:10px 5px 10px 5px;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); }
.dropdown_1column,.dropdown_2columns {
left:-999em;
text-align:left;
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
-khtml-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px; }
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.menu li:hover .dropdown_1column,.menu li:hover .dropdown_2columns{left:-1px;top:auto}
.col_1,.col_2 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px; }
.col_1 {width:130px;}
.col_2 {width:270px;}
.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:130px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
Chúc các bạn thành công!!!

Mới cập nhật

Bình luận

· Thêm biểu tượng cảm xúc
Chọn "Nhận xét với tên: Ẩn danh" hoặc Đăng ký tài khoản để bình luận