Change direction of the arrow from the menu when opening the submenu

Asked

Viewed 98 times

0

It is possible only with CSS change the direction of the arrow from the menu when opening the submenu?

I believe the question would be how to detect the click on the menu.

I’m using the toggleClass() of jquery to do this, but would like to use only CSS.

css

1 answer

1


You can do this by adding the attribute tabindex à div and changing the image of the arrow (whereas the image is a background) when the div receive focus:

div{
	display: block;
	width: 100px;
	border: 1px solid #ddd;
	padding: 10px;
	background: url(https://www.uni.edu/unicalendar/profiles/uni_default_install/modules/custom/uni_blocks_antares/images/down_arrow.png) no-repeat 90%;
	background-size: 20px;
}

div:focus {
	background: url(https://www.ukcommunityfoundations.org/wp-content/themes/ukcf/images/layout/up-arrow.png) no-repeat 90%;
}
<div tabindex="1">
   Menu
</div>

  • In my case after I open the menu and I click again on it, the submenu closes, but the arrow does not change because the Focus remains on it. There’s no way around that?

  • @Diegovieira It is necessary to know then what is this arrow: it is a background, it is an image, it is a pseudo-element?

  • @Diegovieira Or rather, how is this submenu opened and closed? It is a function?

  • @Diegovieira CSS just can’t detect click, it can only change the style of the element in front of an event: Focus, Hover, checked etc.

  • I use :before to place the arrow and the menu opens through a function. Your solution works, but only when I click off the menu, do I need when I click on it to work.

  • @Diegovieira The bad thing about working with pseudo-Elements is that you are a little limited. Check out this Jsfiddle that, instead of using :before, using a <span> is much easier.

Show 1 more comment

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.