How to avoid animating values on elements with specific class using CSS?

I'm currently utilizing React js and have developed a navigation bar that showcases animated lines expanding from 0% to 100% under each item on hover. Additionally, the last clicked item is assigned the .current class. However, I encountered an issue where adding CSS to move the text inside the <li> elements on hover caused this functionality to break.

Snippet:

html,
body {
  padding: 0;
  margin: 0;
  font-family: "sequel-sans-roman", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.container {
  padding: 0 2rem;
}

.main {
  min-height: 100vh;
  padding: 4rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.navIcon {
  display: inline-block;
  flex-grow: 1;
}

.nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 2.4em;
  /* coordinates w height of line away from link, MUST BE = */
}

.snip1168 {
  text-align: center;
  text-transform: uppercase;
}

.snip1168 * {
  box-sizing: border-box;
}

.snip1168 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 1.5em;
  padding: 0;
  background: ppink;
}

.snip1168 li {
  padding: 2.4em 0 0.5em;
  /* height of line away from link */
  color: rgba(0, 0, 0, 1);
  position: relative;
  text-decoration: none;
  background: pink;
  display: inline-block;
}

.snip1168 li:before,
.snip1168 li:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.snip1168 li:before {
  top: 0;
  display: inline-block;
  height: 3px;
  width: 0%;
  content: "";
  background-color: black;
}

.snip1168 li:hover:before,
.snip1168 .current a:before {
  opacity: 1;
  width: 100%;
}

.snip1168 li:hover:after,
.snip1168 .current li:after {
  max-width: 100%;
}

.mainText {
  text-transform: uppercase;
  font-size: 1.1rem;
}

.snip1168 li a {
  transition: transform ease 400ms;
  transform: translate(0, 0);
  display: inline-block;
}

.snip1168 li:hover a {
  transition: transform ease 400ms;
  transform: translate(0, -10px);
}
<div class='container'>
  <main class='main'>
    <div class='nav'>
      <div class='navIcon'>
        <img src="https://picsum.photos/40" height={40} width={40} />
      </div>
      <ul class='snip1168'>
        <li class='current'><a href="#" data-hover="Work">Work</a></li>
        <li><a href="#" data-hover="Recs">Recs</a></li>
        <li><a href="#" data-hover="Say Hi">Say Hi</a></li>
      </ul>
    </div>
  </main>
</div>

I attempted the following code snippet, but it did not produce the desired effect:

.snip1168 .current a {
  width: 100%;
}

What is the solution to maintaining the lines at 100% width for the items with the .current class?

htmlcssreactjs

Answer №1

In the code snippet above, the use of class="current" to display the clicked navigation item is common. However, a more efficient approach would be to utilize id="current" instead, as there will always be a single active/clicked/current item. Additionally, you can add a new CSS rule as shown below.

li#current::before{
width:100% !important;
}


html,
body {
  padding: 0;
  margin: 0;
  font-family: "sequel-sans-roman", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

.container {
  padding: 0 2rem;
}

.main {
  min-height: 100vh;
  padding: 4rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.navIcon {
  display: inline-block;
  flex-grow: 1;
}

.nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 2.4em;
  /* coordinates w height of line away from link, MUST BE = */
}

.snip1168 {
  text-align: center;
  text-transform: uppercase;
}

.snip1168 * {
  box-sizing: border-box;
}

.snip1168 li {
  display: inline-block;
  list-style: outside none none;
  margin: 0 1.5em;
  padding: 0;
  background: ppink;
}

.snip1168 li {
  padding: 2.4em 0 0.5em;
  /* height of line away from link */
  color: rgba(0, 0, 0, 1);
  position: relative;
  text-decoration: none;
  background: pink;
  display: inline-block;
}

.snip1168 li:before,
.snip1168 li:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.snip1168 li:before {
  top: 0;
  display: inline-block;
  height: 3px;
  width: 0%;
  content: "";
  background-color: black;
}


.snip1168 li:hover:before,
.snip1168 .current a:before {
  opacity: 1; /*not needed*/
  width: 100%;
}

/*Added Code*/

li#current::before{
  width:100% !important;
}

.snip1168 li:hover:after,
.snip1168 .current li:after {
  max-width: 100%;
}

.mainText {
  text-transform: uppercase;
  font-size: 1.1rem;
}

.snip1168 li a {
  transition: transform ease 400ms;
  transform: translate(0, 0);
  display: inline-block;
}
<div class='container'>
  <main class='main'>
    <div class='nav'>
      <div class='navIcon'>
        <img src="https://picsum.photos/40" height={40} width={40} />
      </div>
      <ul class='snip1168'>
        <li id='current'><a href="#" data-hover="Work">Work</a></li>
        <li ><a href="#" data-hover="Recs">Recs</a></li>
        <li><a href="#" data-hover="Say Hi">Say Hi</a></li>
      </ul>
    </div>
  </main>
</div>

See a working example at : Codepen

Answer №2

To clarify, you are looking to keep the animated line visible at 100% width when the .current class is active.

It seems there may be a few errors in your selectors, but to avoid disrupting your current code, adding this line should resolve the issue:

ul li.current::before {
  width: 100%;
}

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

Which is the better choice: HOC/Render-Callback or Library Function?

Currently, I am working on a project that involves sending an email to a prospect regarding a property they are interested in. The process includes fetching property information and the prospect's contact details from the database at a top level compo ...

