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

Nguyễn Đức Nam
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
<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>
#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
$( ".button" ).click(function() {
$(this).toggleClass( "active" );
$(".icons").toggleClass( "open" );
});

CHIA SẺ VỚI

Tác Giả :

Xin chào các bạn, các bạn có thể gọi tôi là Nam. Hiện tại tôi lại đang quản lý blog Tuổi Trẻ IT - là blog chia sẻ về những thủ thuật blogspot, ...