Simple & lightweight Customisable Menu Drawer Component

react-native-side-drawer

react-native-side-drawer

Simple & lightweight side menu drawer

Install

yarn add react-native-side-drawer

OR

npm install react-native-side-drawer

Usage

import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import MenuDrawer from 'react-native-side-drawer'

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  toggleOpen = () => {
    this.setState({ open: !this.state.open });
  };

  drawerContent = () => {
    return (
      <TouchableOpacity onPress={this.toggleOpen} style={styles.animatedBox}>
        <Text>Close</Text>
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <MenuDrawer 
          open={this.state.open} 
          drawerContent={this.drawerContent()}
          drawerPercentage={45}
          animationTime={250}
          overlay={true}
          opacity={0.4}
        >
          <TouchableOpacity onPress={this.toggleOpen} style={styles.body}>
            <Text>Open</Text>
          </TouchableOpacity>
        </MenuDrawer>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 30,
    zIndex: 0
  },
  animatedBox: {
    flex: 1,
    backgroundColor: "#38C8EC",
    padding: 10
  },
  body: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F04812'
  }
})

Props

| Property | Description | Type | Default Value |
| open | Value toggling open and close of drawer | Boolean | false (closed) |
| drawerContent | Drawer contents | React.Component | Text component: Close |
| drawerPercentage | Value between 0 - 100, depicting the percentage of the screen the drawer will open | Integer | 45 |
| animationTime | Value depicting the time (in ms) the menu will slide open & close | Integer | 200 |
| overlay | Value toggling menu overlay or push. When overlay is true, the menu will overlay the background screen. When overlay is false, the menu will push the background screen to the side | Boolean | true |
| opacity | Value between 0-1 for the opacity fade of background when the menu is open | Float | 0.4 |

Coming soon

  • [x] iOS SafeArea support
  • [x] Custom width of drawer and sliding time
  • [x] Opacity fade of background screen

Download Details:

Author: pedreviljoen

GitHub: https://github.com/pedreviljoen/react-native-menu

#react-native #react #mobile-apps

What is GEEK

Buddha Community

Simple & lightweight Customisable Menu Drawer Component
Einar  Hintz

Einar Hintz

1593229920

Android Menu - Steps to implement Menu in Android - DataFlair

Types of Android Menu

Let us see the various types of menu in Android:

1. Android Options Menu

The Options Menu is a collection of options for an activity. It has a set of items that are useful to perform actions. It helps us to combine multiple actions together.

Following is an example of Options Menu:

Options Menu in Android

2. PopUp Menu

Pop-Up menu is a menu that displays a list of items in a popup window. A pop-up menu appears below the view by default, in case there is no space, it appears above it.

Android Pop Up menu

3. Contextual Menu

A contextual menu is a floating menu. It appears only when the users long-press an element or right clicks on that. It generally affects the selected element.

Contextual menu

#android tutorials #android menu #android menu types #contextual menu #menu android #menu in android #options menu #types of menu in android

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Avav Smith

Avav Smith

1578125521

20 Best Vue Menu Component for Your App

Menus appear upon interaction with a button, action, or other control. They usually display a list of choices, with one choice per line, but can also show a rich content.

Here are the 20 Vue menu components I have collected very well.

1. vue-simple-drawer

A tiny Drawer component with bounced animation for Vue.

vue-simple-drawer

View Demo

Download Source

2. Vue Stripe Menu

Create a dropdown like on Stripe.

Vue Stripe Menu

View Demo

Download Demo

3. Vue Slider

A slide menu for vuejs.

Vue Slider

View Demo

Download Source

4. vue-dynamic-dropdown

A Highly Customizable, easy-to-use elegant dropdown component.

Feedback would be much appreciated, questions, suggestions, issues are more than welcome.

vue-dynamic-dropdown

View Demo

Download Source

5. vue-scrollactive

Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

This Vue 2 component makes it simple to highlight a menu item with an ‘active’ class as you scroll.

  • Highlights items with a class as you scroll
  • Scrolls to item’s section on click
  • Customizable easing for scrolling on click
  • Emits events on class changes

vue-scrollactive

View Demo

Download Source

6. vue-sidebar-menu

A Vue.js Sidebar Menu Component.

vue-sidebar-menu

View Demo

Download Source

7. vue-burger-menu

An off-canvas sidebar Vue component with a collection of effects and styles using CSS transitions and SVG path animations.

vue-burger-menu

View Demo

Download Source

8. vue-tree-nav

Navigation tree menu component with nice integration with vue-router.

vue-tree-nav

View Demo

Download Source

9. vue-tree

tree and multi-select component based on Vue.js 2.0 .

vue-tree

View Demo

Download Source

10. v-selectmenu

A simple, easier and highly customized menu solution.

v-selectmenu

View Demo

Download Source

11. vue-simple-context-menu

Simple context-menu component built for Vue. Works well with both left and right clicks. Nothing too fancy, just works and is simple to use.

vue-simple-context-menu

View demo

Download Source

12. vue-context

