How to Animate One Element When Another Element's State Changes

1

I have a navbar. On this navbar is a minus-symbol icon. I want the navbar to animate into a hidden state when the icon is clicked. I have tried both :active and :hover states for selection criteria, but the navbar does not change. I have tested navbar:hover and it works, but not .hide-navbar-link:hover.

The main question is, how do I alter a class based on the condition of another element/class?

Look in the css for the header:
/Navbar Animiation/
/**

https://codepen.io/ThisIsAaron/pen/aMRYdm

2

You can use a JS onclick event to execute a function that adds your css animation class

https://www.w3schools.com/howto/howto_js_add_class.asp

if you add an id of navbar to your navbar then you can do something like this

function myFunction() {
  var element = document.getElementById("navbar");
  element.classList.add("hide-navbar-link");
}
3

Thanks a lot for the quick reply. So using those compound selectors is not the best way of doing it? Is it even possible that way? should I just keep going through the lessons until I get to JavaScript to implement that?

4

I like the approach above, using JS to add classes.

This might show you why this doesn’t work with CSS: https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling

You can also add CSS rules directly with JS, like:

const hideBtn = document.querySelector('.hide-navbar-link');
const navbar = document.querySelector('.navbar');

hideBtn.addEventListener('click', hideIt);

function hideIt() {
    navbar.style.animationName = 'navbar-hide';
    navbar.style.animationDuration = '4s';
    navbar.style.animationFillMode = 'forwards';
}

…and also, change your link so it uses a hash symbol (and double check your formatting, have a close look at the code directly after alt="hide-navbar":

<a href="#" class="hide-navbar-link">
    <img id="minus-img" src="https://i.ibb.co/smy7v9Y/Untitled-1.png" alt="hide-navbar" />
</a>

Another thing to note, how you gonna get the navbar back once it’s hidden?

Just to add, paste this into codepen to see what I’m talking about. You can modify the behaviour of child elements via the parent like so:

<div class="wrapper">
  <p class="text">I am some <span>text</span></p>
</div>

.text {
    font-size: 50px;
    color: orange;
}

.text:hover span {
  color: blue;
}
5

Thanks. So, from what I gathered in the post you linked, the only way to do what I want is if the elements are descendants or adjacent? Javascript looks like the best way to do it to me. As far as getting it back, a secondary navbar will take the place of the primary one once only 10px’s of the old navbar is left before hiding. This way, there is a thin navbar that has a little “+” symbol to animate the main navbar back.