Skip to content

dobkir/reactjs-burger-menu

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Burger menu template logo icon Simple template of the burger menu for ReactJS Burger menu template logo icon

Contributors  Forks  Stargazers  Issues  MIT License  Repository size  LinkedIn

Template preview

 The trailer of the Burger menu template 

Template on mobile devices preview

 The trailer of the Burger menu template on mobile devices

Built With

  • Framework
    React

  • Languages
    Languages

  • Main language
    Main language

  • Others
    CSS3
    HTML5

  • IDE
    VSCode
    VSCode

Work description

The burger menu opens when you click on the corresponding button. Scrolling of the page is blocked when the menu is opened. Also, the content of a page will be blurred. The menu closes when you click on the close button (a cross to the left of the menu title), or the page area around the menu.

Running on your local machine

To get a local copy up and running follow these simple steps.

  • Git
sudo apt-get install git
  1. Clone this repository on local machine:
git clone https://github.com/dobkir/reactjs-burger-menu.git
  1. Install Node Package Manager on the directory with the cloning repository
npm install
  1. Run this template on your local machine
npm start

or

yarn start

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Gmail Badge

Project Link: https://github.com/dobkir/reactjs-burger-menu

Acknowledgments

$ yarn add body-scroll-lock

or

$ npm install body-scroll-lock
  • Materialize icons Materialize storage of icons has included 932 Material Design Icons courtesy of Google.
    Link to Materialize icons storage: https://materializecss.com/icons.html
    o be able to use these icons, you must include this line in the <head> portion of your HTML code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

To use these icons, use the material-icons class on an element and provide the ligature as the text content

<i class="material-icons">add</i>