CSS Code Tạo Menu Ngang Đóng Mở Tuyệt Đẹp Cho Blogspot

  • ITCNTT Xin Chào Bạn -_- Khách
    Xin Chào Khách ! Đăng ký hoặc Đăng nhập Để tài vô vàn tài nguyên vip của chúng tôi Click Here
    Tài Nguyên Vip Của Chúng Tôi Đang Được Free Download Click Here Vip.
    Khách bạn hãy like fanpage để nhận thông báo dữ liệu mới nhất Click Here.
    Quan trọng! Tất cả phần mềm, khóa học, tài liệu, windows, game đều được chia sẻ miễn phí download.
    Nếu có vấn đề gì Khách hãy liên hệ cho chúng tôi Liên Hệ

Dương Hoài Nam

Administrator
Thành viên BQT
Administrator
BQT
30/5/18
1,702
28
48
Hà Nội
itcntt.com
#1
Hello anh em, lâu lắm rồi chưa có bài nào liên quan đến Thủ Thuật Blogspot nhỉ và hôm nay mình sẽ giới thiệu và hướng dẫn anh em Code Tạo Menu Ngang Đóng Mở Tuyệt Đẹp cho blogspot nhé !!
CÁC BƯỚC THỰC HIỆN :
Bước 1 : Chèn đoạn code sau vào nơi muốn hiện
CSS:
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<div id="wrapper">
   <div id="toolbar">
        <div class="button"></div>
         <ul class="icons">
               <li><i class="fa fa-home fa-2x" aria-hidden="true"></i></li>
               <li><i class="fa fa-user fa-2x" aria-hidden="true"></i></li>
               <li><i class="fa fa-star fa-2x" aria-hidden="true"></i></li>
               <li><i class="fa fa-file-text-o fa-2x" aria-hidden="true"></i></li>
               <li><i class="fa fa-paper-plane-o fa-2x" aria-hidden="true"></i></li>
         </ul>
       </div>
  </div>
 </div>
 <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
Bước 2 : Chèn đoạn code sau vào trước thẻ ]]></b:skin>
CSS:
#wrapper {
  text-align:center;
  font-family: 'Lato', sans-serif;
  text-transform:uppercase;
}


#toolbar { 
  width:100%;
  max-width:670px;
  min-width:550px;
  margin: 70px auto;
}

.button {
  width:70px;
  height:70px;
  border-radius:50%;
  background-color:#3AB09E;
  color:#ffffff;
  text-align:center;
  font-size:3.5em;
  position:relative;
  left:50%;
  margin-left:-35px;
  z-index:1;
}

.button,.icons{
  -webkit-transition: -webkit-all 1s cubic-bezier(.87,-.41,.19,1.44);
          transition:  all 1s cubic-bezier(.87,-.41,.19,1.44);
}

.button:after {
  content:"+";
}

.button.active {
-webkit-transform: rotate(45deg);
 transform: rotate(45deg);
  left:60px;
}


.icons {
  width:0%;
  overflow:hidden;
  height:36px;
  list-style:none;
  padding:16px 10px 10px 50px;
  background-color:#ffffff;
  box-shadow: 1px 1px 1px 1px #DCDCDC;
  margin:-68px 0 0 45%;
  border-radius: 2em;
}

.icons.open {
  width:80%;
  margin:-68px 0 0 5%;
  overflow:hidden;
}

.icons li {
  display: none;
  width:10%;
  color:#3AB09E;
}

.icons.open li {
  width:16%;
  display: inline-block;
}
Bước 3: Chèn đoạn JS sau vào
JavaScript:
 $( ".button" ).click(function() {


    $(this).toggleClass( "active" );


    $(".icons").toggleClass( "open" );


  });
Xem thêm
 

Fanpage Diễn Đàn ITCNTT.COM

Group Diễn Đàn ITCNTT.COM