0

I have a left main menu with a position of fixed and a width of exactly 90px. I need a secondary flyout menu to slide out from under it, from left to right. Like the main nav, it also needs to have a position of fixed, but can be variable widths. I want to use a CSS transition, so I want to start the flyout menu right at the edge (right edge) of the main menu, so that when the transition starts, you can immediately see the secondary menu sliding out. So here's the flyout menu before sliding out:

flyout menu under main menu before sliding out

and here it is after sliding out:

flyout menu after sliding out from under main menu

I can get the final position of the flyout menu by using left: 0, and margin-left: 90px (width of main left menu). My problem is how to use CSS (no JavaScript) to get the initial position (right edge flush with main menu right edge), that will allow me to use a CSS transition to get to the final position.

The closest I've gotten is starting at left: -100%, but this puts it too far to the left, so that there's a delay before you see the flyout beginning to emerge from underneath the main menu.

jbyrd
  • 5,287
  • 7
  • 52
  • 86

1 Answers1

0

You haven't said how you're setting the width of your elements (in pixels or percentages, or what have you), but basically you just need to subtract the width of the skinny menu from the width of the wider one and set the left to a negative of that value.

For Example, if

.skinny {
   width: 10%;
}

Then

.wide {
    width: 50%;
    left: -40%;
}

because 50% - 10% = 40%

http://jsfiddle.net/ingridly/pbgd4pqk/

ingridly
  • 159
  • 10
  • Unfortunately, the "wide" menu (the flyout secondary menu) can be multiple widths, so I can't use that kind of math. I am setting a fixed pixel width on the main menu, though. – jbyrd Mar 13 '15 at 02:34