-->

Hướng dẫn thêm Class Active cho thanh Menu

Hướng dẫn các bạn cách active cho thanh menu của blogspot đơn giản. Khi chúng ta chọn và truy cập link đó từ thanh Menu, thì mục truy cập sẽ được thêm Class Active để làm nổi bật, nhấn mạnh cho chúng ta biết là đang truy cập vô mục đó.

Hướng dẫn thêm Class Active cho thanh Menu
Các bạn có thể xem demo trực tiếp trên website này.

Các bước thực hiện như sau:

1. Đầu tiên trong blogspot của các bạn phải có một css có class là active

<style>

    .active a {

        color: #008bff !important;

        font-weight: 700;

    }

</style>

Như vậy là khi class active thì thẻ <a> được kích hoạt với CSS bên trên. Để hiểu rõ hơn mình lấy ví dụ luôn về HTML như dưới.

<ul class="main-menu">

    <li class="item active">

        <a href="#"> Bán hàng 1</a>

    </li>

    <li class="item">

        <a href="#"> Bán hàng 2</a>

    </li>

    <li class="item">

        <a href="#"> Bán hàng 3</a>

    </li>

</ul>

Mục đích của chúng ta là thêm class active vào thẻ <li> khi chúng ta chọn như trên.

2. Viết JavaScript như sau, các bạn copy dán trước </body>

- Nếu thanh Menu có trang chủ (Trang chủ - Giới thiệu - Sản phẩm - Tin tức - Liên hệ)

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $(".main-menu >li>a[href='" + location.pathname + "']").parent().addClass("active").each(function() {

            $(".main-menu >li>a[href='" + $(this).attr("href") + "']").parent().addClass("active")

        });

    })

    //]]>

</script>

- Nếu thanh Menu không có trang chủ (Giới thiệu - Sản phẩm - Tin tức - Liên hệ)

<script>

    //<![CDATA[

    window.addEventListener('load', function() {

        $(".main-menu>li>a[href='" + location.pathname + "']:not([href='/'])").parent().addClass("active").each(function() {

            $(".main-menu>li>a[href='" + $(this).attr("href") + "']").parent().addClass("active")

        });

    })

    //]]>

</script>

Các bạn tùy chỉnh lại đường dẫn CSS cho đúng thì nó mới hoạt động nhé, và tùy chỉnh lại CSS cho phù hợp với blog như: Màu nền, màu chữ, font, cỡ chữ...

Để tránh trường hợp đụng css với chỗ khác thì bạn nên chèn CSS của cả thẻ ID hoặc CLASS bao quanh nó (thẻ cha mẹ)

<style>

    .main-menu-wrap .active a {

        background-color: #0f7d50;

        color: #fff !important;

    }

</style>

Nhận xét

Mới hơn Cũ hơn