Positioning CSS horizontal flyout menu - arranging the flyout items

Question

Positioning CSS horizontal flyout menu - arranging the flyout items

In my design, I have a left main menu set to a fixed position and with a width of 90px. To enhance user experience, I want to add a secondary flyout menu that slides out from under the main menu, moving from left to right. The flyout menu should also have a fixed position but can vary in width. I plan to implement this slide-out effect using CSS transitions.

Before sliding out, the flyout menu will sit right at the edge of the main menu, ready to transition smoothly:

After sliding out, it will reveal its full content:

To determine the final position of the flyout menu, I can use 'left: 0' with a margin-left equal to the width of the main menu (90px). However, I'm struggling to figure out how to set the initial position so that the flyout menu starts flush against the right edge of the main menu, allowing for a seamless transition to the final position without any delay.

My current attempt involves starting with 'left: -100%', but this places the flyout menu too far to the left, resulting in a noticeable delay before it begins emerging from underneath the main menu.

css menu css-transitions slidingmenu flyout

Answer 1

Answer №1

Your method of determining the width of your elements is undefined, whether in pixels, percentages, or other means. To achieve the desired effect, simply subtract the skinny menu's width from the wider one and set the left value to the negative of that result.

For instance:

.skinny {
   width: 10%;
}

Therefore:

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

as 50% - 10% equals 40%

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

Answer 2

Your method of determining the width of your elements is undefined, whether in pixels, percentages, or other means. To achieve the desired effect, simply subtract the skinny menu's width from the wider one and set the left value to the negative of that result.

For instance:

.skinny {
   width: 10%;
}

Therefore:

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

as 50% - 10% equals 40%

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

Positioning CSS horizontal flyout menu - arranging the flyout items

Answer №1

Similar questions

Using a background image in a React component

Create a new function that generates a unique div element

What is the best way to incorporate various styles into one :style attribute?

The issue with drop down checkboxes not scrolling correctly is being experienced specifically in IE 8 compatibility mode

Adjust the font color as the SVG Animation in the Background transforms

Creating gaps between flexbox divs for a more visually appealing layout

Having trouble getting jQuery JavaScript to work on Wordpress and feeling lost about how to implement no-conflict mode syntax

Express.js problem: Unable to load CSS and JS files from the 'public' directory

javascript various backgrounds on click

Node.js Less compiler encountering parsing error with #zoom: 1; declaration

Django - issue with table display showing empty row due to query set

_problem with text formatting in bootstrap 4 template

Personalized FileInput within a card - Bootstrap 5

What could be causing my bootstrap cards to have varying lengths?

Is there a Firefox extension for optimizing absolute CSS positioning for faster web development?

Splitting a string into individual parts using PHP

How come the translateX function doesn't function properly for fixed elements in IE9, IE10, and IE11?

Steps to turn off Bootstrap's fixed navigation on mobile devices

Ensure that the width of the table rows (tr) matches the width of the table header

What could be the reason behind CSS styles applying only when inserted within a style tag in my form, and not in the linked CSS file?