Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB



Trang Dhteumeuleu.com có rất nhiều kiểu hiệu ứng rất độc đáo dành cho thiết kế web. Hôm nay xin giới thiệu kiểu menu M6 do Dhteumeuleu.com phát triển. Bạn có thể xem Demo trước khi thực hiện tạo kiểu Menu này.



Bước 1. Đặt đoạn code Javascript dưới đây vào trước thẻ </head>.






<script type="text/javascript">

//<![CDATA[

// ===========================================

// -------- M6 menu ------

// script written by Gerard Ferrandez - Ge-1-doot - December 2005

// http://www.dhteumeuleu.com

// updated Feb 2010 - namespaced

// ===========================================



var M6 = function () {

var P,T;

var over = -1;

var fontSize = 38;

var lensFX = 1;

var num = true;

var color = "#347C17";

var selected = "#800517";

var zoom = function (s) {

if(s!=over){

over = s;

var i = 0,o;

while (o = P[i]) {

o.style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";

o.style.color=(i==s)?selected:color;

i++;

}

}

}

var init = function () {

P = document.getElementById("menu").getElementsByTagName("a");

var i = 0,o;

while (o = P[i]) {

if(num){

x=i+".";

if(x.length<3)x="0"+x;

o.innerHTML = x+o.innerHTML;

}

o.style.width = "100%";

o.i = i;

o.onmouseover= function() {

zoom(this.i);

}

i++;

}

zoom(0);

}

return {

init : init

}

}();

onload = function() {

M6.init();

}

//]]>

</script>



Bước 2. Đặt đoạn code CSS sau đây vào trước thẻ </head>.




<type type="text/css">

#menu {

height: 300px;

position: relative;

width: 400px;

}

#menu a {

display: block;

font-family: Arial, sans-serif;

text-decoration: none;

white-space: nowrap;

}

</style>



Bước 3. Thiết lập cấu trúc HTML như bên dưới và đặt giữa thân trang web (giữa thẻ <body> và </body>).




<div id="menu">

<a href="URL_Link 1"> Link 1 </a>

<a href="URL_Link 2"> Link 2 </a>

<a href="URL_Link 3"> Link 3 </a>

.......

</div>



* Mở rộng: Ở đây nhận thấy có thể áp dụng hiệu ứng này cho tiện ích Nhãn (Label) trên blogspot. Bạn có thể xem Demo bên dưới.





Để làm được như vậy thì trước tiên Đăng nhập Blogger, vào Design
>> Page Elements. Nếu blog của bạn chưa có tiện ích Nhãn (Labels)
thì thêm một tiện ích như vậy.



Ở Bước 1, bạn cần thay dòng



P = document.getElementById("menu").getElementsByTagName("a");



Bằng dòng :



P = document.getElementById("Label1").getElementsByTagName("a");



Đến Bước 2 thì đặt code bên dưới vào trước thẻ ]]</b:skin>.




#Label1 {

height:300px;

position:relative;

width:250px;

}

#Label1 li {

list-style-type:none;

margin:0;

padding:0;

}

#Label1 a {

display:block;

font-family:Arial, sans-serif;

text-decoration:none;

white-space:nowrap;

}

#Label1 a:hover {

text-decoration:none;

}

Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Create a blog
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải