Cách thêm class active vào chuyên mục trên menu khi truy cập các bài viết thuộc chuyên mục đó

Nếu các bạn hay đọc báo mạng xem trên giao diện máy tính hay thường gọi giao diện web chắc bạn cũng để ý khi truy cập vào các bài viết thuộc mục nào trên thanh menu thì mục đó được làm nổi bật có thể sử màu khác (background) hoặc thêm đường tô đậm gạch chân (border). Cái này mình thấy rất hay lại chuyên nghiệp nữa 👍

+ Tác dụng:

Thêm class active vào chuyên mục trên menu khi truy cập các bài viết thuộc chuyên mục đó có tác dụng làm nổi bật chuyên mục đó giúp người đọc biết được đang đọc bài thuộc chuyên mục nào và họ có thể tìm kiếm bài thuộc chuyên mục đó.

+ Xem demo tại trang: https://www.nhipsong24h.net

Vậy tại sao bạn không thử áp dụng vào Blogger cho nó chuyên nghiệp nhỉ? 💓 Bắt tay vào làm thôi các chàng trai 💪

Đầu tiên bạn cần phải đăng ký class riêng cho mỗi mục trên menu, mình lấy ví dụ menu có dạng sau:

<ul class="menu">
  <li class="chau-a"><a href="/search/label/khu-vuc-chau-a" title="Châu Á">Châu Á</a></li>
  <li class="chau-au"><a href="/search/label/khu-vuc-chau-au" title="Châu Âu">Châu Âu</a></li>
  ...
</ul>

Khi viết css cho class active ví dụ:

.menu .active {
    background: #00416c;
}

Thứ nhất chúng ta thêm class active vào chuyên mục tại trang tìm kiếm Label như sau:

Ở đây có 2 cách làm như sau:

+ Cách 1: Sử dụng điều kiện cho trang tìm kiếm Label kết hợp

<ul class='menu'>
  <b:if cond='data:blog.searchLabel == &quot;khu-vuc-chau-a&quot;'>
    <li class='chau-a active'><a href='/search/label/khu-vuc-chau-au' title='Châu Âu'>Châu Âu</a></li>
  <b:else/>
    <li class='chau-a'><a href='/search/label/khu-vuc-chau-au' title='Châu Âu'>Châu Âu</a></li>
  </b:if>
  <b:if cond='data:blog.searchLabel == &quot;khu-vuc-chau-au&quot;'>
    <li class='chau-au active'><a href='/search/label/khu-vuc-chau-au' title='Châu Âu'>Châu Âu</a></li>
  <b:else/>
    <li class='chau-au'><a href='/search/label/khu-vuc-chau-au' title='Châu Âu'>Châu Âu</a></li>
  </b:if>
</ul>

Ngoài ra nếu bạn thấy dài bạn có thể dùng script add class ví dụ

<ul class="menu">
  <li class="chau-a"><a href="/search/label/khu-vuc-chau-a" title="Châu Á">Châu Á</a></li>
  <li class="chau-au"><a href="/search/label/khu-vuc-chau-au" title="Châu Âu">Châu Âu</a></li>
  ...
</ul>

Đặt script trên </head> hay trên </body> đều được

<b:if cond='data:blog.searchLabel == &quot;khu-vuc-chau-a&quot;'>
  <script>$(".chau-a").addClass("active");</script>
</b:if>
<b:if cond='data:blog.searchLabel == &quot;khu-vuc-chau-au&quot;'>
  <script>$(".chau-au").addClass("active");</script>
</b:if>

Thứ hai thêm class active vào chuyên mục khi truy cập bài viết thuộc chuyên mục đó

Cách này bạn sử dụng điều kiện cho từng Nhãn mà bạn thêm trên menu kết hợp với script add class và bắt buộc phải đặt script trong widget Blog 1, bạn có thể đặt trong <b:includable id='main' var='top'>, <b:includable id='breadcrumb' var='posts'> hay <b:includable id='post' var='post'>

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;khu-vuc-chau-a&quot;'>
<script>$(".chau-a").addClass("active");</script>
</b:if>
<b:if cond='data:label.name == &quot;khu-vuc-chau-au&quot;'>
<script>$(".chau-au").addClass("active");</script>
</b:if>
....
</b:loop>

Tóm lại việc thêm class active vào chuyên mục trên menu khi truy cập các bài viết thuộc chuyên mục đó không khó chỉ cần sử dụng 2 điều kiện

+ Tìm kiếm Label

<b:if cond='data:blog.searchLabel == &quot;tên-nhãn&quot;'>
...
</b:if>

+ Điều kiện cho trang bài viết thuộc Nhãn

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;tên nhãn&quot;'>
  //Sử dụng script add class
</b:if>
....
</b:loop>

Chấm hết bài!!! Đọc bài này nếu không hiểu, bạn cứ đăng nhận xét bên dưới để được hổ trợ. Các bạn muốn copy về Blog mình cứ tự nhiên không cần ghi nguồn, mình không quan trọng vấn đề này 😃