Thêm thanh công cụ Charm Bar trong Windows 8 vào Xenforo

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,650
Được Like
10,913
Chắc hẳn nhiều bạn đã sử dụng Windows 8 đều thấy khi rê chuột qua bên phải màn hình thì sẽ xuất hiện thanh Charm Bar. Ta có thể áp dụng thanh Charm Bar này vào website của mình. Và hôm nay mình sẽ hướng dẫn các bác áp dụng nó vào Xenforo.

Khi áp dụng vào Xenforo, ta đưa chuột qua góc phải của forum thì thanh này sẽ từ từ trượt ra, và hiện các thanh công cụ, khi bỏ chuột ra chỗ khác thì nó lại từ từ ẩn vào giống hệt y chang Windows 8 luôn.

Tự động co dãn với mọi kích thước màn hình, cố định vị trí khi lăn chuột.

1.png

Demo sau khi áp dụng vào forum Xenforo
Cách làm không hề khó mà chỉ là CSS đơn giản thôi. Nhưng trước hết các bạn cần phải tải source (ở file đính kèm) về và up lên ngang hàng với index nhé!

Sau khi download về, giải nén và up nó lên root rồi thì ta bắt đầu vào Admincp.

Mở template EXTRA.css thêm đoạn này vào:
Mã:
.menu-portal{
position:fixed;
z-index:96969696;
background:transparent;
width:20px;
height:100%;
float:right;
right:0px;
top:0px;
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari and Chrome */
-o-transition: width 1s; /* Opera */
}
.menu-portal:hover{
width:100px;
height:100%;
background:#111111;
}
.menu-portal .khoi1
{height:25%;
background: url(metromenu/images/menu-portal/search.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi2
{height:25%;
background:url(metromenu/images/menu-portal/share.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi3
{height:25%;
background: url(metromenu/images/menu-portal/forum.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi4
{height:25%;
background: url(metromenu/images/menu-portal/setting.png) no-repeat;
margin-top:auto;
margin-bottom:auto;
}
.menu-portal .khoi1:hover,.menu-portal .khoi2:hover,.menu-portal .khoi3:hover,.menu-portal .khoi4:hover
{background-color:#222222;}

Mở template PAGE_CONTAINER
Chèn đoạn này vào ngay dưới thẻ <head> hoặc chỗ nào bạn thích
Mã:
<div class="menu-portal">
<a href="index.php?search">
<div class="khoi1"></div>
</a>
<a href="{xen:link members, $visitor}">
<div class="khoi2"></div>
</a>
<a href="forum">
<div class="khoi3"></div>
</a>
<a href="account/personal-details">
<div class="khoi4"></div>
</a>
</div>

Bạn có thể thay đổi màu sắc, hình dáng theo ý thích của mình, chúc thành công!!!


Nguồn: vietdesigner.net​
 

Đính kèm

  • metromenu.zip
    16.6 KB · Lượt xem: 5
  • Like
Reactions: THB

Jindo_Katori

Thượng Đế
Tham gia
01/03/2015
Bài viết
1,463
Được Like
1,204
Rất hay. (Em đanvg dùng cái like fb).
Nên dùng chung sợ đụng :confused:
 
  • Like
Reactions: THB

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,650
Được Like
10,913

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS


Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom