Code Tạo Menu Ngang Đóng Mở Tuyệt Đẹp Cho Blogspot - Phố Nhỏ Blog

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" );


  });
CẢM ƠN CÁC ĐỘC GIẢ !
...
  • Do thiếu hụt kinh phí nên chúng tôi buộc phải chạy quảng cáo để duy trì website. Chúng tôi rất xin lỗi về sự bất tiện này! !
  • Mọi thứ trên website đều là miễn phí.Được Leech Từ Nhiều Nguồn , Nếu Có Vấn Đề Bản Quyền Hãy Liên Hệ Với Chúng Tôi!
  • Tuyệt đối không click spam (click tặc quảng cáo). Hãy là một người sử dụng internet thông minh và có văn hóa! Xin cảm ơn.
CÓ THỂ BẠN ĐANG TÌM