ToolypetMCP
intermediate3 minutescss

Sidebar Navigation Layout

Build a responsive sidebar layout with CSS Grid, smooth width transition, and proper spacing.

sidebarlayoutgridresponsive

何时使用此配方

Dashboard applications, admin panels, and documentation sites commonly use sidebar navigation. This creates a clean, responsive sidebar that can be toggled on mobile.

步骤

1

Grid Generator

试用此工具

Create the sidebar + main layout

提示词:Generate a CSS grid with 2 columns: 260px sidebar and 1fr main content, no gap
2

Box Shadow Generator

试用此工具

Add subtle sidebar edge shadow

提示词:Generate a right-edge shadow for sidebar: 2px 0 8px rgba(0,0,0,0.06)
3

Easing Generator

试用此工具

Smooth sidebar toggle animation

提示词:Generate a smooth cubic-bezier for 300ms width transition on sidebar collapse

常见问题

How do I make the sidebar collapsible?

Toggle the grid-template-columns between '260px 1fr' and '60px 1fr' (icon-only mode). The transition will animate smoothly.

How do I handle the sidebar on mobile?

Use a CSS media query to change to a single column layout, and show the sidebar as an overlay with position: fixed.

相关配方