Sliding Navigation Panel Example

100%

Sliding Navigation Panel Example

✓ Published0🌍 Public

Last edited Apr 29, 2023

Created on Apr 29, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Gist 70b6d2687f7832a6ef333872bb170b2d

This example demonstrates a responsive application layout with a collapsible sidebar navigation, built using React and Tailwind CSS. The sidebar includes a logo, search input, and navigation items with icons from the Untitled UI icon library. It uses Headless UI’s `Transition` and `Dialog` components to animate a slide-in mobile menu with overlay backdrop, while desktop layout relies on conditional `clsx` classes for active states. The code shows a `Sidebar` component that accepts navigation items as props, with default items for Home, Simulations, Feedback, and Resources.

EErnestoR

67% match

Loading thumbnail…

A dependency-free Vanilla JS drawer

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.

Rrickyphula

66% 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…

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

65% match

Loading thumbnail…

Sample_Leaflet_scrollytelling

This example demonstrates a scrollytelling layout where scrolling through text sections triggers changes in a fixed visual panel. The page uses a two-column design: a scrollable column containing narrative content and a fixed column that updates its displayed information based on the visible section. The code leverages HTML, CSS, and JavaScript to implement the scroll-driven interaction, with `addEventListener('scroll', ...)` detecting visibility changes. It includes the Leaflet and D3 libraries as dependencies, though the core functionality focuses on DOM manipulation for content swapping rather than map rendering. The visible logic handles two content sections, with conditional checks to toggle between corresponding fixed content panels.

FFrancesco Di Filippo

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

64% match

Loading thumbnail…

Importing

This example presents an image slider interface for a data import feature. A full-screen banner cycles through four background images with corresponding text panels, navigated by arrow controls. The slider logic uses plain JavaScript DOM manipulation, tracking image and text indices via `getElementsByTagName` and `classList`. The page also includes the D3 v5 library and the SheetJS (xlsx) library, loading them via external script tags, suggesting integration for data file handling within the static HTML structure styled by CSS.

Ddanish-nix

64% match

Loading thumbnail…

Gist 4974858be3b0a24bbeed1a8fbbade3be

This example shows a collapsible accordion interface built with React, featuring three panels where the first two contain static placeholder text and the third embeds a user-editable input field. It demonstrates nested interactive components within a Bootstrap-style Accordion using the React framework. The code uses React.createElement and a custom class with getInitialState and handleChange methods to manage the input’s state, updating its value as the user types. The accordion and panel components come from a React library, and the example relies on ReactDOM.render to display the instance.

66ewis

63% match