Spider.css 2.0.0 - Materialize Landing Page

Welcome to Spider.css 2.0.0

A lightweight CSS + JavaScript utility library with modal, toast, dropdown, tabs, alert dialogs, and more.

✨ Features Overview

Modal: Popup dialogs with title and content
Toast: Temporary notification messages
Dropdown: Toggle menus using data attributes
Tabs: Switchable tabbed content panels
Alert Modal: Confirmation dialogs with callbacks
Auto-binding: Declarative UI triggers via data-spider
Navbar Toggle: Responsive menu toggling

📚 Quick Tutorial

Modal

Show a modal popup with custom content and optional title:

spiderModal("Hello Spider.css!", { title: "Welcome" });

Toast

Show a toast notification with optional type:

spiderToast("Saved successfully!", { type: "success" });

Dropdown

Use data-spider="dropdown" and data-target="#dropdownId" on a button:

<button data-spider="dropdown" data-target="#myDropdown">Toggle</button>
<ul id="myDropdown" class="hidden spider-dropdown">
<li>Option 1</li>
<li>Option 2</li>
</ul>

Tabs

Wrap tab buttons with data-tab="id" and content panels with matching id:

<button data-tab="tab1">Tab 1</button>
<button data-tab="tab2">Tab 2</button>
<div id="tab1" class="tab-panel">Content 1</div>
<div id="tab2" class="tab-panel hidden">Content 2</div>

Alert Modal

Show an alert dialog with confirmation callback:

spiderAlert("Are you sure?", { type: "warning", confirmText: "Yes", onConfirm: () => console.log("Confirmed!") });

Auto-binding

Use data-spider attributes to auto-bind UI elements on page load:

<button data-spider="toast" data-message="Hello!" data-type="info">Show Toast</button>

Navbar Toggle

Toggle navigation menus on mobile or custom navbars:

function toggleNav() {
const nav = document.getElementById("myNav");
nav.classList.toggle("show");
}

🧪 Live Demo

This is Tab 1 content.