Menu đơn Lavalamp với CSS3 và jQuery cho Blogger

Menu đơn Lavalamp với CSS3 và  jQuery cho Blogger
Trên blog ngoài menu phục vụ cho các liên kết tới các nhãn bài đăng,nhiều khi ta cũng cần hiển thị liên kết tới những mục khác như liên hệ quảng cáo,trao đổi liên kết,Sitemap vvv không lẽ để tất cả ở menu chính thì rất bất tiện.Vậy sao ta không xài thêm menu phụ là menu đơn.Menu này có thể để ở đầu hoặc cuối blog.
Dưới đây là menu đơn với hiệu ứng trượt có thể đáp ứng nhu cầu đã nói ở trên
Xem thử


DEMO

Làm thế nào để thêm menu này vào Blogger
Có 3 bước phải làm
1- thêm CSS
2- Thêm javascript
3- Thêm HTML
Thêm CSS
Vào chỉnh sửa mẫu tìm tới thẻ ]]></b:skin> và dán đoạn code sau vào trước nó

.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
font-family: calibri;
}

.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;

}


.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;

}


.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;

}


.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;

}


.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;

}


.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.lavalamp a {
text-decoration: none;
color: #262626;
line-height: 20px;
}

.lavalamp ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}

.lavalamp ul li {
list-style: none;
float:left;

text-align: center;
}

.lavalamp ul li a {
padding: 0 20px;
text-align: center;
}

.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}

Dùng menu màu nào thì giữ lại CSS của màu tương ứng còn CSS của các màu khác thì bỏ đi.
Thêm JQ
Tìm tới thẻ </head> và dán đoạn code sau vào trước nó

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {

var dleft = $('.lavalamp li.active').offset().left - $('.lavalamp').offset().left;
var dwidth = $('.lavalamp li.active').width() + "px";



$('.floatr').css({
"left": dleft+"px",
"width": dwidth
});


$('li').hover(function(){


var left = $(this).offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).width() + "px";
var sictranslate = "translate("+left+"px, 0px)";


$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});

},

function(){

var left = $(this).siblings('li.active').offset().left - ($(this).parents('.lavalamp').offset().left + 15);
var width = $(this).siblings('li.active').width() + "px";

var sictranslate = "translate("+left+"px, 0px)";

$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate

});

}).click(function(){

$(this).siblings('li').removeClass('active');

$(this).addClass('active');

return false;

});

});
//]]>
</script>

Nếu blog đã có jq thì bỏ đi đoạn màu xanh rồi lưu mẫu.
Thêm HTML
Ta tiến hành thêm 1 tiện ích và sử dụng đoạn code sau

<div class="lavalamp dark">
<ul>
<li class="active"><a href="">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Back to Article</a></li>
<li><<a href="#">How it Works?</a></li>
</ul>
<div class="floatr"></div>
</div>

Bạn thay đổi đoạn bôi xanh phù hợp với màu mẫu bạn chọn
<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">
Nhận xét

Không có nhận xét nào :