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 !!!!!!!!!!!!!!!!!!!!!!!
