Maintain the transformed :after element within the designated target in CSS

Having trouble with menu styling.

This is how the menu looks:

https://i.sstatic.net/pqzBm.png

Styling for each element is as follows:

.gallery-navi-element {
    position: relative;
    float: left;
    text-align: center;
    font-size: 1.7em;
    padding: 0px 60px 0px 60px;
    margin-top: 10px;
    transition: height .8s ease;
}
.gallery-navi-element:hover:after {
    content: " ";
    position: absolute;
    left: 50%;
    /* top: 50%; */
    transform: translate(-50%,0%);
    top: 40px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 25px 0 25px;
    border-color: rgb(74, 125, 51) transparent transparent transparent;
    transition: 0.5s all;
}

With this setup, I can achieve this effect:

https://i.sstatic.net/CmuiG.png

However, I am struggling to make the triangle stay after a click. Using jQuery handlers to add classes doesn't seem to work, as the new class overrides the navigation buttons. I have also experimented with :target without success. Any ideas?

EDIT:

Here is a fiddle link: https://jsfiddle.net/a7zs3z6o/

htmlcss

Answer №1

To enhance accessibility, make sure to assign a tabindex attribute to every gallery-navi-element:

<div class="gallery-navi-element" id="gallery-show-wszystkie" tabindex="1">Wszystkie</div>

This will enable them to be focused when clicked.

Furthermore, remove the default outline that displays on focused elements by using the following CSS:

.gallery-navi-element:focus {
  outline: none;
}

View the Updated Fiddle

Answer №2

If you want to avoid the hassle of changing nav links' classes, consider adding a new class called .hover with the same styles as :hover. This way, you can prevent any conflicts with existing styles.

Simplifying your CSS by including only the transitioned styles in the hover state or added-class state might make things easier for you.

.gallery-navi-element:after {
  content: " ";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 30px;
  width: 0;
  height: 0;
  border-style: solid;
  /* border-width: 0px 25px 0 25px; */
  border-width: 10px 25px 0 25px;
  border-color: rgb(74, 125, 51) transparent transparent transparent;
  transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
  top: 40px;
  border-top-width: 20px;
}

Keep in mind that the border-top-width transition is specifically to ensure that the triangle design doesn't cover up the bottom of certain letters like Y in the initial links.

Here's an example:

var navLinks = document.getElementsByClassName('gallery-navi-element');

for(var i=0,l=navLinks.length;i<l;i++) {
  navLinks[i].addEventListener('click', function(){
    for(var i=0,l=navLinks.length;i<l;i++) {
      navLinks[i].classList.remove('hover');
    }
    this.classList.add('hover');
  }, false);
}
.gallery-navi {
  border-radius: 28px;
  width: 950px;
  height: 55px;
  background-color: rgb(74, 125, 51);
  margin: 0px auto 20px auto;
}
.gallery-navi-wrapper {
  margin: 0 auto;
  width: 870px;
}
.gallery-navi-separator {
  width: 2px;
  background-color: rgba(255, 255, 255, 0.2);
  height: 36px;
  float: left;
  margin-top: 10px;
}
.gallery-navi-element {
  position: relative;
  float: left;
  text-align: center;
  font-size: 1.7em;
  padding: 0px 60px 0px 60px;
  margin-top: 10px;
  transition: height .8s ease;
}
.gallery-navi-element:after {
  content: " ";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 30px;
  width: 0;
  height: 0;
  border-style: solid;
/*   border-width: 0px 25px 0 25px; */
  border-width: 10px 25px 0 25px;
  border-color: rgb(74, 125, 51) transparent transparent transparent;
  transition: 0.5s all;
}
.gallery-navi-element:hover:after,
.gallery-navi-element.hover:after {
  top: 40px;
  border-top-width: 20px;
}
<div class="gallery-navi">
  <div class="gallery-navi-wrapper">
    <div class="gallery-navi-element" id="gallery-show-wszystkie">Wszystkie</div>
    <div class="gallery-navi-separator"></div>
    <div class="gallery-navi-element" id="gallery-show-produkty">Produkty</div>
    <div class="gallery-navi-separator"></div>
    <div class="gallery-navi-element" id="gallery-show-tartak">Tartak</div>
    <div class="gallery-navi-separator"></div>
    <div class="gallery-navi-element" id="gallery-show-sklad">Skład</div>
  </div>
</div>

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

Click and Rotate for More Information

Hello everyone, I have a question regarding creating a unique Tumblr theme. My goal is to make the posts rotate on the y-axis when clicked, revealing like and reblog information. Currently, I've been able to achieve this effect on hover by using code ...

javascriptjqueryhtmlcss

Avoiding Overlapping DIVs: Tips to Keep Your Elements in Place

Instead of using table-based layout, I have decided to go with a DIV-based layout in order to streamline the markup and improve page load speed. However, as I am not an expert in CSS, I find it quite challenging. Below are the CSS classes I am currently us ...

css

Tips for executing an href action within an iframe (using colorbox) following the completion of a PHP script

