Đăng bởi Admin | 12/7/13 | 0 nhận xét
Mình đã giới thiệu cho các bạn nhiều style menu dạng dropdown, dạng menu doc và hôm nay mình chia sẻ thêm cùng các bạn thủ thuật tạo menu dọc với hiệu ứng lật bằng JQuery. Thật ra thì menu này cũng khá là đơn giản chỉ có phần hiệu ứng là khác biệt nên mình không giới thiệu nhiều
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn thêm tiện ích (Add a Gadget)
<script type="text/javascript" src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/Jquery1.3.2.js"></script> <script src="http://dl.dropbox.com/u/66256041/Menu/Namkna-blogspot-menu-doc/flipmenu.js" type="text/javascript"> </script> <style> .flipmenu { font-family: Arial; font-size: 14px; font-weight: bold; position: relative; } .flipmenu_box { overflow: hidden; position: relative; } .flipmenu_link,.flipmenu_link_over,.flipmenu_link_active { width:300px; text-decoration: none; text-shadow:1px 1px 1px #fff; text-transform: uppercase; color: #000000; cursor: pointer; margin-top:2px; padding: 6px; position: absolute; background: #fdd78d; background: -moz-linear-gradient(top, #fbdc88 0%, #fbbf57 50%, #fac319 51%, #fb9709 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc88), color-stop(50%,#fbbf57), color-stop(51%,#fac319), color-stop(100%,#fb9709)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc88', endColorstr='#fb9709',GradientType=0 ); -webkit-border-radius: 5px; -moz-border-radius: 5px; } .flipmenu_link_over, .flipmenu_link_active { text-decoration: none; text-shadow:1px 1px 1px #eee; color: #fa0320; background: #aebcbf; background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); </style> <div id="flip_menu"> <a href="#">Tên menu 1</a> <a href="#">Tên menu 2</a> <a href="#">Tên menu 3</a> <a href="#">Tên menu 4</a> <a href="#">Tên menu 5</a> <a href="#">Tên menu 6</a> <a href="#">Tên menu 7</a> <a href="#">Tên menu 8</a> <a href="#">Tên menu 9</a> <a href="#">Tên menu 10</a> </div>
Không có nhận xét nào:
Đăng nhận xét
Cảm ơn bạn đã nhận xét !
Mã hóa Code- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.