A simple yet flexible context menu for Vue. It is styled for the standard ul tag, but any menu template can be used. The only dependency this package has is Vue, so the majority of styling is up to you, and any package styles for the menu can easily be overridden.

The menu disappears when you expect by using the onblur event and it also disappears when clicked on.

vue-context

View Demo

Download Source

13. sl-vue-tree

Customizable draggable tree component for Vue.js

sl-vue-tree

View Demo

Download Source

14. VueJS Tree

A highly customizable and blazing fast VueJs tree viewer.

VueJS Tree

View Demo

Download Source

15. vue-easycm

A simple and easy to use Context Menu.

vue-easycm

View Demo

Download Source

16. tree-component

A reactjs, angular and vuejs tree component.

features

  • vuejs component
  • reactjs component
  • angular component
  • open and close
  • select and deselect
  • disabled
  • loading
  • highlighted
  • checkbox
  • custom icon or no icon
  • drag and drop
  • no dots
  • large and small
  • default and dark theme
  • contextmenu(vuejs and reactjs only)
  • node id

tree-component

View Demo

Download Source
custom node(vuejs and reactjs only)

17. vue-3d-menu

Vuejs 3d menu component.

The effect refers to the menu in the upper right corner of the 2013 miaov official website.

vue-3d-menu

View Demo

Download Source

18. vue-jstree

A tree plugin for vue2.

vue-jstree

View Demo

Download Source

19. vue-menu

Recent web applications are mainly for mobile environments. Therefore UIs premised on mouse operation such as window, context-menu, nested-menu and so on are no longer mainstream.

However the context-menu and nested-menu are still effective way to have operations on deeply structured data. This package is an implementation of {nested,context}-menu for PC environments as a Vue Component.

vue-menu

View Demo

Download Source

20. Vue simple menu

Vue component for fast create simple menu block

I will be glad to correct the inaccuracy of the my English

Simple menu component with a set of basic functionality, which is enought in 80% of cases

Vue simple menu

View Demo

Download Source

I hope you like them!

#vue-js #vue-menu #vue-menu-component #best-vue-menu

anita maity

anita maity

1620627846

Sidebar Menu Using Only HTML and CSS

In this article, I am going to show you how to create a side menu bar using only simple HTML and CSS programming code. I have designed different types of menu bars on this website (eg Top Menu, Overlay Menubar, Responsive Menu).

As you can see in the thumbnail, this is a Side Navigation Menu Bar that is based on only HTML and CSS. The input checkbox tag is used to show and hide the sidebar. That means when you click on that ‘X’ button the sidebar will be slide on the left side and the only menu button is shown (3 lines bar) and again when you click on that 3 lines bar the Sidebar will be slide-right side.
When you click on that three-line bars, the checkbox will be checked and the Side Menu Bar is shown and when you again click on that bars, the checkbox will be unchecked and that shown menu bar will be hidden. This process is only done by HTML input type=checkbox tag and label tag.

Download Code

#sidebar menu #html #css #side navigation menu #menu bar #html-menu

Simple & lightweight Customisable Menu Drawer Component

react-native-side-drawer

react-native-side-drawer

Simple & lightweight side menu drawer

Install

yarn add react-native-side-drawer

OR

npm install react-native-side-drawer

Usage

import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import MenuDrawer from 'react-native-side-drawer'

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  toggleOpen = () => {
    this.setState({ open: !this.state.open });
  };

  drawerContent = () => {
    return (
      <TouchableOpacity onPress={this.toggleOpen} style={styles.animatedBox}>
        <Text>Close</Text>
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <MenuDrawer 
          open={this.state.open} 
          drawerContent={this.drawerContent()}
          drawerPercentage={45}
          animationTime={250}
          overlay={true}
          opacity={0.4}
        >
          <TouchableOpacity onPress={this.toggleOpen} style={styles.body}>
            <Text>Open</Text>
          </TouchableOpacity>
        </MenuDrawer>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 30,
    zIndex: 0
  },
  animatedBox: {
    flex: 1,
    backgroundColor: "#38C8EC",
    padding: 10
  },
  body: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F04812'
  }
})

Props

| Property | Description | Type | Default Value |
| open | Value toggling open and close of drawer | Boolean | false (closed) |
| drawerContent | Drawer contents | React.Component | Text component: Close |
| drawerPercentage | Value between 0 - 100, depicting the percentage of the screen the drawer will open | Integer | 45 |
| animationTime | Value depicting the time (in ms) the menu will slide open & close | Integer | 200 |
| overlay | Value toggling menu overlay or push. When overlay is true, the menu will overlay the background screen. When overlay is false, the menu will push the background screen to the side | Boolean | true |
| opacity | Value between 0-1 for the opacity fade of background when the menu is open | Float | 0.4 |

Coming soon

  • [x] iOS SafeArea support
  • [x] Custom width of drawer and sliding time
  • [x] Opacity fade of background screen

Download Details:

Author: pedreviljoen

GitHub: https://github.com/pedreviljoen/react-native-menu

#react-native #react #mobile-apps