- Tham gia
- 28/02/2015
- Bài viết
- 16,828
- Đượ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.
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ở 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
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!!!
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.
Demo sau khi áp dụng vào forum Xenforo
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
Bài viết liên quan
Bài viết mới
