Hướng dẫn SideBar Menu trên giao diện mobile cho xenforo

CNTT01

Snow Flower ✔
Tham gia
06/07/2015
Bài viết
803
Được Like
686
Demo : vnxf.vn
Đầu tiên là code nút hiển để hiển thị sidebar thường thì cái nút này sẽ dc đặt ở trên navigation
Mã:
<div class="showMenu"><img src="@imagePath/xenforo/menu.png" alt="show menu" title="Hiện menu"/></div>
bạn add css sau vào extra.css vì nó chỉ hiện trên mobile mà off trên pc nên các bạn phải cho thuộc tính display của nó là none

Mã:
.showMenu {
  cursor: pointer;
  display: none;
  float: left;
  margin-left: 5px;
  margin-top: 13px;
}
tiếp theo để hiện nó trên mobile bạn thêm tiếp code sau vào extra.css

Mã:
@media (max-width: 610px) {
.Responsive .showMenu {
  display: block !important;
}
}
Tiếp theo là tới phần sidebar panel (menu sẽ hiển thị sau khi click vào nút menu)
Bạn tạo 1 template mới với tên sideBarMenu với nội dung sau

Mã:
<div id="sideBarMenu" style="display: none;">
  <h3 class="sideBarHead">Congngheaz.Com</h3>
  <ul class="sideBarList">
  <li class="sideBarItem"><a href="http://congngheaz.com.vn">Trang chủ</a>
  </li>
  <li class="sideBarItem"><a href="/forums/">Diễn đàn</a>
  </li>
  <li class="sideBarItem"><a href="http://Congngheaz.com/categories/trung-tam-thoi-trang-phu-kien.8/">thời trang</a>
  </li>
  <li class="sideBarItem"><a href="http://Congngheaz.com/categories/chuyen-muc-me-be.24/">Mẹ và bé</a>
  </li>
  <li class="sideBarItem"><a href="http://Congngheaz.com/categories/trung-tam-cong-nghe.30/">Công Nghệ</a>
  </li>
  <li class="sideBarItem"><a href="http://Congngheaz.com/categories/trung-tam-dich-vu-giai-tri.58/">Giải trí</a>
  </li>
  <li class="sideBarItem"><a href="http://Congngheaz.com/categories/sieu-thi-online.59/">Siêu thị VN</a>
  </li>
  <li class="sideBarItem"><a href="http://Congngheaz.com/categories/o-to-xe-may-phuong-tien-giao-thong.60/">Xe cộ</a>
  </li>
  <li class="sideBarItem"><a href="http://Congngheaz.com/categories/trung-tam-bat-dong-san-viec-lam.61/">Bất động sản</a>
  </li>
  <li class="sideBarItem"><a href="http://Congngheaz.com/categories/noi-ngoai-that-thiet-bi-xay-dung.62/">Xây dựng</a>
  </li>
  <li class="sideBarItem"><a href="http://Congngheaz.com/categories/tong-hop.63/">Tổng hợp</a>
  </li>
  <li class="sideBarItem"><a href="http://Congngheaz.com/categories/nguoi-viet-song-tai-nuoc-ngoai-trailer.64/">Người Việt ở nước ngoài</a>
  </li>
  </ul>
  <h3 class="sideBarHead">Tài khoản</h3>
  <xen:if is="!{$visitor.user_id}">
  <ul class="sideBarList">
  <li class="sideBarItem"><a href="login/">Đăng nhập</a>
  </li>
  <li class="sideBarItem"><a href="register/">Đăng ký</a>
  </li>
  </ul>
  <xen:else/>
  <ul class="sideBarList">
  <li class="sideBarItem"><a href="account/alerts/">Thông báo <span>{xen:number $visitor.alerts_unread}</pan></a>
  </li>
  <li class="sideBarItem"><a href="account/">Tài khoản </a>
  </li>
  <li class="sideBarItem"><a href="conversations/">Tin nhắn <span>{xen:number $visitor.conversations_unread}</span> </a>
  </li>
  <li class="sideBarItem"><a href="credits/">ZCoin {xen:helper brc_currencyformat, {$visitor.{$currency.column}},true,{$currency.currency_id}}</a>
  </li>
  </ul>
  </xen:if>
  <h3 class="sideBarHead">Tùy chỉnh</h3>
  <ul class="sideBarList">
  <li class="sideBarItem"><a href="http://Congngheaz.com/">Phiên bản máy tính</a>
  </li>
  <li class="sideBarItem"><a>Buonre.vn &copy; 2015</a>
  </li>
  </ul>
</div>
Sau đó bạn mở template PAGE_CONTAINER
tìm
Mã:
<xen:hook name="body">
thêm bên dưới đó
Mã:
<xen:include template="sideBarMenu" />
Tiếp theo bạn chèn đoạn code sau vào trước </body> của template PAGE_CONTAINER

Mã:
<script>
$(".showMenu").click(function(){
$("#headerMover").toggleClass("inbarmenu");
$("#sideBarMenu").toggleClass("display");
});
</script>
Cuối cùng bạn thêm css sau vào trong extra.css

Mã:
#sideBarMenu.display {
    display: block !important;
}
#sideBarMenu {
    background-color: #31394a;
    box-sizing: border-box;
    display: none;
    left: 0;
    margin: 0;
    overflow: auto;
    position: absolute;
    top: 0px;
    width: 200px;
    z-index: 1;
}
#sideBarMenu > .sideBarHead {
    background: #666;
    border-bottom: 1px solid #242a37;
    border-top: medium none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    margin: 0;
    padding: 5px;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
#sideBarMenu > .sideBarList {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#sideBarMenu > .sideBarList > .sideBarItem {
    background-color: #555;
    border-bottom: 1px solid #666;
}
#sideBarMenu > .sideBarList > .sideBarItem > a {
    color: #fff;
    display: block;
    font-weight: bold;
    padding: 15px 10px;
    text-decoration: none;
}
#sideBarMenu > .sideBarList > .sideBarItem > a:hover {
    background-color: #666;
}
.inbarmenu{left: 200px;
    margin: 0;
    padding: 0;
    position: absolute}
.sideBarItem span {
    background: none repeat scroll 0 0 red;
    border-radius: 3px;
    color: #fff;
    padding: 3px;
}
Vậy là xong.
 
  • Like
Reactions: THB

htcviet.net

Thượng Đế
Tham gia
21/06/2015
Bài viết
51
Được Like
26
ngay bước đầu tiên ko thấy tác dụng gì hết rồi bác
 

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

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top Bottom