Thủ thuật tạo thanh menu 3D đẹp mắt cho blogspot
Trước đây Vietmkt360 cũng chia sẻ đến các bạn một số thủ thuật tạo thanh menu khá bắt mắt và có tính thẩm mỹ :Hôm nay Vietmkt360 sẽ giới thiệu đến các bạn thêm một Thủ thuật tao thanh menu với hiệu ứng 3D trơn tru với jquery. Với hiệu ứng 3D của thủ thuật này Blog của bạn sẽ hoàn toàn mới lạ và hấp dẫn hơn rất nhiều !
Cách thực hiện :
1. Đăng nhập Blogger
2. Chọn mẫu ==> Chỉnh sửa HTML
3. Dán code dưới đây sau ]]></b:skin>
1. Đăng nhập Blogger
2. Chọn mẫu ==> Chỉnh sửa HTML
3. Dán code dưới đây sau ]]></b:skin>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#cssmenu:after,
#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#cssmenu #menu-button {display: none;}
#cssmenu {width: auto;font-family: Raleway, sans-serif;line-height: 1;}
#cssmenu > ul {background: #3db2e1;}
#cssmenu > ul > li {float: left;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;}
#cssmenu.align-center > ul {font-size: 0;text-align: center;}
#cssmenu.align-center > ul > li {display: inline-block;float: none;}
#cssmenu.align-right > ul > li {float: right;}
#cssmenu > ul > li > a {padding: 16px 20px;font-size: 14px;color: #ffffff;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;background: #3db2e1;-webkit-transition: all .3s;-moz-transition: all .3s;
-o-transition: all .3s;transition: all .3s;-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {color: #dff2fa;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {color: #dff2fa;-webkit-transform: rotateX(90deg) translateY(-23px);-moz-transform: rotateX(90deg) translateY(-23px);transform: rotateX(90deg) translateY(-23px);
-ms-transform: none;
}
#cssmenu > ul > li > a::before {position: absolute;top: 100%;left: 0;z-index: -1;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;padding: 16px 20px;color: #dff2fa;background: #19799f;content: attr(data-title);
-webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before { background: #3db2e1;}
#cssmenu.small-screen {width: 100%;}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
color: #dff2fa;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;padding: 16px 20px;cursor: pointer;font-size: 14px;text-decoration: none;color: #ffffff;text-transform: uppercase;letter-spacing: 1px;background: #3db2e1;}
#cssmenu.small-screen #menu-button:after {
content: "";position: absolute;right: 20px;top: 17px;display: block;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border-top: 2px solid #ffffff;border-bottom: 2px solid #ffffff;width: 22px;height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 2px solid #dff2fa;
border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
content: "";position: absolute;right: 20px;top: 27px;display: block;width: 22px;
height: 2px;
background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #dff2fa;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script charset='utf-8' src='http://preview.bloggertrix.com/3d_cssmenu/script.js' type='text/javascript'/>
4. Lưu lại
5. Chọn bố cục --> Thêm tiện ích HTML/JavaScrip và dán code bên dưới vào
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li><a href='http://vietmkt360.com/'>Vietmkt360</a></li>
<li><a href='http://vietmkt360.com/'>Vietmkt360</a></li>
<li><a href='http://vietmkt360.com/'>Vietmkt360</a></li>
</ul>
</div>Các bạn sửa lại cho phù hợp với Blog của mình
6. Lưu lại tiện ích HTML/JavaScrip
Chúc các bạn thành công !!!!!!!!!!!!!!!!!!!!!!!
Share This:
Blog Tự Động Hóa 68
Tôi là Đại Thành. Tôi thích chia sẽ đam mê về Điện Tự Động Hóa, Điện Lạnh Và Internet....Bài viết có thể chưa thật sự hoàn hảo nhưng hy vọng sẽ giúp ích được cho các bạn. Cảm ơn đã ghé trang.
Mời bạn bình luận cho bài viết " Thủ thuật tạo thanh menu 3D đẹp mắt cho blogspot "