reactjsfunction-compositionhigher-order-components

How can you gradually fade out the bottom edge of a rendered component until it is re-rendered?

Currently, I am developing a reviews microservice for an e-commerce platform using react and react-bootstrap. My goal is to showcase 5 reviews initially, followed by a button to expand and reveal more reviews. In order to achieve this, I envision the botto ...

javascriptcssreactjsreact-bootstrap

Why does my JavaScript code only function properly on the initial div element?

I want to create a JavaScript function that changes the color of the title when I hover over an image. It seems to be working, but only for the first div. Could it be an issue with my scoping? Thank you! <body> <div> <a href="" i ...

javascripthtmlcss

Declaring a subclass type in Typescript: A step-by-step guide

Would it be feasible to create something like this? export abstract class FilterBoxElement { abstract getEntities: any; } export interface FilterBoxControlSuggestions extends FilterBoxElement { getEntities: // some implementation with different pa ...

javascriptreactjstypescript

Separators can be implemented to enhance the visual distinction between arrow icons and text within

Currently, I am working on creating a select menu using Bootstrap 4. I successfully replaced the arrow icon in the select element by changing the background, but now I am facing a challenge in adding a left border to that image. I have tried different meth ...

csstwitter-bootstrapbootstrap-4

Position the vertical bar directly adjacent to the form input field

Looking for assistance with creating a unique webpage layout that includes a form where the employee ID is visually separated from the rest of the content by a vertical bar extending across the entire page. However, my attempts to achieve this using a gr ...

javascriptcssreactjs

Load new content dynamically within the content slider

I'm working on a website that uses the bx slider to create a fullscreen presentation-style slideshow. Currently, all the slides are hardcoded into the homepage as shown below: <ul class="bxslider group"> <li> <div class="container ...

jqueryhtmlajaxslideshowbxslider

Validation for an empty string in the value of an input element

Why is my empty string validation not functioning correctly for the value property of an HTMLInputElement after trimming? The issue lies in the code within the storeOnEnter function. My intention is to update the state only when the input field is empty. ...

javascriptreactjstypescript

Maintain the style of the main navigation menu when hovering over the sub-navigation items

I am currently in the process of redesigning the navigation bar for a specific website. The site utilizes Bootstrap, with a main navbar and a secondary navbar-subnav. While I have been able to style both navs accordingly, I am encountering difficulties whe ...

cssnav

"Upon loading the page, I encounter JavaScript errors related to Angular's ngOnInit function. However, despite these errors,

I have a page in angular where I am loading data in the ngOnInit function. The data loads correctly and is displayed on the page, everything seems to be working fine. However, I am encountering numerous javascript errors in the console stating cannot read ...

javascripthtmlasp.netangularconsole

Control the behavior of a child's response

I am facing a challenge with my <FakeItem> component that contains two child components, title and content. In the parent component called <Index>, I need to extract and render these child components separately. To illustrate my issue, here i ...

reactjsjsx

Disabled Carousel Navigation Controls in Bootstrap 4

After following the official Bootstrap tutorial, I attempted to set up a carousel containing three images. Despite changing the links for demonstration purposes, the issue persisted. While the navigation arrows seemed functional, the image itself remained ...

jqueryhtmlcsstwitter-bootstrap

A step-by-step guide to customizing MUI CSS within a React component that incorporates MUI elements

Here is a custom Reactjs component I created and used in various components: function CustomSearchBox({ handle, placeholder, inputType, ...props}) { return ( <Box sx={{ display: 'flex', ali ...

htmlcssreactjsmaterial-ui

How can an external style sheet be inserted into an iframe?

My website features an editor on one side and an iframe on the other. Currently, anytime HTML code is entered into the editor and a keyup event occurs, the iframe updates automatically. I am looking to add default styling to the code entered in the editor ...

javascripthtmlcssiframe

Using JavaScript to transmit form data

I'm currently working on gathering form data and including it as a payload in my POST request within a ReactJS component. Here's what I have so far: handleSubmit = (event) => { const data = new FormData(event.target); event.preventDef ...

javascriptreactjs

What is the reason behind the browser not reusing the authorization headers following an authenticated XMLHttpRequest?

As I work on developing a Single Page Application using Angular, I have encountered an interesting challenge. The backend system exposes REST services that require Basic authentication. Surprisingly, while obtaining index.html or any of the scripts does no ...

javascripthtmlangularjsbasic-authenticationsingle-page-application

Is this code written in ReactJS?

Just starting out with ReactJS. Came across this code in a "join ReactJS event questionnaire" but I couldn't get it to compile. It looks like the Item and List components are missing their class definitions. Is this shorthand format correct? https:// ...

reactjs

The issue of Chrome not updating when resizing the window in jQuery

I've encountered an issue while using jQuery to obtain the height of a specific element, as this measurement changes when someone resizes their browser window. Below is the code snippet I am currently using: $(function() { var wheight = $('. ...

javascriptjquerycssgoogle-chrome

Two distinctive link styles housed within a single container in CSS

Creating two different link styles for a div container is my current goal. I want individual links in the text to be underlined, but not the ones in the list - they should only underline when hovered over. However, it seems that the second styling declar ...

htmlcss

I am looking to enhance my HTML element by incorporating additional CSS properties using jQuery, without replacing any existing properties - just building on top of them

Index.html <html> <head> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <!-- jquery-3.4.1.min --> < ...

javascriptjqueryhtmlcssajax