Với mẫu dropdown fly menu sử hiệu ứng bay từ CSS3 blog của bạn sẽ đặc biệt hơn, và sẽ không lo tốc độ vì tất cả đều là CSS3. Các menu con sẽ bay khi dê chuột vào menu chính. Menu hoạt động tốt trên các trình duyệt như IE10, firefox, sarafi, opera,.... Các bạn có thể xem ảnh minh họa hoặc demo.
VIEW DEMO
» Cách thêm menu từ CSS3 với hiệu ứng bay mượt mà cho blogger/blogspot.
1. Đăng nhập vào blog
2. Chọn Bố cục (layout)
3. Chọn Thêm Tiện ích (Add widget) => Tạo HTML/Javarscipts và dán đoạn code bên dưới và dán vào.
<style>/* Flying Css3 menu http://namkna.blogspot.com/*/ #flyingmenubt,#flyingmenubt ul { list-style: none outside none; margin: 0; padding: 0; height:500px;} #flyingmenubt { font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif; font-size: 13px; height: 36px; list-style: none outside none; margin: 40px auto; text-shadow: 0 -1px 3px #202020; width: 980px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow: 0px 3px 3px #cecece; -webkit-box-shadow: 0px 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } #flyingmenubt ul { left: -9999px; position: absolute; top: -9999px; z-index: 2; } #flyingmenubt li { border-bottom: 1px solid #575757; border-left: 1px solid #929292; border-right: 1px solid #5d5d5d; border-top: 1px solid #797979; display: block; float: left; height: 34px; position: relative; width: 105px; } #flyingmenubt li:first-child { border-left: 0 none; margin-left: 5px; } #flyingmenubt li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none; text-align: center; text-decoration: none; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } /* keyframes #animation1 */ @-webkit-keyframes animation1 { 0% {-webkit-transform: scale(1);} 30% {-webkit-transform: scale(1.3);} 100% {-webkit-transform: scale(1);}} @-moz-keyframes animation1 { 0% {-moz-transform: scale(1);} 30% {-moz-transform: scale(1.3);} 100% {-moz-transform: scale(1);}} #flyingmenubt li > a:hover { -moz-animation-name: animation1; -moz-animation-duration: 0.7s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.7s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #flyingmenubt li:hover > a { z-index: 4; } #flyingmenubt li:hover ul.subs { left: 0; top: 34px; width: 150px; } #flyingmenubt ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); opacity: 0; width: 100%; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* keyframes #animation2 */ @-webkit-keyframes animation2 { 0% {margin-left:185px;} 100% {margin-left:0px;opacity:1;} } @-moz-keyframes animation2 { 0% {margin-left:185px;} 100% { margin-left:0px;opacity:1;} } #flyingmenubt li:hover ul li { /* css3 animation */ -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* animation delays */ #flyingmenubt li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; } #flyingmenubt li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; } #flyingmenubt li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } #flyingmenubt li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; } #flyingmenubt li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } #flyingmenubt li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; } #flyingmenubt li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } #flyingmenubt li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }</style> <ul id="flyingmenubt"> <li><a href="http://namkna.blogspot.com/">Home</a></li> <li><a class="hsubs" href="#">Menu 1</a> <ul class="subs"> <li><a href="#">Submenu 1</a></li> <li><a href="#">Submenu 2</a></li> <li><a href="#">Submenu 3</a></li> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> </ul> </li> <li><a class="hsubs" href="http://namkna.blogspot.com/">Menu 2</a> <ul class="subs"> <li><a href="#">Submenu 2-1</a></li> <li><a href="#">Submenu 2-2</a></li> <li><a href="#">Submenu 2-3</a></li> <li><a href="#">Submenu 2-4</a></li> <li><a href="#">Submenu 2-5</a></li> <li><a href="#">Submenu 2-6</a></li> <li><a href="#">Submenu 2-7</a></li> <li><a href="#">Submenu 2-8</a></li> </ul> </li> <li><a class="hsubs" href="#">Menu 3</a> <ul class="subs"> <li><a href="#">Submenu 3-1</a></li> <li><a href="#">Submenu 3-2</a></li> <li><a href="#">Submenu 3-3</a></li> <li><a href="#">Submenu 3-4</a></li> <li><a href="#">Submenu 3-5</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> <li><a href="#">Menu 6</a></li> <li><a href="#">Back</a></li> </ul>
» Tùy chỉnh:
- Sửa margin: 40px auto; nếu menu có khoảng cách với phần trên và dưới, Có thể đổi thành margin: 0 auto; là tốt nhất,
- width: 980px; là chiều rộng của menu. hãy chỉnh lại cho phù hợp với độ rộng blog của bạn.
- width: 105px; là chiều rộng menu con. hãy thay đổi nếu tiêu đề menu quá dài.
- width: 150px; là chiều rộng tiêu đề khi dê chuột vào menu,
- height: 36px; là chiều cao của menu chính.
- Thay dấu thăng màu đỏ (#) là liên kết tới bài viết, trang, hoặc nhãn của bạn.
- Thay màu xanh là tên bài viết, trang, hoặc nhãn tương ứng với link màu đỏ. nên là từ khố không nên quá dài sẽ sấu menu.
4- Lưu tiện ích đó lại và quay trở lại blog để kiểm tra thành quả của bạn nha.
Nếu gặp bất cứ khó khăn gì khi áp dụng các bạn hãy cứ comment ở bên dưới mình sẽ giải đáp cho các bạn. Và đừng quyên chia sẻ bài viết này cho nhiều người được biết đến nha.
Nhận xét
Bạn Namkna làm ảnh động như thế nào mà hay quá.^^
Trả lờiXóa1- Quay phim đoạn cần làm ảnh bằng: http://namkna.blogspot.com/2011/07/fscapture-69-full-portable-phan-mem.html
Xóa2- Chuyển video thanh anh bang: http://namkna.blogspot.com/2013/02/free-video-to-gif-converter.html
Nhận xét này đã bị tác giả xóa.
Trả lờiXóamình đang làm cái blog này lấy theme genk!
Trả lờiXóacho mình hỏi là cái thanh menu trên của mình làm thế nào để cho nó có menu con xổ dọc xuống vậy ?
mình có thử tạo thanh menu khác nhưng không thể bố cục nó ở vị trí giữa ! vậy mình phải làm thế nào
nếu cái có thời gian có thể làm hộ mình qua teamviewer được không
mail :tdthinh.it@gmail.com hoặc facebook:Thịnh
thank rất nhiều
P/s : mình gà nhưng thích nghịch linh tinh
Muốn có menu con phải tùy chỉnh lại phần CSS. Cách nhanh nhất là hãy thay code menu nào khác bạn thích vào đoạn code sau:
Xóa<div class='menu margintop10'>
<span class='menuleft'></span>
<span class='menuright'></span>
<div class='menumain'>
<a class='logo' href='/' title='Công Nghệ - Cuộc Sống'></a>
<ul>
<li class='mn_item menuboder' id='div_video'><a class='a_item' href='http://thuthuat2t.blogspot.com/search/label/Video'>Video<span></span></a></li>
<li class='mn_item menuboder' id='div_187'><a class='a_item' href='http://thuthuat2t.blogspot.com/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Mobile'>Mobile<span></span></a>
</li>
<li class='menuboder mn_item' id='div_188'>
<a class='a_item' href='#'>Action<span></span></a>
</li>
<li class='menuboder mn_item' id='div_194'>
<a class='a_item' href='#'>Internet<span></span></a>
</li>
<li class='menuboder mn_item' id='div_197'>
<a class='a_item' href='#'>Đồ chơi số<span></span></a>
</li>
<li class='menuboder mn_item' id='div_198'>
<a class='a_item' href='http://genk.vn/kham-pha.chn' target='_blank'>Khám phá<span></span></a>
</li>
<li class='menuboder mn_item' id='div_186'>
<a class='a_item' href='#'>Thủ thuật<span></span></a>
</li>
<li class='menuboder mn_item' id='div_211'>
<a class='a_item' href='#'>CNTT<span></span></a>
</li>
<li class='menuboder mn_item' id='div_8'>
<a class='a_item' href='#' target='_blank'>Game</a><span></span>
</li>
<li class='menuboder mn_item' id='div_hoidap'>
<a class='a_item' href='#'>Hỏi đáp<span></span><u class='new'></u></a></li>
<li class='menuboder mn_item' id='div_191'>
<a class='a_item' href='http://genk.vn/la-fun.chn' target='_blank'>Lạ & Fun<span></span><u class='beta'></u></a>
</li>
</ul>
</div>
</div>
anh nó đây
Xóamình làm như bạn nó bọ thế này và cả trang blog bị lệch sang bên trái
bạn có thể xem code của mình
mình gửi qua mail cho bạn nhé ! sửa hộ mình nhé !
à cái code này là code cũ của mình khi mình chưa sửa như bạn hướng dẫn
thank
Oke mail mình là tavannam01@gmail.com
XóaNhớ ghi rõ yêu cầu nha bạn :)
Check mail đi nha bạn. nếu không thấy thì kiểm tra hộp thư spam nha,
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaôi code Css3 Flying Drop Down Menubar cho Blogger sao chèn vào không hiện thị vậy ?
Trả lờiXóaMình đã cập nhật code rồi bạn làm lại đi nha :)
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóabạn ơi, sao mình làm ra giống bạn rồi nhưng bấm vào menu con nó chỉ trượt tới submenu 1 là hết rồi, không trượt tới submenu 2 3 4 được nữa :(
Trả lờiXóabạn cho mình code tạo thêm 1 submenu 1.1 nữa trong trong submenu 1 luôn nha :(
à bạn chỉ mình chỗ thay màu luôn đi, màu xám không hợp với blog mình lắm :(
Với màu nền muốn thay đổi sẽ hơi rích rắc vì nó là css3. Nếu không hiểu gradien thì bạn thay thế cả đoạn:
Xóabackground-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
thành:
background-color:#5f5f5f;
và thay:
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
thành:
background-color:#5f5f5f;
Còn vấn đề tạo sub menu phải đợi vài hôm nữa rảnh mình với viết cho bạn được.
cám ơn bạn rất nhiều, mình sẽ đợi :3
Xóa