Sadrazam – Slide Menu Showcase

Basic Slide Menu

A simple slide menu triggered by a button click. On mobile it slides up from the bottom; on desktop it fades in centered. Uses new Sadrazam.SlideMenu({ ... })

String content content: () => '...'

new Sadrazam.SlideMenu({
  selector: '#trigger-basic',
  content: () => `
    <div class="slide-menu-header">
      <header>Menu</header>
      <button class="slide-menu-close-button">×</button>
    </div>
    <div class="slide-menu-option-container">
      <div class="slide-menu-option-item">Option A</div>
      <div class="slide-menu-option-item">Option B</div>
    </div>`
});

Slide Menu with Backdrop

Setting backdrop: true shows a dark overlay behind the menu. Clicking the backdrop automatically closes the menu via the Backdrop module.

Backdrop backdrop: true

new Sadrazam.SlideMenu({
  selector: '#trigger-backdrop',
  backdrop: true,
  content: () => '...'
});

Open & Close Callbacks

Use openFunc and closeFunc to run custom logic when the menu opens or closes. Check the browser console for log output.

Callbacks openFunc / closeFunc

new Sadrazam.SlideMenu({
  selector: '#trigger-callbacks',
  backdrop: true,
  openFunc: () => console.log('Menu opened!'),
  closeFunc: () => console.log('Menu closed!'),
  content: () => '...'
});

DOM Element as Content

Instead of returning an HTML string, the content function can return a real DOM element. Child nodes are moved into the menu and restored on close.

Element source content: () => document.querySelector(...)

new Sadrazam.SlideMenu({
  selector: '#trigger-dom',
  backdrop: true,
  content: () => document.querySelector('#dom-source')
  // Child nodes are moved into the menu on open,
  // and moved back to the source on close.
});

Programmatic Close & Destroy

You can close a slide menu programmatically from any element inside it by calling Sadrazam.SlideMenu.remove(element). For full teardown use Sadrazam.SlideMenu.destroy(element) or instance.destroy() — this closes the menu, removes the trigger listener, and clears the instance reference. It walks up the DOM to find the nearest [data-slide-menu-id] container. Use SlideMenu.getInstance(element) to retrieve the instance from any child element.

Static remove SlideMenu.remove(el)

// Inside the content, a button calls SlideMenu.remove(this):
content: () => `
  ...
  <button onclick="Sadrazam.SlideMenu.remove(this)">
    Close from inside
  </button>
`

Rich Content Menu

The slide menu can hold any HTML. This example shows a settings panel with icons and grouped options using the built-in .slide-menu-option-container and .slide-menu-option-item classes.

Settings panel

Share panel

Selector Types

The selector config accepts either a CSS selector string or a direct DOM Element reference.

CSS string selector: '#trigger-css-sel'

Element ref selector: document.getElementById(...)

// CSS selector string
new Sadrazam.SlideMenu({ selector: '#my-button', ... });

// Direct Element reference
const el = document.getElementById('my-button');
new Sadrazam.SlideMenu({ selector: el, ... });

Configuration Reference

All available options for new Sadrazam.SlideMenu(config). Call Sadrazam.SlideMenu.help() in the console for a quick summary.

selector CSS selector string or DOM Element. Required.

trigger Event name to listen for. Default: 'click'

backdrop Show backdrop overlay. Default: false

content Function returning HTML string or DOM Element. Required. Receives (triggerEl, instance)

openFunc Callback fired before the menu opens. Default: () => {}

closeFunc Callback fired after close animation ends. Default: () => {}

// Static methods
Sadrazam.SlideMenu.help();           // Print config reference to console
Sadrazam.SlideMenu.remove(element);  // Close menu containing the element
Sadrazam.SlideMenu.destroy(element); // Full teardown: close + remove trigger listener

CSS Structure

The DOM structure and CSS classes generated by SlideMenu. Animation classes .in / .out are added automatically during open and close transitions.

Container .slide-menu Fixed-position wrapper (full-width on mobile, centered on desktop)

Inner .slide-menu-inner Padded content wrapper (max-width 450px)

Content .slide-menu-content Your content is injected here

Header .slide-menu-header Optional header bar with centered title

Close button .slide-menu-close-button Absolute-positioned close button (auto-bound to close the menu)

Options .slide-menu-option-container Flex column list of .slide-menu-option-item elements

Animation in .slide-menu.in Slide-up on mobile, scale-in on desktop (0.3s cubic-bezier)

Animation out .slide-menu.out Slide-down on mobile, fade-up on desktop (0.2s ease)