Tips for keeping the mobile menu active and responsive

Struggling to implement this menu on my website, I encountered a problem: how do I keep the menu active?

I envision the menu bar changing when users navigate to the Home page, appearing like this: https://i.sstatic.net/z2fbX.png

I attempted to use the class ".active" within the <li> tags, as shown below:

<li class="active"><a href="#home">Home</a></li>

Unfortunately, this method did not work as expected.

Here is the HTML code snippet:

<div class="rmm" data-menu-style='graphite'>
    <ul>
        <li><a href='#home'>Home</a></li>
        <li><a href='#about-me'>About me</a></li>
        <li><a href='#gallery'>Gallery</a></li>
        <li><a href='#blog'>Blog</a></li>
        <li><a href='#links'>Links</a></li>
        <li><a href='#sitemap'>Sitemap</a></li>
    </ul>
</div>

For a live demonstration, visit: http://jsfiddle.net/7jgkzdf7/

I previously asked for help with this issue, but made errors in articulating my problem. Apologies for any confusion! Seeking assistance in resolving this matter now.

Thank you in advance!!!

javascriptjqueryhtmlcss

Answer №1

Consider implementing a solution like this:

JavaScript:

$(".menu-container ul li a").on('click', function () {
   $(this).addClass('active');
});

CSS:

.menu-container ul li a {
   background-image: url('http://example.com/menu-background.png');
}

However, it is worth noting that using the RMM (responsive mobile menu) may not be the most effective approach. Consider switching to Bootstrap which offers comprehensive documentation and a wide range of mobile-friendly components. You can learn more about Bootstrap here.

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

How do I retrieve distinct values from Math.random in JavaScript and prevent them from repeating?

I am attempting to fetch HTML dom elements remotely from a website using jquery/javascript. These elements are stored in an array and are unique, however, when I attempt to display them by generating random indexes with math.random() * my array.length, I n ...

javascriptarraysunique

Alert: An error has occurred with the DataTables table identified as 'datatable' while utilizing Laravel for Ajax functions

While using jQuery AJAX Datatable, an error keeps popping up on my browser. I have double-checked my code and can't find any mistakes. Can anyone help me figure out what's wrong? I want the data stored in $details to be displayed in a datatable. ...

phpjqueryajaxlaraveldatatables

Xstream produced a JSON response for a collection of objects

Utilizing Xstream for generating JSON in my application. Utilizing JSON for ajax support as well. When attempting: xstream.alias(classAlias, jsonModel.getClass()); //Note classAlias="records" responseStream.println(xstream.toXML(jsonModel)); where j ...

javascriptjqueryajaxjsonxstream

utilizing the value within the useState function, however, when attempting to utilize it within this.state, the tab switching feature fails

I am struggling to implement tab functionality in a class component. Even though I'm using this.state instead of useState, the tab switching is not working correctly. I have read the following articles but still can't figure it out: http ...

javascripthtmlcssreactjsredux

Styling tables with borders in CSS

If a table is set to have a border at a high level, how can I ensure that classes inheriting from it do not have any borders set? table,td,th { border: 1px solid #0B6121; } How can I make sure that my other table has no borders at all? table.menu { ...

css

Tips for showing variables in Console directly from the Sources panel?

As I dive into debugging front-end code in Chrome, I am encountering a question that may seem basic to experienced developers. Specifically, while exploring the Sources panel within Chrome's Dev Tools, I find myself hovering over a variable labeled _ ...

javascriptangularjs

Optimizing button tab order with JQuery dialog tabindex

I have a modal window that includes two buttons created with jQuery UI. Within the modal, there are form elements that I can navigate using the TAB key. However, I am unable to reach the "Yes" button using the TAB key as it seems there is no TabIndex set. ...

jqueryjquery-uijquery-ui-dialog

What causes the border to trigger the appearance of a scrollbar due to an overflow?

The first image display a scrollbar, while the second one does not. It all comes down to the .tabulator CSS class and specifically the border property. How come only a 1px border impacts the scroll feature instead of affecting the entire content? https: ...

htmlcss

Failure to fetch data through Axios Post method with a Parameter Object

I've encountered an issue with Axios while attempting to make a post request with a parameters object to a Laravel route. If I use query parameters like ?username=user, the post request works successfully. However, when I use an object, it fails: Be ...

javascriptajaxlaravelvue.jsaxios

Design nested divs that can be dragged within the confines of their parent div

At first, the app will include a single button called AddParent located at the top. When the user clicks the AddParent button, a parent draggable component is added to the existing component. This means that every time the button is clicked, a new parent ...

javascriptreactjs

Trap mistakes while utilizing async/await

Within my Express application, I have a register function for creating new users. This function involves creating the user in Auth0, sending an email, and responding to the client. I am looking to handle errors from Auth0 or Postmark individually and send ...

javascriptexpress

Ways to input data into MySQL from a dynamically created row containing multiple selections?

tableX tabX_id name value ------------------------------------ Row1 25 XnameA 1.25 Row2 26 XnameB 4.85 Row3 27 XnameA 3.25 tableY tabX_id mytabX_id multiple_tabX_id ------------- ...

phpjquerymysqlajax

The overflow of CSS text selection color spills beyond the boundaries of the box

I'm just starting to learn CSS and was wondering if there is a way to prevent the text selection color from extending into the 'gutter' (I believe that's the correct term) like shown here: It may seem trivial, but I've observed th ...

css

Modifying the type of a DOM element based on the value of an AngularJS

My main goal is to dynamically change the type of a DOM element based on a scope variable. Imagine I have a scope variable like this: $scope.post = { title: 'Post title goes here!', slug: 'post-title-goes-here', category: ...

javascriptjqueryangularjsdom

Icon overflowing due to Bootstrap 4 card title

I'm currently working on implementing an expand/collapse feature with a red close 'X' button in a Bootstrap 4 card. I've almost got it working, but when I try to place the red close icon outside the element that controls the expand/coll ...

htmlcssbootstrap-4

Tips for aligning a map with a specific location in OpenLayers 3

I am having trouble setting the center position to a specific location in Delhi, India, with the coordinates [lat: '28.627671', lng: '77.216574']. Despite using the code below, the location shown is incorrect. map = new ol.Map({ ...

jqueryangularjsopenlayers-3

What is the best approach for managing routing in express when working with a static website?

Whenever a user navigates to mydomain.com/game, I aim for them to view the content displayed in my public folder. This setup functions perfectly when implementing this code snippet: app.use('/game', express.static('public')) Neverthel ...

javascripthtmlnode.jsexpresshttp

Angular 5's external JavaScript library

After thoroughly researching this subject, I find myself still lacking comprehension. An example may be the key to understanding. As a newcomer to Angular, my goal is to create a mathematical application for mobile using Ionic. Despite investing two weeks ...

javascriptangular

What causes data to be undefined when sending it to PHP through AJAX?

this is the javascript code snippet I wrote var ActivityType ='d'; var TotalActivities = 2; function marker(ActivityType,TotalActivities) { var dataTosend='typ='+ActivityType+'&total='+TotalActivitie ...

javascriptphpjqueryajax

Can you explain the key distinction between the backtick (`) and the ampersand-hash-39

I am completely new to TypeScript, JavaScript, and Angular. As I follow some tutorials, I often encounter code snippets like the one below: class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return `(${this.x}, ${th ...

javascriptangulartypescript