Code Tạo Menu Trượt Từ Trái Sang Phải Blogspot HTML + CSS + JS

Code Tạo Menu Trượt Từ Trái Sang Phải Blogspot HTML + CSS + JS, Đối với menu blogspot để làm cho nó di chuyển từ trái sang phải hay ngược lại là việc làm không dễ. Vì vậy nếu bạn nào chưa biết về code blogger, hay chưa biết cách tạo menu cho blogspot, hãy sử dụng đoạn code và css này để tiến hành tạo menu cho blog của mình nhé. Code tạo menu này không sử dụng js nha các bạn.

Chia sẻ code tạo menu trượt từ trái sang phải của blogspot đẹp mê ly

Mình khẳng định lại là Code Tạo Menu Trượt Từ Trái Sang Phải Blogspot HTML + CSS + JS.  Đây là đoạn code thông dụng được nhiều blogger sử dụng nhất để tạo menu cho blogspot của mình.

• xem demo tại đây nhé: http://demo.blogchiasethuthuat.com/p/menu_25.html
• Vào đây để tạo blogger: https://www.blogger.com

Để sử dụng đoạn code tạo menu blogspot này mình xin lưu ý các bạn vài điều:

• Chú ý vị trí các thẻ đóng, thẻ mở
• Copy đầy đủ code tạo menu
• Fix lại css theo ý mình
• Sửa lại css vì có thể bị đụng css với theme blogspot

Nào mình cùng tiến hành tạo menu cho blogspot thôi

Để tiến hành sử dụng menu này, các blogger cần sử dụng đoạn CSS mà mình cung cấp, copy và dán lên phía trên thẻ ]]></b:skin>

.toggleMenu{color:#fff;padding:10px;font-size:25px;float:left;margin-right:20px}h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0}
.dropdowns{font:normal normal 14px Roboto,Arial,sans-serif;background:#fff;overflow:auto;position:fixed;z-index:99;bottom:0;width:300px;left:-400px;transition:all .7s ease-in-out;top:0;border-top:1px solid #ddd;line-height:48px;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.nav-menu2{list-style:none;margin:0;*zoom:1;float:left;padding:0}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}.sub-menu{transition:all .5s ease-in-out}
.nav-menu2 ul{list-style:none;margin:0;width:auto;white-space:nowrap}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0}
.nav-menu2 > li{float:left;width:100%}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#666}
.nav-menu2 > li:hover > a{background:#E6E6E6}
.nav-menu2 li ul{background:#fff;display:none;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:0s;padding:0}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 li li a.click ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#666;position:relative;padding-left:53px;line-height:40px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .dropdown:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;position:absolute;top:0;right:20px;color:#444}
.nav-menu2 li .dropdown.open:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit}
.nav-menu2 li .dropdown:hover:after{color:#000}
.nav-menu2 li i{font-size:18px;width:35px}.nav li a.click{opacity:1}
.nav-menu2 h2{font-size:14px;font-weight:normal!important;padding:0 20px;margin:0;overflow:hidden;border-top:1px solid #ddd;color:#999}
.dropdowns h3,.dropdowns p{padding:0;margin:0;font-weight:400!important}
.dropdowns .profilemenu{padding:10px;background:#f8f8f8;border-bottom:1px solid #ddd;line-height:2}
.dropdowns h3{font-size:14px}.nav-menu2 p{font-size:13px}
.dropdowns img{width:70px;height:70px;border-radius:100%}
#info2{float:right;border-radius:100%;padding:0 10px;color:#999}
#info2:hover{background:#ddd}
#nav-menu1{visibility:hidden;position:absolute;background:#fff;list-style:none;right:30px;top:135px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#nav-menu1 li{width:100%}
#nav-menu1 li a{padding:8px 15px;width:100%;font-weight:300;color:#666}
#nav-menu1 li a:hover{background:#e1e1e1}
#nav-menu1.shows{visibility:visible;width:200px;height:130px}
.dropdowns.shows{left:0;opacity:1}
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0, 0, 0, 0.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.darkshadow.shows{visibility:visible;opacity:1}

Copy toàn bộ HTML này và dán trên thẻ đóng </body> trong source blogspot của bạn

<a class='toggleMenu ripple' href='javascript:;'><i class='fa fa-bars'></i></a>
<div class='darkshadow'></div>
<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='wrapper'>
<div class='profilemenu'>
<img alt='Admin' src='http://i.imgur.com/fC1MhSb.jpg' title='Admin'/>
<h3>Blog Chia Sẻ Thủ Thuật</h3>
<a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'></i></a>
<p>blogchiasethuthuat.com@gmail.com</p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Google+</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Facebook</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Twitter</span></a></li>
</ul>
</div>
<ul class='nav nav-menu2'>
<li><a class='waves-effect' href='/' itemprop='url' expr:title='data:blog.title'><span itemprop='name'><i class='fa fa-home'></i> Trang chủ</span></a></li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Ranking'><i class='fa fa-th-list'></i> Chuyên mục</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
</ul>
</li>
<li><a class='waves-effect' href='#' itemprop='url' title='News'><span itemprop='name'><i class='fa fa-user'></i> Giới thiệu</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><span itemprop='name'><i class='fa fa-envelope'></i> Liên hệ</span></a></li>
<h2>Khác</h2>
<li><a class='waves-effect' href='#' itemprop='url' title='Settings'><span itemprop='name'><i class='fa fa-copyright'></i> Điều khoản sử dụng</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='My File'><span itemprop='name'><i class='fa fa-info'></i> Chính sách riêng tư</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Upload'><span itemprop='name'><i class='fa fa-commenting-o'></i> Góp ý báo lỗi</span></a></li>
</ul>
</div>
</nav>

Dán đoạn js vào trước thẻ </body> của blog

<script type='text/javascript'>
$(document).ready(function(){$("#info2").click(function(){$("#nav-menu1").toggleClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".dropdowns").removeClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".darkshadow").removeClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".darkshadow").toggleClass("shows");});});
//<![CDATA[
// Sub Nav
var Script=function(){jQuery('.nav-menu2 .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.nav-menu2'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".nav-menu2").scrollTo("-="+Math.abs(diff),500);else $(".nav-menu2").scrollTo("+="+Math.abs(diff),500)})}();
//]]>
</script>

Tóm lại: Đây là 3 đoạn code tạo menu trượt từ trái sang phải blogspot, bạn chỉ cần thực hiện từng bước như hướng dẫn, đảm bảo sẽ tạo ra được một menu trượt tuyệt đẹp. Nếu bạn muốn thêm hoa lá cành gì nữa? Hãy thêm vào đoạn html nhé.

Liên hệ hỗ trợ thiết kế website blogspot

Công Ty Giải Pháp Công Nghệ Số Tùng Phát chuyên cung cấp các dịch vụ thiết kế website wordpress giá rẻ, thiết kế website blogspot, giao diện đẹp, tương thích mọi thiết bị. Nếu Quý Khách có nhu cầu vui lòng liên hệ với chúng tôi theo số hotline 0902 313 677 hoặc gửi email cho chúng tôi info.tungphat@gmail.com để được nhân viên chúng tôi hỗ trợ tốt nhất.

Cảm ơn các bạn đã theo dõi bài viết. Chúc các bạn thực hành thành công, nếu gặp khó khăn hãy liên hệ với chúng tôi để được hỗ trợ nhé.