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

[CNTT01]

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

<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

.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

@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

<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

<xen:hook name="body">

thêm bên dưới đó

<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

<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

#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.

 

[htcviet.net]

ngay bước đầu tiên ko thấy tác dụng gì hết rồi bác