Summary - Dropdown panel

CSS course · Expert · Lesson 42/53

Build a dropdown panel with anchor positioning.

Summary - Dropdown panel

In this lesson we combine four pieces to build a dropdown panel: making the button an anchor with anchor-name, binding the panel with position-anchor, placing it with anchor(), and flipping it on collision with position-try.

Your turn: first the button block, then the panel block. Two code steps follow each other; once both are done the panel opens downward and upward.

Panel plan

The panel has two parts. The button (.menu-button) becomes an anchor with anchor-name: --menu-button. The panel (.menu-panel) carries position: absolute, position-anchor: --menu-button, top: anchor(bottom), and position-try: --flip-above.

These four declarations together place the panel below the button and flip it up on collision. Not a line of JavaScript.

Exercise Make the button an anchor

Write a .menu-button selector. The block must contain anchor-name: --menu-button. The button becomes an anchor.

Show example solution

/* make the button an anchor */
.menu-button {
  anchor-name: --menu-button;
}

Exercise Place the panel and add a fallback

Write a .menu-panel selector. The block must contain position: absolute, position-anchor: --menu-button, top: anchor(bottom), and position-try: --flip-above.

Show example solution

/* bind and place the panel */
.menu-panel {
  position: absolute;
  position-anchor: --menu-button;
  top: anchor(bottom);
  position-try: --flip-above;
}

Test yourself

Match each property to its role

anchor-name

Gives an anchor name
position-anchor

Binds to the anchor
anchor()

Positions by the anchor
position-try

Tries a fallback

All lessons in Expert

Summary - Dropdown panel