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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,827
Được Like
12,687
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

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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,827
Được Like
12,687

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom