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

  • Thread starter Thread starter PVS
  • Ngày gửi Ngày gửi

PVS

Super Moderator
Thành viên BQT
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​
 
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á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 đó
 
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 ^^
 
@media (min-width: 0px) AND (max-width:480px) {
#sidebar {display:none!important;}

chỉ là mò thôi :)), bác thử xem được không :)))~
 
@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
 
Back
Top