Tạo menu trượt 2 bên cho xenforo

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Bài này mình sẽ hướng dẫn các bạn tạo menu trượt ở hai bên xenforo.

Trước tiên bạn vào EXTRA.CSS thêm đoạn code sau vào cuối:
Mã:
.LeftMenuFixed {
margin-left: -140px;
margin-top: -3px;
position: absolute;
width: 172px !important;
}
.LeftMenu_wrp {
background: none repeat scroll 0 0 #FFFFFF;
float: left;
margin-left: -140px;
width: 130px;
}
.title_lmn1 .item_lmn {
background: none repeat scroll 0 0 #0093CC;
color: #FFFFFF;
}
.item_lmn {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: -moz-use-text-color #D9D9D9 #D9D9D9;
border-image: none;
border-style: none solid solid;
border-width: medium 1px 1px;
color: #3870A0;
display: block;
font-size: 14px;
padding: 8px 10px;
text-align: center;
}
.title_lmn2 .item_lmn {
background: none repeat scroll 0 0 #E75218;
color: #FFFFFF;
}

Và chèn đoạn code sau vào trong thẻ <head> của teamplate page_container
Mã:
<div class="LeftMenuFixed scroll-to-fixed-fixed" style="position: fixed; top:140px; margin-left: 0px; width: 172px;"
<div class="LeftMenu_wrp">
<ul class="lmn_bock01">
<span class="title_lmn1">
<a class="item_lmn" href="#">Menu Tin Tức</a> </span> <li>
<a class="item_lmn" href="http://vnxf.vn/">Công Nghệ</a> </li> <li>
<a class="item_lmn" href="http://vnxf.vn/">Điện Thoại</a> </li> <li>
<a class="item_lmn" href="http://vnxf.vn/">Máy Tính</a> </li> <li>
<a class="item_lmn" href="http://vnxf.vn/">Thiết Bị Số</a> </li> <li>
<a class="item_lmn" href="http://vnxf.vn/">Game</a> </li> <li>
<a class="item_lmn" href="http://vnxf.vn/">Phần Mềm</a> </li>
</ul> <div class="clearFix"></div>
</div>
</div>

Thật đơn giản phải không nào, chúc bạn thành công!


Nguồn: muaban47.net​
 

thuansecond

Private
Tham gia
17/09/2015
Bài viết
1
Được Like
0
cái này có cách nào chỉnh chỉ hiện trên giao diện desktop thôi còn mobile thì ẩn đi không bác ơi ?
 

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
Các bạn thêm code sau vào css
HTML:
.Responsive .cái j đó điền vào đây {
display : none;
}
Cái j đó thì inspect element nhé nó nằm trong thẻ div đó
 

htcviet.net

Gefreiter
Tham gia
21/06/2015
Bài viết
51
Được Like
26
Các bạn thêm code sau vào css
HTML:
.Responsive .cái j đó điền vào đây {
display : none;
}
Cái j đó thì inspect element nhé nó nằm trong thẻ div đó
cái j đó là class hay là id đó hả bạn
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
mình nghỉ display cho mobile thôi chứ như vậy thì là cho tất cả rồi nên máy tính không hiện là đúng rồi ^^
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
@media (min-width: 0px) AND (max-width:480px) {
#sidebar {display:none!important;}

chỉ là mò thôi :)), bác thử xem được không :)))~
 

htcviet.net

Gefreiter
Tham gia
21/06/2015
Bài viết
51
Được Like
26
@media (min-width: 0px) AND (max-width:480px) {
#sidebar {display:none!important;}

chỉ là mò thôi :)), bác thử xem được không :)))~
Cho nguyên đoạn code ko thấy gì, mình thắc mắc sao lại có @media. Giờ ví dụ mình ko cho sidebar hiện ở site mobile thì dùng đoạn code nào
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
thì mình nói là mò thôi mà, chứ cũng chả biết nữa :)), anh @Blue giúp bạn ấy đi anh ^^
 

hardcore

Sergeant
Tham gia
02/04/2015
Bài viết
431
Được Like
374
HTML:
.Responsive .LeftMenuFixed scroll-to-fixed-fixed {
display: none;
}
thử code này xem
 

dinhhai

MasterCorporal
Tham gia
28/07/2015
Bài viết
399
Được Like
198
Hi bác @2L.Ohayo
Bác biết cách ẩn cái menu này trên giao diện mobile không bác?
 
  • Like
Reactions: THB

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