Illuminate the current page

Question

Illuminate the current page

I have been working on a website with around 20 pages that all have a side navigation bar. To make it easier to manage, I decided to centralize the links in a JavaScript (JS) file and include it on each HTML page. This way, any changes can be made quickly and uniformly across all pages.

One issue I'm facing is how to highlight the active page on the side navigation bar. Below is the JS code I am using (W3CSS is utilized for styling):

document.write('<h4>Services:</h4>\
<div class="w3-bar-block w3-light-grey">\
    <a href="/page/7/alternative-dispute-resolution" class="w3-bar-item w3-button">Alternative Dispute Resolution</a>\
    <a href="/page/8/appellate-practice" class="w3-bar-item w3-button">Appellate Practice</a>\
    // More links...
    <a href="/page/27/workmens-compensation" class="w3-bar-item w3-button">Workmens Compensation</a>\
</div>')

HTML:

<div class="w3-display-container w3-content w3-white" id="home" style="min-width:100%;">
    <div class="w3-content w3-white">
        <div class="w3-row">
            <div class="w3-twothird w3-margin-top" style="font-size: 18px; text-align: justify; padding-left: 5%; padding-right: 5%;">
                <p>content</p>
            </div>
            <div class="w3-third w3-padding">
                <script src="services.js"></script>
            </div>

        </div>
    </div>
</div>

javascript jquery html css web

Answer 1

Answer №1

Initially, it's crucial to note that utilizing a synchronous JavaScript file for managing navigation is typically deemed as unwise. In cases where a user accesses your site with JavaScript disabled, the navigation menu wouldn't be visible. A more effective approach would involve integrating a shared navigation template using PHP or another server-side language.

If you absolutely have a requirement to handle it client-side in this fashion, the optimal solution would be to inspect each link within the navigation to determine if it corresponds to location.pathname and then toggle a class accordingly.

// gather all navigation links via a query:
var navLinks = document.querySelectorAll('.w3-bar-block.w3-light-grey a.w3-bar-item.w3-button');

// iterate through the navigation links:
for (var i = 0; i < navLinks.length; i++) {
    var link = navLinks[i];
    // verify whether link path matches current path and apply a class
    if (link.pathname === location.pathname) {
        link.classList.add('w3-green');
    }
}

In an ideal scenario, it would be highly recommended to make the entire navigation system dynamic. Here's a sample implementation:

(function() {
    // store the list of sidebar links as an array of objects:
    var links = [
        {
            url: '/page/7/alternative-dispute-resolution',
            title: 'Alternative Dispute Resolution'
        },
        {
            url: '/page/8/appellate-practice',
            title: 'Appellate Practice'
        },
        {
            url: '/page/9/aviation-law',
            title: 'Aviation Law'
        }
    ];

    // begin constructing the HTML:
    var html = '\
    <h4>Services:</h4>\
    <div class="w3-bar-block w3-light-grey">\
    ';

    // loop through all links and generate their HTML:
    links.forEach(function(link) {
        // initial classes for each link:
        var classes = [
            'w3-bar-item',
            'w3-button'
        ];

        // check if this link is active and add a class
        if (link.url === location.pathname) {
            classes.push('w3-green');
        }

        // append HTML for each link:
        html += '<a href="' +
                link.url +
                '" class="' +
                classes.join(' ') +
                '" title="' +
                link.title +
                '">' +
                link.title +
                '</a>';
    });

    // finish off the HTML structure:
    html += '</div>';

    // render it on the page:
    document.write(html);
})();

Answer 2

Initially, it's crucial to note that utilizing a synchronous JavaScript file for managing navigation is typically deemed as unwise. In cases where a user accesses your site with JavaScript disabled, the navigation menu wouldn't be visible. A more effective approach would involve integrating a shared navigation template using PHP or another server-side language.

If you absolutely have a requirement to handle it client-side in this fashion, the optimal solution would be to inspect each link within the navigation to determine if it corresponds to location.pathname and then toggle a class accordingly.

// gather all navigation links via a query:
var navLinks = document.querySelectorAll('.w3-bar-block.w3-light-grey a.w3-bar-item.w3-button');

// iterate through the navigation links:
for (var i = 0; i < navLinks.length; i++) {
    var link = navLinks[i];
    // verify whether link path matches current path and apply a class
    if (link.pathname === location.pathname) {
        link.classList.add('w3-green');
    }
}

In an ideal scenario, it would be highly recommended to make the entire navigation system dynamic. Here's a sample implementation:

(function() {
    // store the list of sidebar links as an array of objects:
    var links = [
        {
            url: '/page/7/alternative-dispute-resolution',
            title: 'Alternative Dispute Resolution'
        },
        {
            url: '/page/8/appellate-practice',
            title: 'Appellate Practice'
        },
        {
            url: '/page/9/aviation-law',
            title: 'Aviation Law'
        }
    ];

    // begin constructing the HTML:
    var html = '\
    <h4>Services:</h4>\
    <div class="w3-bar-block w3-light-grey">\
    ';

    // loop through all links and generate their HTML:
    links.forEach(function(link) {
        // initial classes for each link:
        var classes = [
            'w3-bar-item',
            'w3-button'
        ];

        // check if this link is active and add a class
        if (link.url === location.pathname) {
            classes.push('w3-green');
        }

        // append HTML for each link:
        html += '<a href="' +
                link.url +
                '" class="' +
                classes.join(' ') +
                '" title="' +
                link.title +
                '">' +
                link.title +
                '</a>';
    });

    // finish off the HTML structure:
    html += '</div>';

    // render it on the page:
    document.write(html);
})();

Illuminate the current page

Answer №1

Similar questions

Implementing pagination within a PHP foreach loop

Encountering a peculiar problem with the Bootstrap Carousel where the first slide fails to load

How can we detect line breaks within a selection using JavaScript?

Unexpected bug encountered while implementing redux

Can an image map area be identified using radial coordinates?

Convert the div into a string, including only the visible elements

Utilize HighCharts to seamlessly implement multiple series with the help of AJAX requests

What are the steps for showcasing a personalized HTML tag on a web page

Unexpected error encountered in Angular 2 beta: IE 10 displays 'Potentially unhandled rejection [3] SyntaxError: Expected'

Python Application Engine - Streamlining Responses from HTML Control Arrays

Calculating the total of fields from populated documents using Mongoose

Unable to utilize material tabs in this situation

Is the code generated by Webflow.com functional and practical?

What is the destination for next() in Express js?

Exploring the Realm of Angular Controllers and Services: Embracing Triumphs and

Creating a central navigation menu for a website

jQuery UI - Add character right before the final element

Using jQuery to populate tables

The beforePopState event in next/router is not triggering as expected

The first Ajax request is successful, however, the final one is failing to properly pass the data to the designated page