Tạo floating menu với jQuery và CSS3

Creating floating menu with a touch of Jquery and CSS3

Ở bài viết trước Tạo Tiny Menu hiệu ứng ẩn hiện cho Blogger/Blogspot Iris Tips đã giới thiệu 1 dạng floating menu, Đây là 1 floating menu khác, các bạn theo dõi nhé

• DEMO

Tạo floating menu với jQuery và CSS3

Bước 1: Chèn đoạn CSS sau trước thẻ ]]></b:skin>

 #floatMenu {
position:absolute;
top:150px;
left:50%;
margin-left:235px;
width:80px;}
#floatMenu ul {list-style-type: none;}
#floatMenu ul li a {
display:block;
background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b));
border:1px solid #999;
border-left:6px solid #999;
text-decoration:none;
color:#ccc;
padding:5px 5px 5px 25px;
width:80px;
-webkit-transition: all 0.6s ease-out;
box-shadow: #333 0px 0px 10px;
-moz-box-shadow: #333 0px 0px 10px;
-webkit-box-shadow: #333 0px 0px 10px;
}
#floatMenu ul li a:hover {
color:#fff;
background-color:#333333;
border-right:6px solid #999;
width:150px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
}
#floatMenu ul.menu1 li a:hover {border-color:#09f;} 

Bước 2: Chèn các script dưới đây trước thẻ </body>

 <script language="javascript" src="https://sites.google.com/site/iristipsblogger/file/jquery_mini.js"></script>
<script language="javascript" src="https://sites.google.com/site/iristipsblogger/file/jquery.dimensions.js"></script> 
<script language="javascript"> 
var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () { 
offset = menuYloc+$(document).scrollTop()+"px";
$(name).animate({top:offset},{duration:500,queue:false});
});
}); 
</script> 

Bước 3: Chèn HTML dưới đây vào trước thẻ </body>

 <div id="floatMenu"> 
<ul class="menu1"> 
<li><a href="#" onclick="return false;"> Home </a></li> 
<li><a href="#" onclick="return false;"> About </a></li> 
<li><a href="#" onclick="return false;"> Contact </a></li> 
<li><a href="#" onclick="return false;"> Blog </a></li> 
<li><a href='#' onclick='MGJS.goTop();return false;' onclick="return false;"> Back to top </a></li> 
</ul> 
</div> 

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Johanes/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm