The jQuery plugin for mmenu does not activate the selected menu item

I recently implemented a jQuery menu plugin that I found on

Overall, everything is functioning correctly. However, I am encountering an issue where the active state is not displayed when selecting a sub menu. Instead, it keeps redirecting to the main page after the page loads. Refer to the screenshot for further details.

This is the code snippet I am using:

<div id="menu">
    <ul class="listview-icons">
        <li>
            <a>
                <form method="post" action="{$site_url}/tracking.html" name="trak_now_homepage" id="trak_now_homepage">
                    <div class="form-group texttransform">
                        <input type="text" class="form-control" id="shipment_track_num" name="track_num" placeholder="Enter the booking ID">
                        <span id="shipment_alert" class="alert" style="color:#CF0"></span>
                        <BR />
                        <input name="news_go" type="submit" value="Track now" class="com_buton" id="send" onclick="return valid_shipment_tracking_form(document.trak_now_homepage);" />
                    </div>
                </form>
            </a>
        </li>
        <li><a href="{$site_url}"><i class="fa fa-home"></i> &nbsp; HOME</a></li>
        <li>
            <span><i class="fa fa-file-text-o"></i> &nbsp; SEND</span>
            <ul>
                <li><a href="{$site_url}/send_document.html"><i class="fa fa-file-text-o"></i> &nbsp;DOCUMENTS</a></li>
            </ul>
        </li>
        <li>
            <span><i class="fa fa-plane"></i> &nbsp; SERVICES</span>
            <ul>
                <li><a href="{$site_url}/sameday.html"><i class="fa fa-map-marker"></i> &nbsp;SAME DAY DELIVERY</a></li>
            </ul>
        </li>
        <li>
            <span><i class="fa fa-user"></i> &nbsp; ABOUT US</span>
            <ul>
                <li><a href="{$site_url}/about_us.html"><i class="fa fa-info-circle"></i> &nbsp; ABOUT US</a></li>
                <li><a href="{$site_url}/faq.html"><i class="fa fa-info-circle"></i> &nbsp;FAQ</a></li>
                <li><a href="{$site_url}/how.html"><i class="fa fa-info-circle"></i> &nbsp;HOW IT WORKS</a></li>
                <li><a href="{$site_url}/advice.html"><i class="fa fa-info-circle"></i> &nbsp;PACKAGING ADVICE</a></li>
                <li><a href="{$site_url}/reviews.html"><i class="fa fa-info-circle"></i> &nbsp;REVIEWS</a></li>
                <li><a href="{$site_url}/terms.html"><i class="fa fa-info-circle"></i> &nbsp; TERMS</a></li>
                <li><a href="{$site_url}/policy.html"><i class="fa fa-info-circle"></i> &nbsp; POLICIES</a></li>
                <li><a href="{$site_url}/volume_calculator.html"><i class="fa fa-inf...

Is there a way to resolve this issue? The live demo can be accessed at www.matchcouriers.com

javascriptjquerycss

Answer №1

I successfully resolved the issue by implementing a smarty condition since I am utilizing smarty as a template engine. The specific class required from mmenu is mm-selected.

<li class="mm-selected"><a href="http://match.local"><i class="fa fa-home"></i> &nbsp; HOME</a></li>

Answer №2

Defaultly, the mmenu interface assigns the css class Selected (note the capital S) to the currently selected item within the list.

The selected menu will display a dark background.

In order for this style to apply, you need to create your own li.Selected in your stylesheet. It seems like you haven't done this yet.

The sub-menu panel should remain unchanged, but after selecting a menu item and reloading the page, the main menu should appear with the corresponding submenu panel selected.

This process is not automatic. You have to manually add the Selected class to the relevant li elements on your pages. For example, on the About Us page, you would include the following:

<li class="Selected"><a href="/about_us.html"><i class="fa fa-info-circle"></i> &nbsp; ABOUT US</a></li>

Further Reading:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Center navigation bar text with the class `.justify-content-center`:

Can someone explain why, when I add the class justify-content-center to my Navbar in Bootstrap, the text remains in the left position? https://i.sstatic.net/8x0Yc.png I came across an instruction in the Bootstrap documentation stating that after adding t ...

htmlcsstwitter-bootstrapbootstrap-4navbar

AJAX reconstructs accordion elements and shatters them apart

I've implemented Search & Filter Pro to sort through images on a website. The checkbox filters are contained within accordions. Initially, everything functions correctly when the page loads. However, an issue arises when I click on a filter as it ...

javascriptajaxaccordion

What are some superior methods for determining the validity of a control in JavaScript?

Is there a way to determine the validity of a control in JavaScript within Asp.Net using a client-side API? Specifically, I am looking for a function that can check if a control is valid based on attached validators. For example, if a textbox has 2 validat ...

javascriptjqueryasp.net

Exploring the benefits of utilizing ChartJs within a VueJs component

I'm currently working on using Chartjs to create and control a chart within a Vue component. I'm feeling a bit lost as to where exactly in the script tags I should initialize the chart instance var myChart = new Chart(ctx, {...}); after importing ...

javascriptvue.jschart.jsvuetify.js

The data being retrieved from the controller in AngularJS is not displaying as expected

Just started learning AngularJS. Currently following this MEAN Stack Intro: Build an end-to-end application Created a basic html file to test angularjs. index.html <html> <head> <meta charset="utf-8"> <title> ...

javascriptangularjsfirefoxmodel-view-controllerng-controller

Encountering an issue with my node configuration while working on a Discord bot

Attempting to develop my own Discord Bot has presented me with a challenging error that I am struggling to resolve: internal/modules/cjs/loader.js:968 throw err; ^ Error: Cannot find module './commands/${file}' Require stack: - C:\Users&bso ...

javascriptnode.jsdiscord.js

Error: The attempt to assign property '375' to the number '1' has resulted in a TypeError

Creating an algorithm visualiser for heap sort has been quite a challenge. To track the swaps that occur during the execution of heap sort, I decided to store the indexes of each swap in an animations array. While the heap sort animation is functioning cor ...

javascriptreactjstypescript

What is the best way to update the values of an array of object properties using an input form in JavaScript?

I'm currently learning node.js, express.js, and handlebars I am working on creating two forms for a blog/news page: an add form and an edit form. /addproject: app.get('/addproject', function(req, res) { res.render('addprojec ...

javascriptnode.jsexpresshandlebars.js

How can I transfer data from an API response containing an array of objects to a new array in a Vue.js

How come I am getting NaN instead of "qwe" and "qweqweqwe" when trying to push the first 6 elements from an array of objects to a new array? Imagine the array of objects retrieved from the API is structured like this: 0: {id: 340, name: "qwe", lastname: ...

javascriptarraysajaxvue.jsobject

Scrolling function for an automatically adjusting menu bar

I need help creating a dynamic menu that automatically adjusts in size as the user scrolls down. I found a script online and added it to my HTML file like this: <script type="text/javascript"> $(function() { var header = $(".large"); $(windo ...

javascriptjqueryhtmlcssresize

Obtain the list item using jQuery from the delete image within a nested

As I'm on the brink of solving this issue, I'm encountering difficulty in extracting the outer html from my <li>. The method I use to add my <li>'s to a <ul> is like so: function addTab() { tabs.append('& ...

javascriptjquery

The boundary extends fully to the right

Recently, I created a calculator to convert kilograms to pounds and encountered an issue when trying to add a border to a p element. The problem was that the border extended all the way to the right side of the page. Here is the corresponding HTML code: &l ...

htmlcssborder

A step-by-step guide on installing an npm package from the GitHub registry

Uncertain of the process for installing a package from the GitHub registry that relies on dependencies from the public npm registry. Attempted solution: npm_config_registry=https://npm.pkg.github.com npx @octopol/development This method failed due to som ...

javascriptgithubnpmnpxnpm-registry

Is it possible to incorporate current cljs components into a React project?

https://www.reddit.com/r/Clojure/comments/4el0xi/how_to_use_an_existing_reactjs_component_with/ In the Reddit post linked above, there is a discussion on how to incorporate existing ReactJS components into a CLJS/Reagent project. However, my aim is slight ...

javascriptreactjsclojurescriptshadow-cljs

Combine the values in the array with the input

I received some data from the back-end which is being written to a form, and it's in the form of an array of objects Below is the code snippet: this.companyDetailsForm = new FormGroup({ directors : new FormControl(response?.companyDirectors) ...

javascriptangulartypescript

When the user clicks, reveal the form with a seamless transition

Check out my jsfiddle here: http://jsfiddle.net/tz52u/9/ I'm curious about how to create a smooth transition for the 'on click' event, so that it gradually appears on the page instead of appearing instantly? Any assistance would be greatl ...

javascriptjqueryhtmlcss

The bootstrap script did not complete loading before the initialization of the tooltip

My one-page website utilizes Bootstrap 5 with Spring Boot and Thymeleaf. I am encountering an issue where the initialization of tooltips in Bootstrap is happening before the script has fully loaded, causing errors and disrupting the page loading process. ...

javascriptspringthymeleafbootstrap-5

reinitializing the prototype object's constructor property

Let's analyze the code snippet provided: function shape(){ this.name = "2d shape" } function triangle(){ this.name = "triangle"; this.ttest = function(){ alert("in triangle constructor"); } } function equitriangle(){ thi ...

javascriptinheritanceprototypeprototypal-inheritance

Teaching etiquette to the students of Li

I'm having trouble getting two lists to display correctly on my website. I want one main navigation list that is horizontal and another sub navigation list that is vertical. To achieve this, I need to have two different classes for the list items in m ...

htmlcsshtml-lists

AngularJS table cell binding using a common function

Currently, I am utilizing AngularJS to develop a table using ng-repeat. One of the columns looks like this: <tr ng-repeat="x in A"><td>{{calNoMonth(x)}}</td></tr> Unfortunately, during testing, I noticed that every time I make a c ...

javascriptangularjsangularjs-ng-repeat