Emphasize the present selection along with all prior items in a menu

Attached is my menubar for a unique web design concept I am working on. My webpage is designed as a fully scrollbar page shift type, meaning it is a single page containing six sections that are scrollable by selecting menu items. Currently, when I click on a menu item, only that specific item is highlighted. However, I would like to change this so that when I click on the fourth menu item, not only should that item be highlighted but all previous menu items should also remain highlighted. How can I achieve this effect?

javascripthtmlcss

Answer №1

let's discuss the premise of this particular code:

<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>
<span class="menuitem">Howdy</span>

this is the corresponding CSS:

.menuitem{border-bottom: 4px solid #888888;}
.menuActive{border-bottom: 4px solid blue;}

the javascript part goes like this:

$('.menuitem').click(function(){
    $('.menuitem').removeClass('menuActive');
    $(this).prevAll().andSelf().addClass('menuActive');
});

here's a link to the live example on JSFiddle: http://jsfiddle.net/vE6yW/

EDIT: relevant for jQuery versions 1.8 and 1.9+.

In jQuery version 1.8, the addBack() method was introduced whereas in version 1.9, the andSelf() method was removed. So, for jQuery 1.8 onwards, please use the following:

$('.menuitem').click(function(){
    $('.menuitem').removeClass('menuActive');
    $(this).prevAll().addBack().addClass('menuActive');
});

This modification ensures the same effect as before. Additionally, addBack() allows for adding a selector to specify which elements are included in the added selection group if needed.

Answer №2

Here is a solution that might suit your needs: http://jsfiddle.net/cxndW/

I utilized a solid border to create the desired effect, though background images or border images could also be used.

Here is the HTML:

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ul>​

The CSS below is quite generic and may need specific classes or ids for more precise styling:

ul{
    overflow:hidden;
    margin:1em;
    float:left;
}
li{
    float:left;
    padding:.1em 0;
    border-bottom:solid 5px #ccc; /* default state, grey */
    cursor:pointer;
}
li + li{
    padding-left:1em;
}
ul:hover li,                  
ul.active li,                
ul.active:hover li{          
    border-bottom-color:#34f; /* changes to blue */
}
li:hover ~ li,                
ul li.active ~ li,            
ul.active:hover li:hover ~ li{ 
    border-bottom:solid 5px #ccc; /* back to grey */
}

In the demo, there's some simple jQuery included that marks the clicked list item as active (clearing any other active items).

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 come I am able to reference a component in styled-components while others cannot?

When using styled-components, you can reference another React component using the syntax ${Label}. However, I have noticed that it only works with certain components and not others. Despite reading the documentation at , I encountered an issue when trying ...

javascripthtmlcssreactjsstyled-components

A HTML input field that allows for multiple values to be populated by autofill functionality, similar to the features found

Can anyone assist me with creating a text box similar to the one in Facebook's new message feature? In that feature, we are able to add multiple people in the 'To' field, all of whom are suggested from our friend list. I would like to implem ...

javascriptphpajax

Vue.js fails to display multiple uploaded images

I have been working on implementing a multiple image upload feature using vue.js. So far, everything seems to be functioning correctly. However, I am facing an issue where the HTML does not display thumbnails of the images I have selected. Additionally, I ...

javascripthtmlimagevue.jsupload

Should I utilize Next.js API route or communicate directly with Firestore from the client side?

Greetings, I am new to Next.js and have a few queries regarding utilizing Firebase authentication on both the client side and server side. My project is set up with Firebase admin and client SDKs, and I have a signup page where users provide their name, em ...

javascriptfirebasegoogle-cloud-firestorenext.jsfirebase-admin

One problem with placing Bootstrap columns inside another column

Currently, I am in the process of working on a website that requires a description section. To achieve this, I decided to use two Bootstrap columns – one with a size of 8 and another with a size of 4, totaling up to 12 grid units. Inside the column sized ...

htmlcsstwitter-bootstrappositioncss-position

Sending data from an HTML form to a div section without the need to refresh the entire page

I am currently working on a slide-down panel created in JQuery within a table. This panel includes a contact form where users can submit their information. My challenge is to post the form data to PHP without reloading the entire page, as the slide-down ...

phphtmlajax

The combination of Inline CSS and Bootstrap classes does not seem to be functioning properly

I'm new to web design and currently working on a website project. My concept involves hiding the #login-box when the user clicks on the login button, and displaying another element (.dashboard) in its place. Initially, I set the .dashboard class to ha ...

javascripthtmlcsstwitter-bootstrap

Updating the output without the need for a page refresh following the insertion of data into the database

I'm interested in enhancing the interactivity of this section in my code. Currently, I utilize a form to send announcements via ajax to a php file which successfully updates my database. The table displays the data effectively. However, I want these c ...

javascriptphpjqueryajax

Preventing Copy and Paste and Right-Click Actions With JavaScript

Similar Question: How can I prevent right-click on my webpage? Looking to prevent right-clicking and key combinations like Ctrl+V & Ctrl+C on a webpage using JavaScript. I have a form where customers need to input their details, and I want to avoid ...

javascriptphpdom-events

How to iterate through an array of objects in Javascript and extract an array of strings

I am dealing with an array of objects that looks like this: [{"key":"aaa","value":true},{"key":"bbb","value":false},{"key":"ccc","value":true}] My goal is to iterate through it and extract an array containing only the keys: ["aaa", "bbb", "ccc"] I am u ...

javascriptarraysnode.jsloops

The focus and blur events for the document in a content editable iframe are not activated by Chrome

As I modify the content of an iframe while it is in focus, I have noticed that this seems to function properly in Firefox. However, I am facing issues as the focus and blur events do not seem to trigger in Google Chrome! var iframe = $('#iframe') ...

javascriptjquerygoogle-chromejquery-events

Is it possible to relocate a function that relies on the success callback of Ajax outside of the callback?

According to JSHint.com: Avoid placing function declarations inside blocks. Opt for a function expression or move the statement to the outer function's top. JSHint advises against keeping this function within the success callback. function matchC ...

javascriptjqueryajax

Unable to open file:/// on localhost in the browser

I have been working on a website that can display the folders and files on a client's machine in an HTML table. Everything was functioning correctly, but I encountered an issue with creating href links for files on the client's machine which were ...

pythonhtmllocalhosthrefinternet-explorer-11

Issue: Adjustment of elements' size using an "onclick" method when reaching specific screen width

Seeking assistance with implementing media queries in JavaScript. Can an object be resized from JavaScript code based on a specific screen width, rather than the default one? For example, if I have a button that opens a div with a height of 600px when cli ...

javascripthtmlmpmediaquery

Is there a directive in AngularJS that allows for binding HTML templates using ng-bind-html

I'm working on a directive that has the ability to use dynamic templates with expressions inside them. The challenge I face is if I use ng-bind-html, the expression won't be evaluated properly. On the other hand, using ng-bin-template results in ...

javascriptangularjstemplatesdata-bindingdirective

Adding markers to a Leaflet map using coordinates retrieved from a Supabase database - a step-by-step guide

I am looking to incorporate markers on a map using coordinates stored in a Supabase database column. Below is my Vue code: <l-marker v-for="(marker, index) in markers" :key="index" ref="markersRef" :lat-lng="marker.po ...

javascriptvue.jsvuejs2leafletsupabase

How can I link to a different field in a mongoDB Schema without using ObjectID?

I have created two schemas for books and authors: const bookSchema = new mongoose.Schema({ title: String, pages: Number, description: String, author: { type: mongoose.Schema.Types.ObjectId, ref: 'Author' } }); const Book = mongoose.model ...

javascriptnode.jsreactjsmongodbmongoose

Error: Objects cannot be used as constructors

An Azure Function using JavaScript HTTP Trigger posts activity in a Slack online community for customers. It has been functioning successfully for many years, but after upgrading from version ~2 to ~4, it started throwing an error stating Entities is not ...

javascriptnode.jsazure-functionshtml-entities

Expanding the functionality of Element.prototype, problem related to anchor

Consider the following code: A JavaScript (JS) Snippet Element.prototype.changeInnerText = function(str) { this.textContent = str; return this; } let divElement = document.createElement('div').changeInnerText('new div text'); / ...

javascriptdom

I want to initiate a Python script by clicking a button on my HTML page with the help of Ajax

Here is my JavaScript code: function executePython() { alert("executed"); $.ajax({ url: "http://localhost:5000/app.py", type: "POST", ...

javascriptpythonhtmlajax