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

Ngày: 02-04-2020 bởi: Tùng Bùi Xem: 212 lượt

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

code tạo menu trượt từ trái sang phải

code tạo menu trượt từ trái sang phải

Để 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ẻ ]]>

.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  trong source blogspot của bạn


 

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

 

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é.

Bài viết tương tự của Code Tạo Menu Trượt Từ Trái Sang Phải Blogspot HTML + CSS + JS

Tùng Bùi
Tùng Bùi Tùng Phát CEO. Đam mê SEO website, thiết kế website, đá bóng, offline cùng mọi người.
Facebook Youtube
Gọi điện thoại
0902.313.677

CSKH 24/7: 028.7776.8789

0902313677Zalo

Email hỗ trợ: info@tungphat.com

info@tungphat.com Email

Top