Vertical Menu with Map Preview + Editor (IFRAME export + Buttons + Extended Typography)

Project name:

My projects: Saves the whole project: all editor settings + menu items + iframe content. Restores last saved state.

Menu width (px): Tip: 180–320px. Default 250px. Menu gap to content (px): Menu padding X (px): Menu padding Y (px):

Menu border width (px): Menu border color:

Menu border radius (px):

Enable to round menu corners (similar to Buttons radius).

Main padding-left (px) – “flush to menu”: Tip: set Gap = 0 and Main padding-left = 0 for “menu flush to content”.

Iframe fullscreen (hide background) Removes main padding and background.
Iframe fills the entire content area.

Page Background

Menu Background

Menu Background Mode

Solid Gradient

Gradient Left: Gradient Right:

Gradient Angle (deg):

Buttons and texts

Buttons – Text

Buttons – Hover BG

Menu Title – Text

Menu Subtitle – Text

Menu Title – Border

Content – Text

Buttons – Active Stripe

Buttons – Hover Text

Buttons Hover Background

Solid Gradient

Gradient Left: Gradient Right:

Gradient Angle (deg):

Logo & Map

Bottom Logo – Background

Bottom Logo – Top Border

Map – Border

Background

Solid Color Gradient Image

Color (for “Solid Color”): Image URL (for “Image”):

Content – BG Left

Content – BG Right

Tip: Image uses cover + centered, with fallback to left gradient color.

Ultimate Color (Global)

Enable Ultimate Color (covers Menu + Main)

Color Gradient Picture URL

Color: Image URL:

Gradient Left: Gradient Right:

Gradient Angle (deg): When enabled, Menu and Main backgrounds become transparent and this layer becomes the single background.

Menu Title Font Size (px): Menu Title Alignment:

Menu Title Font:

Menu Title Bold:

Menu Title Padding (px):

Enable Menu subtitle:

Menu Buttons Font:

Buttons Font Size (px): Buttons Alignment:

Content Heading font:

Content Font Size (px): Content Alignment:

Content Heading Bold:

Content Heading Padding (px):

Show content headings

Map (URL or <iframe>): Map Height (px): Map Border Radius (px): Show map

Use the SVG logo format for the best result Logo link: Logo size (px): Show Upper Logo

Use the SVG logo format for the best result Logo link: Logo Size (px): Show Bottom logo

Border Radius (px): Padding (px): Border Width (px): Font Weight: Text Transform: Shadow:

Menu title:

Enable Enable collapsible menu (show ☰)

Start collapsed (only ☰ visible) When disabled, ☰ is hidden and the menu cannot be collapsed.

Toggle button colors

Toggle BG: Toggle Text:

Toggle Border: Toggle Hover BG:

Choose preset:

Save current as preset:

My presets:

Preset sets colors + typography + basic layout. Menu items/content are not changed.

➊ IFRAME (data URL) – recommended

➋ IFRAME (srcdoc) – alternative

➌ Full exported HTML (standalone page)

Preview (export view)