当前位置: 动力学知识库 > 问答 > 编程问答 >

CSS horizontal flyout menu - positioning the flyout

问题描述:

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:

and here it is after sliding out:

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.

网友答案:

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/

分享给朋友:
您可能感兴趣的文章:
随机阅读: