Skip to content

Latest commit

 

History

History
91 lines (66 loc) · 2.58 KB

README.md

File metadata and controls

91 lines (66 loc) · 2.58 KB
Raw

🍔 Miam Burger! - A toasty burger menu library.

What you'll need

  • A version of jQuery
  • Optional: a way to compile scss.

How to get set

  • Download the .zip archive

  • Add the miam-menu-burger.min.css stylesheet link into your head tag.

<link rel="stylesheet" href="css/miam-menu-burger.min.scss">
  • add the miam-menu-burger.min.js script file after jquery at the end of your body tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/miam-menu-burger.min.js"></script>
  • To create a burger menu copy this template in your html file.
  <button class="burger-menu">
    <span class="barre barre__top"></span>
    <span class="barre barre__middle"></span>
    <span class="barre barre__bottom"></span>
  </button>

Make the burger your own!

Change the face of your menu burger

You can easily customise your menu with a class attribute.

  <button class="burger-menu align-right">
    <span class="barre barre__top"></span>
    <span class="barre barre__middle"></span>
    <span class="barre barre__bottom"></span>
  </button>

There is 5 different faces.

  • classic: burger-menu
  • various length right aligned: align-right
  • various length left aligned: align-left
  • dot menu left aligned: dotted-left
  • dot menu right aligned: dotted-right

Change the animation of your menu burger

Change the animation with a data attribute

  <button class="burger-menu align-right" data-menu-animation="transition-basic">
    <span class="barre barre__top"></span>
    <span class="barre barre__middle"></span>
    <span class="barre barre__bottom"></span>
  </button>

There is 7 to choose from.

  • transition-basic
  • transition-basic2
  • transition-arrow
  • transition-arrow-left
  • transition-arrow-alt
  • transition-arrow-right-alt
  • transition-arrow-down-alt

Get the full power of the library with scss

You have to navigate through the file src/sass/helpers/_variables.scss and edit the sass variables.

Variables Definition
$button-background-color background color of the menu
$bars-color color of the bars
$button-border-color border color of the menu
$bars-height bars height
$bars-padding padding between the bars