├── README.md ├── package.json ├── public └── index.html └── src ├── BurgerIcon.js ├── Hello.js ├── Menu.js ├── index.css └── index.js /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # Create a fancy burger menu using reactjs-popup 4 | 5 | ### Demo : https://codesandbox.io/s/k2x7l5jy27 6 | ### Complete Demo with react-router : https://codesandbox.io/s/lpo41x20kq 7 | 8 | > This article is a step by step tutorial to create a simple burger menu for your website by using reactjs-popup 9 | 10 | ![](https://cdn-images-1.medium.com/max/1600/1*ttcLA5BrtUAXSBo6YfoQoA.gif) 11 | 12 | 13 | [Reactjs-popup](https://react-popup.netlify.com/) is a new and simple react popup component built using react fragments which is one of the new features that comes with react 16. And it can handle multiple use cases.By using this tiny react popup component you can create a Tooltips, Modals and Menus. 14 | 15 | By the end of this article you will be able to create your custom burger menu with reactjs-popup. 16 | 17 | > Ready!! Let’s get started. 18 | 19 | #### Step 1: Create the burger Icon component. 20 | 21 | We will start by building a burger icon component, 22 | 23 | As you see we pass the ‘open’ prop to the component so we can permute the icon class name as the preview example explains 24 | 25 | Burger icon css 26 | 27 | burger Icon state 28 | 29 | You can find some good examples for burger icon with animation [here](https://jonsuh.com/hamburgers/) 30 | 31 | #### Step 2: Customize CSS Menu 32 | 33 | Our menu will be a simple list, so let’s take the reactjs-popup home page menu and use it as an example. 34 | 35 | As you see this menu is a simple ul element, nothing special. 36 | 37 | #### Step 3:integrate all stuff with reactjs-popup 38 | 39 | All we need to do in this part is to import the reactjs-popup component and set the burger menu as a trigger prop for the popup component and the menu as the popup children. simple, is it ? magic !! 40 | 41 | Thanks to the ‘function as a children pattern’ the trigger can access to the popup state easily. we need also to pass props to the burger component like the following. 42 | 43 | Adding some custom css and this is the final result. 44 | 45 | final result 46 | 47 | If you read this article from your smartphone , you can see the burger button to launch the menu in [reactjs-popup home page.](https://react-popup.netlify.com/) 48 | 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Create cool burger menu using reactjs-popup", 3 | "version": "1.0.0", 4 | "description": "Create cool burger menu using reactjs-popup", 5 | "keywords": [], 6 | "homepage": "https://codesandbox.io/s/new", 7 | "main": "src/index.js", 8 | "dependencies": { 9 | "react": "16.2.0", 10 | "react-dom": "16.2.0", 11 | "react-scripts": "1.1.0", 12 | "reactjs-popup": "1.0.3" 13 | }, 14 | "devDependencies": {}, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/BurgerIcon.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default ({ open, ...props }) => ( 4 |
5 |
6 |
7 |
8 |
9 | ); 10 | -------------------------------------------------------------------------------- /src/Hello.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default ({ name }) =>

{name}!

; 4 | -------------------------------------------------------------------------------- /src/Menu.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default ({ close }) => ( 4 |
5 |
    6 |
  • Home
    • 7 |
  • Getting Started
    • 8 |
  • Component API
    • 9 |
  • Use Case - Tooltip
    • 10 |
  • Use Case - Modal
    • 11 |
  • Use Case - Menu
    • 12 |
  • Contributing
    • 13 |
14 |
15 | ); 16 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | .burger-menu, 2 | .burger-menu.open { 3 | display: inline-block; 4 | cursor: pointer; 5 | position: fixed; 6 | right: 20px; 7 | bottom: 40px; 8 | z-index: 9999; 9 | background: #fff; 10 | padding: 10px; 11 | border-radius: 25px; 12 | box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); 13 | } 14 | 15 | .burger-menu .bar1, 16 | .bar2, 17 | .bar3 { 18 | width: 25px; 19 | height: 3px; 20 | background-color: #333; 21 | margin: 4px 0; 22 | transition: 0.4s; 23 | } 24 | 25 | .burger-menu.open .bar1 { 26 | -webkit-transform: rotate(-45deg) translate(-4px, 4px); 27 | transform: rotate(-45deg) translate(-4px, 4px); 28 | } 29 | 30 | .burger-menu.open .bar2 { 31 | opacity: 0; 32 | } 33 | 34 | .burger-menu.open .bar3 { 35 | -webkit-transform: rotate(45deg) translate(-6px, -6px); 36 | transform: rotate(45deg) translate(-6px, -6px); 37 | } 38 | 39 | /* Menu */ 40 | 41 | .menu { 42 | width: 100%; 43 | display: block; 44 | text-align: center; 45 | padding: 0px; 46 | } 47 | .menu ul { 48 | position: relative; 49 | top: 0px; 50 | font-size: 24px; 51 | padding: 0px; 52 | } 53 | .menu li { 54 | list-style: outside none none; 55 | margin: 10px 0px; 56 | padding: 0; 57 | cursor: pointer; 58 | } 59 | .menu li:hover { 60 | color: #ff0000; 61 | } 62 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "react-dom"; 3 | import Popup from "reactjs-popup"; 4 | import Hello from "./Hello"; 5 | import BurgerIcon from "./BurgerIcon"; 6 | import Menu from "./Menu"; 7 | import "./index.css"; 8 | 9 | const styles = { 10 | fontFamily: "sans-serif", 11 | textAlign: "center", 12 | marginTop: "40px" 13 | }; 14 | const contentStyle = { 15 | background: "rgba(255,255,255,0", 16 | width: "80%", 17 | border: "none" 18 | }; 19 | 20 | const App = () => ( 21 |
22 | 23 | } 29 | > 30 | {close => } 31 | 32 |
33 | ); 34 | 35 | render(, document.getElementById("root")); 36 | --------------------------------------------------------------------------------