Iris Tips
Iris TipsDropdown Menu with Sliding Hover Effect for Blogger
Hôm nay Iris Tips sẽ tiếp tục chia sẻ cho các bạn một kiểu Dropdown Menu cực kỳ cá tính với hiệu ứng Sliding Hover đẹp mắt cho Blogger. Các bạn hãy theo dõi bài viết dưới đây nhé.
CSS
1 Vào Mẫu >> Chỉnh sửa HTML và thêm đoạn CSS dưới đây vào trước thẻ ]]></b:skin>ul.sdt_menu{display:inline-block;margin:0;list-style:none;font-family:"HELVETICA","Trebuchet MS",sans-serif;font-size:14px}
ul.sdt_menu a{text-decoration:none;outline:none}
ul.sdt_menu li{border:dotted 1px #FFF;background-color:#000;float:left;width:140px;height:50px;position:relative;cursor:pointer}
ul.sdt_menu li > a{position:absolute;top:0;left:0;width:140px;height:50px;z-index:9999}
ul.sdt_menu li a img{border:none;position:absolute;width:0;height:0;bottom:0;left:85px;z-index:100;-moz-box-shadow:0 0 4px #000;-webkit-box-shadow:0 0 4px #000;box-shadow:0 0 4px #000}
ul.sdt_menu li span.sdt_wrap{position:absolute;top:0;left:0;width:140px;height:50px;z-index:9999}
ul.sdt_menu li span.sdt_active{position:absolute;background:#09F;top:50px;width:140px;height:0;left:0;z-index:9999}
ul.sdt_menu li span span.sdt_link,ul.sdt_menu li span span.sdt_descr,ul.sdt_menu li div.sdt_box a{margin-left:15px;text-transform:capitalize}
ul.sdt_menu li span span.sdt_link{color:#fff;font-size:18px;float:left;clear:both}
ul.sdt_menu li span span.sdt_link:hover{color:#3FF}
ul.sdt_menu li span span.sdt_descr{color:#CCC;float:left;clear:both;width:155px;/*For dumbass IE7*/font-size:10px;letter-spacing:1px}
ul.sdt_menu li div.sdt_box{display:block;position:absolute;width:140px;overflow:hidden;height:140px;top:50px;left:0;display:none;background:#6C6;z-index:9999}
ul.sdt_menu li div.sdt_box a{float:left;clear:both;line-height:30px;color:#FFF}
ul.sdt_menu li div.sdt_box a:first-child{margin-top:15px}
ul.sdt_menu li div.sdt_box a:hover{color:#6FF}
@media only screen and (max-width:1024px){
ul.sdt_menu li{width: 120px;height: 40px}
ul.sdt_menu li > a{width: 120px;height: 40px}
ul.sdt_menu li span.sdt_active{top: 40px}
ul.sdt_menu li span.sdt_wrap{width: 120px;height: 40px}
ul.sdt_menu li span span.sdt_link{font-size: 15px;line-height: 2.5}
ul.sdt_menu li span span.sdt_descr,#searchhome{display:none}
ul.sdt_menu li div.sdt_box{top: 40px}
}jQuery
2 Thêm thư viện jQuery sau vào trước thẻ </head> nếu như website của bạn chưa có.<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>3 Cũng tại thẻ </head> thêm đoạn code dưới đây vào trước thẻ đó
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>Javascript
4 Tiếp tục chèn đoạn script sau vào trước thẻ </body><script type='text/javascript'>
$(function() {
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'140px',
'height':'140px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'110px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'140px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '140px';
if($elem.parent().children().length == $elem.index()+1)
left = '-140px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');
$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'0px'},500);
});
});
</script>HTML
5 Cuối cùng là thêm đoạn code sau vào vị trí mà bạn muốn đặt menu (giữa thẻ <body> và </body>)<div class='main-wrap'>
<div>
<ul class='sdt_menu' id='sdt_menu'>
<li>
<a href='http://iris-tips.blogspot.com/'>
<img alt='Iris Tips' src='http://lh3.googleusercontent.com/-1PQMRIB_xm4/AAAAAAAAAAI/AAAAAAAAACo/bQkGtd0Z1lc/s512-c/photo.jpg'/>
<span class='sdt_active'></span>
<span class='sdt_wrap'>
<span class='sdt_link'>Trang chủ</span>
<span class='sdt_descr'>Iris Tips</span>
</span>
</a>
</li>
<li>
<a href='/search/label/Ảnh hoạt hình?&max-results=10'>
<img alt='Ảnh hoạt hình- ảnh vẽ' src='https://lh4.googleusercontent.com/-6rOZ8XWRhAA/UfYh88R0UZI/AAAAAAAAAh8/kdd1ug9qKEc/s200-no/cartoon-totoro-cuoc-song-muon-mau.jpg'/>
<span class='sdt_active'></span>
<span class='sdt_wrap'>
<span class='sdt_link'>Fan Art</span>
<span class='sdt_descr'>Ảnh vẽ - hoạt hình</span>
</span>
</a>
<div class='sdt_box'>
<a href='/search/label/Cartoon Wallpaper?&max-results=10'>Cartoon</a>
<a href='/search/label/Anime Wallpaper?&max-results=10'>Anime</a>
<a href='/search/label/Paint Art Wallpaper?&max-results=10'>Paint art</a>
<a href='/search/label/Game wallpaper?&max-results=10'>Game</a>
</div>
</li>
<li>
<a href='/search/label/Design?&max-results=10'>
<img alt='Ảnh đồ họa - thiết kế' src='https://lh6.googleusercontent.com/-4cOLsfbdsuQ/UfYh9zH6I9I/AAAAAAAAAiU/-VaZzw3qoU8/s200-no/deisgn-cuoc-song-muon-mau.jpg'/>
<span class='sdt_active'></span>
<span class='sdt_wrap'>
<span class='sdt_link'>Design</span>
<span class='sdt_descr'>Đồ họa - Thiết kế</span>
</span>
</a>
<div class='sdt_box'>
<a href='/search/label/Wallpaper HD?&max-results=10'>Ảnh HD đẹp</a>
<a href='/search/label/Wallpaper 3D?&max-results=10'>Ảnh 3D</a>
<a href='/search/label/Adobe Photoshop?&max-results=10'>Ảnh Photoshop</a>
<a href=''>Khác</a>
</div>
</li>
<li>
<a href='/search/label/Đời sống?&max-results=10'>
<img alt='Đời sống - Cuộc sống quanh ta' src='https://lh4.googleusercontent.com/-5Fsf6Evf0gw/Uj5tjarb70I/AAAAAAAAB38/AulgT0ZU6tY/w300-h199-no/noi-long-cac-chang-yeu-co-nang-me-phuot.jpg'/>
<span class='sdt_active'></span>
<span class='sdt_wrap'>
<span class='sdt_link'>Đời sống</span>
<span class='sdt_descr'>Cuộc sống muôn màu</span>
</span>
</a>
<div class='sdt_box'>
<a href='/search/label/Nhân vật - sự kiện?&max-results=10'>Nhân vật - sự kiện</a>
<a href='/search/label/Du lịch - Khám phá?&max-results=10'>Du lịch khám phá</a>
<a href='/search/label/Ẩm thực quanh ta?&max-results=10'>Ẩm thực</a>
<a href='/search/label/Khoa học khám phá?&max-results=10'>Khoa học</a>
</div>
</li>
<li>
<a href='/search/label/Mẹo vặt?&max-results=10'>
<img alt='Đời sống - Cuộc sống quanh ta' src='https://lh6.googleusercontent.com/-9oAWmcKPPsA/Uj5tkLAe8AI/AAAAAAAAB4I/upYenhId4dY/w300-h241-no/trong-cay-8-d1946.jpg'/>
<span class='sdt_active'></span>
<span class='sdt_wrap'>
<span class='sdt_link'>Mẹo vặt</span>
<span class='sdt_descr'>Gia đình - Cuộc sống</span>
</span>
</a>
<div class='sdt_box'>
<a href='/search/label/Nấu nướng?&max-results=10'>Nấu nướng</a>
<a href='/search/label/Sống khỏe?&max-results=10'>Sống khỏe</a>
<a href='/search/label/Làm đẹp?&max-results=10'>Làm đẹp</a>
<a href='/search/label/Tái chế linh tinh?&max-results=10'>Handmade</a>
</div>
</li>
<li>
<a href='/search/label/Thư giãn?&max-results=10'>
<img alt='Thư giãn' src='https://lh3.googleusercontent.com/-wWrB5pVyELs/UfYh_LAJK_I/AAAAAAAAAis/TxGrAiiz3vk/w295-h224-no/thu-gian-cuoc-song-muon-mau.jpg'/>
<span class='sdt_active'></span>
<span class='sdt_wrap'>
<span class='sdt_link'>Cười</span>
<span class='sdt_descr'>Xả xì trét ^.^</span>
</span>
</a>
<div class='sdt_box'>
<a href='/search/label/Ảnh vui ảnh hài?&max-results=10'>Ảnh hài</a>
<a href='/search/label/Clip hay?&max-results=10'>Clip hay</a>
<a href=''>Truyện cười</a>
<a href=''>Truyện tranh</a>
</div>
</li>
<li>
<a href='/search/label/Truyện ngắn?&max-results=10'>
<img alt='Truyện ngắn - Cuộc sống muôn màu' src='https://lh6.googleusercontent.com/-QnnMbbHivmI/UffhASISz8I/AAAAAAAAAlI/SX5pXic0VX4/w347-h332-no/khoang-lang-cuoc-song-muon-mau.jpg'/>
<span class='sdt_active'></span>
<span class='sdt_wrap'>
<span class='sdt_link'>Truyện ngắn</span>
<span class='sdt_descr'>Góc tâm hồn</span>
</span>
</a>
<div class='sdt_box'>
<a href='/search/label/Truyện ngắn tình yê?&max-results=10'>Tình yêu</a>
<a href='/search/label/Truyện ngắn gia đình?&max-results=10'>Gia đình</a>
<a href=''>Bạn bè</a>
<a href='/search/label/Triết lý cuộc sống?&max-results=10'>Cuộc sống</a>
</div>
</li>
<li>
<a href='/search/label/Phim hay?&max-results=10'>
<img alt='Dành cho ai yêu phim ảnh' src='https://lh4.googleusercontent.com/-bI2stc1kPu0/Ufvdd8VVWqI/AAAAAAAAAo8/byBsKNSGvfg/w236-h211-no/Phim-hay-cuoc-song-muon-mau-1.jpg'/>
<span class='sdt_active'></span>
<span class='sdt_wrap'>
<span class='sdt_link'>Phim hay</span>
<span class='sdt_descr'>Rạp phim mini</span>
</span>
</a>
<div class='sdt_box'>
<a href='/search/label/Phim hoạt hình?&max-results=10'>Phim hoạt hình</a>
<a href='/search/label/Phim hài?&max-results=10'>Phim hài</a>
<a href='/search/label/Phim tình cảm?&max-results=10'>Phim tình cảm</a>
<a href='/search/label/Phim hành động?&max-results=10'>Phim hành động</a>
</div>
</li>
</ul></div></div>Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Created by Iris Tips
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaBị xung đôt code rồi bạn :o Bạn tìm trong temp xem có đoạn script nào nằm trong thẻ điều kiện: chỉ hiện ở trang bài viết hoặc ẩn ở trang chủ, trang index... rồi tạm thời ẩn nó đi xem.
XóaĐã cập nhật code mới menu hoạt động bình thường rồi nhé :)
Trả lờiXóa