I am currently trying to figure out the best way to make a link open in an iframe (using colorbox) after a php script has finished processing. The reason behind this necessity is that within the php script, I generate a png image from a canvas element on t ...

phpjqueryhtmlajaxcolorbox

The feature for choosing rows is not functioning properly when using materializecss in Tabulator

While working on my project, I encountered an issue with selecting rows. After some debugging, it was revealed that the culprit behind this behavior is the tabulator_materialize.min.css file. Interestingly, when I don't use this CSS, everything functi ...

csstabulator

What is the best way to trigger the download of an image file created by PHP to a user's computer?

My PHP code (upload.php) allows users to upload an image from index.html, resize it, add a watermark, and display it on the same page. Users can download the watermarked image by using the 'Save image as...' option. The resized image is saved in ...

javascriptphpjqueryhtmlimage

Localization of HTML Files

After successfully implementing localization in my HTML file, I encountered an issue with pseudo-localization. Despite changing the language of the simulator, the HTML file continued to display in English. To troubleshoot, I compared two HTML files within ...

htmlioslocalization

Issue with Bootstrap carousel: image protrudes past boundaries of parent container

Struggling with setting up a bootstrap carousel on my page. I want the image to extend beyond the parent div, positioned at the bottom rather than the top. How can I achieve this without disrupting the default carousel behavior? Here's a sketch of how ...

javascripthtmlcsstwitter-bootstrapcarousel

Issues with CSS positioning

I'm facing an issue with the jQuery drop-down bar slipping behind images on a specific page that uses jQuery innerfade. You can see the problem here: <?php include('perch/runtime.php'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

javascriptjqueryhtmlcss

Using CSS to create a hover effect on a button that shows multiple links

I have a button in my navigation bar that I want to enhance with hover functionality. When a user hovers over the button, I want the text on the button to disappear and reveal three different clickable links inside the button. The actual button itself sh ...

htmlcss

Unraveling a collection of HTML tags using Python's Beautiful Soup library

Need help parsing HTML code using Python Beautiful Soup. Trying to extract images along with their width and height properties, if available. The following code snippet indicates there are three images on a page: the first image is 300x300, the second has ...

pythonhtmlbeautifulsoup

The two Bootstrap columns are not displaying properly on the screen

I'm working on a website that features a gallery. The code below should ideally display two columns of photos when viewed on a medium device width (768px up to 992px). However, only one column is showing up on the screen. I'm hesitant to group th ...

cssimagebootstrap-4

Deciphering the creation process behind the "WhatsApp Web" front-end page

I'm currently exploring the creation process of the front-end page for WhatsApp Web, specifically focusing on the list of contacts located on the left side (<div id="pane-side">). The contact names within this list are identified by the class "e ...

javascripthtmlcss

Div positioned absolutely beneath the footer

I'm facing an issue where the footer field I add under a div with an absolute value escapes on both mobile and desktop. Additionally, the iframe does not have full height. Any suggestions on what I should do? All the specifics are provided in the att ...

htmlcssfooterabsolute

Encountering a Jquery TypeError while trying to update the content on

I am currently working on a project where I aim to create a Java Spring application that functions as follows: upon receiving a GET request, the application sends an HTML page with a form. When the form button is clicked, a POST request containing XML cont ...

javascriptjqueryhtml

What's the best way to ensure a div's height and width are equal when implementing responsive design?

I am currently working on a responsive design and facing challenges in making div's height and width equal. Initially, I set the div's width as a percentage and height as auto, but this caused the divs to not display properly. To resolve this iss ...

javascriptjqueryhtmlcssresponsive-design

Guide to leveraging clsx within nested components in React

I am currently using clsx within a React application and encountering an issue with how to utilize it when dealing with mappings and nested components. For instance: return ( <div> <button onClick={doSomething}>{isOpened ? <Component ...

javascriptcssreactjstypescriptclsx

Showcase two featured WooCommerce categories on the homepage

On my main page, I am looking to display two categories, mobile and laptop, simultaneously. However, the code I'm using only shows one of the categories. Any assistance would be appreciated. Thank you! <?php $products= new WP_Query( array( ...

phphtmlwordpresswoocommercee-commerce

JavaScript animation not functioning properly when height is set to "auto"

Can someone help me figure out why setting the height to "auto" in the code snippet below isn't working as expected? I want the DIV to adjust its size based on the content, but it's not happening. Any ideas on how to fix this issue would be great ...

javascriptjqueryhtmlcss

The dropdown menu is not appearing in the correct position when clicked

https://i.stack.imgur.com/fMyZQ.jpg Hello there, this link appears normal before clicking on it. But once clicked, it moves to the top of the page like so: https://i.stack.imgur.com/yZ0R0.jpg You can clearly see the difference. I have also provided the c ...

javascripthtmlcss

Tips for aligning two columns of listed items vertically with Bootstrap 5 or CSS

Having difficulty aligning two columns containing text - specifically, two lists. The goal is to have both columns on the same row with centered lists and their respective items aligned as normal bullet points. Any advice would be greatly appreciated. C ...

htmlcssalignmentbootstrap-5