▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

MENU NGANG CÓ HIỆU ỨNG ĐỘNG KHI RÊ CHUỘT

Hôm nay, tôi chia sẻ đến với các bạn cách tạo menu ngang có hiệu ứng động khi rê chuột (không có menu con). Với menu này khi bạn rê chuột đến một thẻ bất kỳ trên menu thì thẻ đó sẽ tự động đổi màu khác khá đẹp. Mời bạn bấm vào Xem thử để trải nghiệm






Xem thử




Đầu tiên, bạn đăng nhập vào Blog > chọn Thiết kế > chọn Chỉnh sửa HTML, bạn bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào lệnh ]]></b:skin>, sau đó dán đoạn code phía dưới trước dòng lệnh đó.

ul#topnav {
margin: 0px 0 0px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 650px; /*độ rộng của menu*/
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px; /*chiều cao của menu*/
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff; /*màu text của menu*/
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}

ul#topnav.v2 span{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vNGQI8YSdq4b-HZiZORi0NiE-YQwSC-ahlpPO0gDii1A0gzSP_fD2HCBDr4YqN6c01Qs2vNHI50JlLyXQQTzvCZ6V68eZWpWG6xRGpUh8hDk1UjeLupvbepwPe60DwecaR-EVy0vX5KJ/) repeat-x left top; /*màu nền của menu*/
}
ul#topnav.v2 a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7vNGQI8YSdq4b-HZiZORi0NiE-YQwSC-ahlpPO0gDii1A0gzSP_fD2HCBDr4YqN6c01Qs2vNHI50JlLyXQQTzvCZ6V68eZWpWG6xRGpUh8hDk1UjeLupvbepwPe60DwecaR-EVy0vX5KJ/) repeat-x left bottom; /*màu nền của menu*/
}



 Tiếp tục, trong khung tìm kiếm nhỏ bạn thay dòng lệnh ]]></b:skin> bằng lệnh <head> và dán đoạn code dưới đây vào sau nó.

<script src='http://dl.dropbox.com/u/66348944/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66348944/ani_menu.js' type='text/javascript'/>
Cuối cùng bấm Lưu lại. Bây giờ, bạn trở lại trang thiết kế > Thêm tiện ích > Thêm HTML/Javacript rồi dán đoạn code phía dưới vào.
 

<ul id="topnav" class="v2">
<li><a href="URL Menu 1">MENU 1</a></li>
<li><a href="URL Menu 2">MENU 2</a></li>
<li><a href="URL Menu 3">MENU 3</a></li>
<li><a href="URL Menu 4">MENU 4</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
<li><a href="URL Menu 5">MENU 5</a></li>
<li><a href="URL Menu 6">MENU 6</a></li>
</ul>

Bạn thay đổi các dòng màu đỏ và màu xanh theo ý mình và bấm Lưu lại.
Bạn trở lại vào Blog sẽ thấy có một menu ngang màu đỏ và khi bạn rê chuột vào menu này sẽ có hiệu ứng chuyển động tuyệt đẹp.
Chúc bạn thành công

12 nhận xét:

tung5a nói...

uhm hôm nay mình đã biết tuổi bạn rùi. Mình sẽ kêu bạn = anh. Anh Dũng ơi cho em hỏi khi mình tạo menu xổ xuống rồi mình có thể tạo thêm menu ko có menu con nữa được ko anh

dunghennessy nói...

Vẫn được như bình thường Tùng ạ, làm thử xem

tung5a nói...

anh ơi đoạn code này khi em áp dụng thử thì cũng có một khoảng trống khoảng 1cm nằm ở trên thanh điều hướng đó anh, anh xem lại dùm em nha, cám ơn anh nhiều.

dunghennessy nói...

Anh đã vào boog của em và không thấy menu ngang này, em thử làm lại và để nguyên để anh vào xem xem nó bị lỗi như thế nào mới chỉnh sửa lại cho em nha

tung5a nói...

em đã làm thử rồi anh vào trang của em mới tạo xem thử nha hattung.blogspot.com. có một khoảng trống nằm trên thanh điều hướng đó anh.

dunghennessy nói...

Đó là do lỗi của code thứ hai, anh đã chỉnh lại rồi đó, em thử làm lại code hai xem sao nha

tung5a nói...

cám ơn anh nhiều, em đã sữa lại được rồi, chúc anh có một buổi tối vui vẻ, và tràn đầy niềm vui..........

Nặc danh nói...

a oi anh chi giup e cach lay linh menu , e zot lam

dunghennessy nói...

Cách lấy link menu như sau:
Thí dụ em muốn đặt tên hiển thị của một menu có tên là: Ảo thuật (tên hiển thị này tương ứng chữ màu xanh trên bài hướng dẫn), còn link URL là: http://magiccardtricksvn.blogspot.com/ (đây là địa chỉ Blog của em tương ứng với màu đỏ trên bài hướng dẫn), có nghĩa là khi khách tham quan bấm vào thẻ Ảo thuật nó sẽ dẫn khách tham quan đến trang của em. Copy đường URL này bằng cách copy trên thanh adress của trình duyệt blog.

vuongsungdong nói...

bạn ui cho mình hỏi giờ mình muốn thiết kế cái thanh menu ngang như trang nè mà ko biết http://thoitrangcasau.blogspot.com/ mình muốn thiết kế thanh menu ngang chàn ra hai bên như vậy.mong được hồi âm sớm, cảm ơn ban nhiều nha.

dunghennessy nói...

Tôi chưa hiểu ý bạn lắm, "menu ngang chàn ra 2 bên là sao?", bạn nêu rõ hơn đi tôi sẽ hướng dẫn bạn (nếu biết)

Unknown nói...

sao anh gioi the:X:X

Đăng nhận xét

 
Powered by by: Blogger