Arszenik Arszenik - 22 days ago 8
CSS Question

Changing attributes of two elements with a single CSS event

So there is a thing Im trying to do for a website I am making (and I cannot use Javascript for this) where on the right side of the screen there will be an arrow and when the user hovers over it a small navigation menu will pop out.

I was thinking about putting styling inside of styling but thats not a thing you can do in CSS so I dont know how to make one :hover event change the attributes of two elements.

This is what it looks like at the moment.

HTML:

<div id="navigation">
<img src="arrow.png" id="arrow" alt="Navigaton menu arrow"></img>
<div id="navcontent">
<p class="nav"><a href="index.html#section1"> Section 1 </a> </p>
<p class="nav"><a href="index.html#section2"> Section 2 </a> </p>
<p class="nav"><a href="index.html#section3"> Section 3 </a> </p>
</div>
</div>


CSS:

#arrow {
opacity: 0.5;
}

#navigation {
position: fixed; /* because menu must stay in the same place of the screen */
right: 2px;
}

#navcontent {
/* ?? */
}

#navigation:hover {
-webkit-transition: translate (-50px,0px);
-ms-transform: translate(-50px,0px);
-webkit-transform: translate(-50px,0px);
transform: translate(-50px,0px);
}


PS: Sorry for mediocre English, Im kinda bad at explaining things.

Answer

I hope i understood you right. Here is an simple example:

See example

HTML

<nav class="nav">
   <a href="index.html#section1"> Section 1 </a>
   <a href="index.html#section2"> Section 2 </a>
   <a href="index.html#section3"> Section 3 </a>
</nav>

CSS

.nav {
  background: #eee;
  position: fixed;
  right: 0;
  transform: translate(100%,0);
  transition: transform .5s;
  width: 150px;
}

.nav:hover {
  transform: translate(0,0); 
}

.nav:before { 
  content: "";
  opacity: 0.5; 
  width: 40px;
  height: 40px;
  background: grey;
  position: absolute;
  transform: translate(-100%,0);
  cursor: pointer;
}

.nav:after {
  content: "\279C";
  display: table;
  font-size: 30px;
  position: absolute;
  left: -20px;
  top: 20px;
  transform:  translate(-50%,-50%) rotate(180deg);
}

.nav:hover:after {
  transform:  translate(-50%,-50%) rotate(0);
}

.nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #999;
}

.nav a:hover {
  background-color: #ddd;
}

If you really need an image for the trigger, you can define this in the css.

Comments