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

PVS · 20/03/2015

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 · 19/09/2015

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 ?

htcviet.net · 13/12/2015

thuansecond nói:
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 ?

cùng câu hỏi với bạn

hardcore · 13/12/2015

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 · 13/12/2015

hardcore nói:
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

hardcore · 13/12/2015

Mai inbox mình id pass teamviewer mình làm cho @htcviet.net

htcviet.net · 14/12/2015

hardcore nói:
Mai inbox mình id pass teamviewer mình làm cho @htcviet.net

Mới thử cách của bạn thêm đoạn code này vào Extra
.Responsive .sidebar {
display : none;
}
cả 2 bên site mobile và máy tính đều ko hiện

PVS · 14/12/2015

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 ^^

htcviet.net · 14/12/2015

PVS nói:
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 ^^

vậy sửa như thế nào bác

PVS · 14/12/2015

@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 · 14/12/2015

PVS nói:
@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 · 14/12/2015

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 · 14/12/2015

HTML:

.Responsive .LeftMenuFixed scroll-to-fixed-fixed {
display: none;
}

thử code này xem

htcviet.net · 14/12/2015

hardcore nói:
HTML:

.Responsive .LeftMenuFixed scroll-to-fixed-fixed { display: none; }

thử code này xem

nhìn đoạn code là thấy sai rồi bác, mình cũng đã add thử ko thấy gì hết

hardcore · 14/12/2015

thử rồi mà

dinhhai · 22/07/2016

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?

Encoder · 22/07/2016

htcviet.net nói:
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

@media là set kích thước màn hình trong responsive bạn

dinhhai · 23/07/2016

Encoder nói:
@media là set kích thước màn hình trong responsive bạn

Bác @Encoder có biết cách ẩn trên mobile không bác?
Mình làm thì hiển thị uki trên máy tính rùi, mà khi online mobile thì nó che mất forum

Encoder · 23/07/2016

dinhhai nói:
Bác @Encoder có biết cách ẩn trên mobile không bác?
Mình làm thì hiển thị uki trên máy tính rùi, mà khi online mobile thì nó che mất forum

bạn cho mình link demo mình mới view và chỉ dc. có thể inbox

2L.Ohayo · 23/07/2016

dinhhai nói:
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?

Thêm vào EXTRA.CSS

Mã:

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveMediumWidth)
{
    .Responsive .LeftMenuFixed
    {
        display: none;
    }
}
</xen:if>

Người đăng	Chủ đề tương tự	Diễn đàn	Trả lời	Ngày đăng
	Help Cách tạo trang như mạng xã hội	Tips and Guides	2	07/10/2024
	Help Có cách nào để có thể ép users tạo account trên forum?	Tips and Guides	5	06/02/2024
H	Help Giúp mình tạo ra những bài viết và mới trả lời với ạ	Tips and Guides	1	21/10/2023
	Help Tạo Menu cố định trên top giống VNXF	Tips and Guides	3	18/11/2017
	Tạo Menu cho Navigation trượt xuống	Tips and Guides	2	08/04/2015

XenForo 1	XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

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

Super Moderator

Private

Gefreiter

Sergeant

Gefreiter

Sergeant

Gefreiter

Super Moderator

Gefreiter

Super Moderator

Gefreiter

Super Moderator

Sergeant

Gefreiter

Sergeant

MasterCorporal

Gefreiter

MasterCorporal

Gefreiter

Moderator

Chủ đề tương tự

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

Dịch vụ XenForo của VNXF

Xử lý sự cố (Troubleshooting)

Texlink

Nhà Tài Trợ