Menus change icon location (right to left)?

[post98]

I have a sidenav menu that slides onto the screen with hover event. When the menu opens, I would like for the icons to be on the right side of the text.

http://jsfiddle.net/post98/zRQ87/6/embedded/result/

https://dl.dropboxusercontent.com/s/qljlgt26okx97nd/mouseleave.PNG

https://dl.dropboxusercontent.com/s/z58oktje72igjn2/Mouseover.PNG

CSS Code:

.sidenav ul > li a div {
width: 70px;
position: absolute;
left: 0; –> right:0
top: 0;
padding: 14px 24px;
height: 51px; }

[Atelierbram]

.sidenav ul > li a div {
  width: 70px;
  position: absolute;
  right: 0;
  top: 0;
  padding: 14px 24px;
  height: 51px;
}

Works in Devtools, … (rightmenu.css line nr. 48)

[Paulie_D]

So you need two ‘states’ for the menu which I assume you already have since you are obviously switching between them.

You just need to change the CSS for the ‘second/expanded state.

Looks like you are doing the expansion with JS/JQ…so it should be simple enough to toggle an additional class or adjust the CSS property from left to right.

Perhaps you could share that Jquery/CSS in a Codepen example…JSfiddle is little less…intuitive in that area.

Anyway, a JS issue…not a CSS one I think so I’ll push it over there for now.

[Paulie_D]

@Atelierbram

Yeah…he knows that…he just doesn’t know how to make the change ONLY after the menu as been expanded…and that’s a JS issue..I think.

[Author]

Posts