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.
» 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.
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,#flyingmenubtul {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;}#flyingmenubtul {left: -9999px; position: absolute;top: -9999px; z-index: 2;}#flyingmenubtli {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;}#flyingmenubtli:first-child {border-left: 0 none;margin-left: 5px;}#flyingmenubtli 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:hoverul.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ông nên quá dài sẽ xấ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.NGUỒN:
Không có nhận xét nào:
Đăng nhận xét