Need some help building a horizontal slider/menu component

JavaScript
1

I am looking for some help building an HTML/CSS component that would:

  1. Feature a small set of icons that would be placed on the right-side of a div
  2. If someone clicked on one of the icons, the component would slide out towards the right, featuring various UI elements (i.e. descriptive text and form elements). The component slides out to match the width of the content (not fixed width)
  3. The slider slides back if the user clicks on the “X” in top right corner or moves their mouse/clicks outside the slider area.
  4. A nice to have would be if the component is towards the right side of the screen, the component slides out left (so it does not go outside the screen area or show a horizontal slider on the bottom of the screen window).

A visual of what I am trying to accomplish can be found in the attached file.

2

This kind of behavior normally required JavaScript, so this thread has been moved there.

If you Google somthing like “jQuery slide out menus” or “jQuery popup boxes” or similar you may find some ready-to-go scripts. Then you can look at the styling later.