├── .gitignore ├── README.md ├── example ├── index.html └── src │ └── main.tsx ├── index.js ├── package.json ├── scripts └── gh-pages ├── src ├── GooeyNavItem.tsx ├── GooeySvg.tsx ├── Item.tsx ├── Menu.tsx ├── MenuOpenButton.tsx ├── index.ts └── style │ ├── ball.ts │ ├── goo.ts │ └── menuItem.ts ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | *.swp 3 | /dist/ 4 | /.cache 5 | /.rpt2_cache 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Gooey Navigation Menu 2 | 3 | based on [Lucas Bebber's Gooey Menu](http://codepen.io/lbebber/pen/rawQKR) 4 | 5 | I've updated the implementation to use TypeScript and modern-ish React 6 | 7 | ## Installation 8 | 9 | ```bash 10 | npm install --save react-gooey-nav 11 | ``` 12 | 13 | ## Usage 14 | 15 | ```jsx 16 | import { Menu, Item } from "react-gooey-nav"; 17 | 18 | var nav = ( 19 |
28 | ); 29 | ``` 30 | 31 | ## Development 32 | 33 | Run the example with: 34 | 35 | ```bash 36 | npm start 37 | ``` 38 | 39 | ## Help me make this thing better! 40 | 41 | :octocat: 42 | 43 | Thanks Lucas! 44 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |