Seo Đà Nẵng

Seo top 10 google, Thiet ke website, catalog tai Da Nang

Tìm kiếm

MEOW HOTEL & CAFE. Được tạo bởi Blogger.

Pages

Meow Hotel & Cafe

373/3 Phạm Ngũ Lão, Phường Phạm Ngũ Lão, Quận 1, Thành phố Hồ Chí Minh
0963006728
dngseo@gmail.com
https://www.facebook.com/meowhotelcafe/

Menu đám mây tags 3D cuộn theo chiều dọc đẹp cho blogspot

  Seo Đà Nẵng      
Bạn cần trình bày một danh sách nhưng không thích kiểu thiết kế đơn điệu như thường ngày thì bạn hãy thử đổi mới với một menu 3D cuộn dọc dạng đám mây đẹp mà mình tìm hiểu được. Đầu tiên các bạn xem demo trong chính bài này. 


SỬ DỤNG
Các bạn copy đoạn code sau đặt vào bất kỳ tiện ích HTML/Javascript nào mà các bạn thích hoặc đặt ngay vào bài viết cũng được nhưng phải sử dụng chế độ soạn thảo HTML.
<style type="text/css">
#list{
margin:0 auto;
height:450px!important;
width:100%;
overflow:hidden;
position:relative;
background-color: #111;
-moz-box-shadow:0px 10px 20px #000;
font-size:10px!important;
}
#list ul,
#list li{
list-style:none;
margin:0;
padding:0;
}
#list a{
position:absolute!important;
text-decoration: none!important;
color:#666;
text-shadow:0px 1px 2px #000;
border:none!important;
line-height:1.2em!important;
}
#list a:hover{
color:cyan;
}
</style>

<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">

$(document).ready(function(){
var element = $('#list a');;
var offset = 0;
var stepping = 0;
var list = $('#list');
var $list = $(list)
$list.mousemove(function(e){
var topOfList = $list.eq(0).offset().top
var listHeight = $list.height()
stepping = (e.clientY - topOfList) / listHeight * 0.1 - 0;
});
for (var i = element.length - 1; i >= 0; i--)
{
element[i].elemAngle = i * Math.PI * 2 / element.length;
}
setInterval(render, 20);
function render(){
for (var i = element.length - 1; i >= 0; i--){
var angle = element[i].elemAngle + offset;
x = 120 + Math.sin(angle) * 30;
y = 45 + Math.cos(angle) * 40;
size = Math.round(40 - Math.sin(angle) * 40);
var elementCenter = $(element[i]).width() / 2;
var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"
$(element[i]).css("fontSize", size + "px");
$(element[i]).css("opacity",size/100);
$(element[i]).css("zIndex" ,size);
$(element[i]).css("left" ,leftValue);
$(element[i]).css("top", y + "%");
}
offset += stepping;
}
});
</script>
<div id="list">
<ul>
<li><a href="#">Blogspot căn bản</a></li>
<li><a href="#">Kỹ năng viết blog</a></li>
<li><a href="#">Sticky</a></li>
<li><a href="#">Tên miền Godaddy</a></li>
<li><a href="#">Hubspot Marketing Grader</a></li>
<li><a href="#">IE CSS hack</a></li>
</ul>
</div>
TÙY BIẾN
Bạn thấy trong code có một danh sách nằm trong div có id="list". Bạn thay đổi các liên kết trong đó theo ý của mình để tạo ra một menu cho riêng blog của bạn.
logoblog

Thanks for reading Menu đám mây tags 3D cuộn theo chiều dọc đẹp cho blogspot

Previous
« Prev Post

Xem trên bản đồ