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

Cùng Chuyên Mục

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