A dependency-free Vanilla JS drawer

100%

A dependency-free Vanilla JS drawer

✓ Published0🌍 Public

Last edited Nov 5, 2021

Created on Nov 1, 2021

An interactive HTML page demonstrates a slide-out drawer controlled by custom JavaScript, with no external libraries. The drawer slides in from the right side using CSS transform transitions, triggered by an anchor link and closed via a button or overlay click. The content uses placeholder text, while the structure relies on data attributes and semantic markup. The example showcases a pure HTML/CSS/JavaScript approach for creating accessible UI components without frameworks.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sliding Navigation Panel Example

This example demonstrates a sliding navigation panel that appears from the right side of the screen when a button is clicked. The panel, styled with the Bulma CSS framework, slides in and out using CSS `transition` properties on the `right` offset. Clicking outside the panel closes it. The page layout includes a fixed header, footer, and main content area, all styled with custom CSS classes, and uses JavaScript event listeners to toggle the panel's active state.

Ccolbygogan

66% match

Loading thumbnail…

Directive-less ng-pageslide

A slide-out panel demonstrates Angular's dynamic class binding for a directive-less page slide. The example uses an HTML div with the classes `ng-pageslide` and `ng-pageslide-left`, toggling an `open` class via `ng-class` based on the `panels.state` variable. The accompanying CSS defines smooth transitions for width and height properties, expanding the panel to 350px wide from the left edge over 0.5 seconds. The code relies on Angular's built-in `ng-class` directive and CSS3 transitions, with the content inside the panel becoming visible only when the `open` class is applied.

HHypercubed

65% match

Loading thumbnail…

LESSON 81 JAVASCRIPT

This example demonstrates a responsive navigation menu for a single-page website, built with HTML, CSS, and vanilla JavaScript. It shows a hamburger button that toggles a sliding panel containing anchor links to five numbered sections. The code uses CSS custom properties for theming, the Hamburgers library for the animated icon, and JavaScript event listeners to handle menu interactions and smooth scrolling. The page features a green background and a yellow header, with all styling defined in an external stylesheet.

Jjuansebas930329

65% match

Loading thumbnail…

Manipulating the artifacts

This interactive HTML page demonstrates an accordion-style interface for concealing and revealing artifact content. Two header divs, labeled “Target name,” toggle the visibility of their adjacent content sections when clicked. The example uses jQuery’s `slideToggle()` method to animate the show/hide behavior and updates the header text based on the content’s visibility state, although both states display the same label. Styling is applied via an external CSS file, with inline styles for borders, while the page loads the jQuery library from Google’s CDN.

OOghenemaro Anuyah

63% match

Loading thumbnail…

Untitled

This example presents a bare-bones HTML page that brings together CSS and JavaScript for rendering. The core functionality uses vanilla JavaScript with the D3.js library, specifically demonstrating a force-directed graph layout. The code employs `d3.forceSimulation` to calculate node positions and interactions, while CSS handles the visual styling. The example focuses on the fundamental integration of these technologies, providing a minimal yet functional starting point for more complex visualizations, with the underlying data structure defined within the script itself.

AAashish Pandey

62% match

Loading thumbnail…

Untitled

This example presents a bare minimum HTML page that demonstrates the integration of CSS and JavaScript for interactive visualization. The page uses a straightforward rendering approach, likely leveraging the Canvas API or DOM elements to display data-driven graphics. Built with React, the source code imports and manipulates data from the v3 dataset, structuring the visualization through component-based logic. The example serves as a foundational template, showcasing how JavaScript and web standards can combine to create dynamic, user-facing visual output without relying on external charting libraries.

NNJANGHU

62% match

Loading thumbnail…

Untitled

This example demonstrates a simple interactive reveal mechanism using plain HTML, CSS, and JavaScript. The page displays a heading that, when clicked, toggles the visibility of a hidden paragraph. The code uses the Document Object Model (DOM) API via `getElementByClassName` and an inline `onclick` event handler to switch between two CSS classes, `reveal` and `revealed`, which control the `display` property of child elements. This minimal approach highlights basic DOM manipulation and event handling without external libraries.

NNSHkw

62% match

Loading thumbnail…

HTML+CSS jotdown notes misc

This example shows a GitHub-style file listing row where not-yet-loaded text is indicated by grey skeleton screen placeholders. Skeleton loading blocks replace commit message and timestamp content using CSS `clip-path` insets and a background gradient with a looping `skeleton-loading` animation. The markup is structured with ARIA roles for grid rows and cells, and an inline SVG octicon folder icon renders the directory indicator. The code demonstrates a pure HTML+CSS technique for improving perceived performance without JavaScript.

GGerHobbelt

61% match