https://github.com/ctrlmaniac/sidebar

Sidebars for web apps
https://github.com/ctrlmaniac/sidebar

javascript jquery navbar sidebar

Last synced: about 12 hours ago
JSON representation

Sidebars for web apps

• Host: GitHub
• URL: https://github.com/ctrlmaniac/sidebar
• Owner: ctrlmaniac
• Created: 2015-05-06T10:33:04.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2024-01-10T10:49:05.000Z (12 months ago)
• Last Synced: 2024-12-16T05:29:35.425Z (8 days ago)
• Topics: javascript, jquery, navbar, sidebar
• Language: JavaScript
• Homepage: https://codepen.io/collection/MgvLea
• Size: 32 MB
• Stars: 126
• Watchers: 12
• Forks: 48
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# SIDEBAR

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

**Sidebar** is a collection of javascript packages distributed via the npm registry. It aims to simplicity and to provide a range of tool that allow users to implement sidebar (or side navs) in their web apps!

---

## Packages

- [**simpler-sidebar**](./packages/simpler/README.md)

- [**simpler-sidebar-css3**](./packages/simpler-css3/README.md)

- [**vanilla-sidebar**](./packages/vanilla/README.md)

---

## Demo

You can play with all sidebars in this [codepen collection](https://codepen.io/collection/MgvLea).

## `simpler-sidebar`

**simpler-sidebar** is the most downloaded package. It's a **jQuery plugin** that allows to create a **side nav** as in modern mobile apps. It aims to simplicity so that everybody can use it no matter if expert programmers or not. It is written entirely in javascript so that you won't need to include any css file and the only css you must adds is not even required!

```shell

// Install

// with npm

npm install simpler-sidebar

// with yarn

yarn add simpler-sidebar

```

The full documentation is available [here](./packages/simpler/README.md).

## `simpler-sidebar-css3`

**simpler-sidebar-css3** is a fork of **simpler-sidebar** plugin. The difference between the two is that this package doesn't use jquery animation method but it uses CSS3 animations! This should make this package less brutal against memory! Options differ slightly so read the documentation first if you intend to migrate to this package!

```shell

// Install

// with npm

npm install @ctrlmaniac/simpler-sidebar-css3

// with yarn

yarn add @ctrlmaniac/simpler-sidebar-css3

```

The full documentation is available [here](./packages/simpler-css3/README.md).

## `vanilla-sidebar`

**vanilla** is a simple sidebar package written in plain vanilla javascript. It aims to have no dependencies!

```shell

// install

// with npm

npm install @ctrlmaniac/vanilla-sidebar

// with yarn

yarn add @ctrlmaniac/vanilla-sidebar

```