Untitled

100%

✓ Published0🌍 Public

Last edited Mar 11, 2020

Created on Mar 11, 2020

This example shows a clickable hamburger menu icon that animates into an “X” shape. The HTML and CSS define three horizontal bars, while the JavaScript `classList.toggle` method applies a `.change` class that triggers CSS transforms—rotating the top and bottom bars and fading out the middle one. No external libraries are used; the interaction relies on native browser APIs and CSS transitions.

AI-generated description

Testing things out

MIT Licensed

Similar vizzes

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

68% match

Loading thumbnail…

Untitled

A red circle remains static until hovered, at which point it smoothly scales to twice its size. This interaction is achieved through a CSS `transition` on the `transform` property, triggered by the `:hover` pseudo-class. The example uses raw HTML and SVG within a single `index.html` file, with no external JavaScript or libraries, demonstrating a simple yet effective hover effect in a React-compatible format.

Ppratyush giri

67% 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

66% match

Loading thumbnail…

YOOO

This example demonstrates a responsive navigation bar for a website, showcasing a fixed menu with a logo, links, and a sign-up button. It illustrates how the layout transforms on smaller screens, using a hamburger toggle to reveal a dropdown menu. The code relies on HTML structure and CSS styling, including flexbox, grid, gradients for the logo text, and media queries for responsiveness. The design uses a dark background with vibrant gradient and hover color effects for interactive elements.

Llektr0

66% match

Loading thumbnail…

Untitled

This example demonstrates a responsive website layout built with HTML5 and CSS, featuring a navigation bar, introductory image, and content sections for boxes, events, and projects. The page uses semantic structural elements like `header`, `nav`, `main`, and `section` tags to organize material, with styling applied through a CSS framework. The design incorporates interactive buttons and links, and the visual hierarchy relies on header tags and horizontal rules. The layout is defined directly in the HTML structure, with no JavaScript libraries or data-viz libraries present.

DDannwiz

65% match

Loading thumbnail…

Untitled

This example shows a single green circle that displays a custom HTML tooltip on hover, with the tooltip following the mouse position. The SVG circle and tooltip are created using D3 v4, with the tooltip built as an HTML div styled via inline CSS. Pan-and-zoom functionality is enabled through `d3.zoom`, which applies a transform to the SVG group. Mouse events use `d3.mouse` to position the tooltip relative to the cursor, using `mouseover`, `mousemove`, and `mouseout` handlers.

CCKHope

64% match

Loading thumbnail…

Untitled

This example demonstrates collapsible content sections controlled by clickable buttons. The interface presents a set of headers, each of which can be expanded or collapsed to reveal or hide a block of text below it. The implementation uses vanilla JavaScript event listeners to toggle CSS classes and inline `display` styles, responding to user clicks on elements with the class `collapsible`. The page is built with plain HTML and CSS, with styling that changes the button background color on hover and when active, and sets the hidden content area to a specific width with pink text on a white background.

OOghenemaro Anuyah

64% match

Loading thumbnail…

Untitled

This example displays an interactive 3D bar chart built with D3.js v2 and jQuery. It renders an SVG-based visualization where bars are grouped by categorical x-axis values, with drop shadows applied via SVG filters to create a 3D effect. The chart uses ordinal and linear scales to map data, and includes custom axis tick formatting for captions. The code initializes on document ready, transforming input data and building the chart within a scrollable container.

Sskambhore04

64% match