Our
Flavors
Left
Recipe
Select seasoning
Method of preparation
Center
Recipe
Select seasoning
Right
Recipe
Select seasoning
Method of preparation
Preheating
the oven
MenuChef helps you to create hamburgers' menu easily even without knowing how to cook. You just need call the MenuChef.js in your page and initiate like the examples above. It's light (approximately 55kb, 13kb gzipped) and you don't need change the HTML code of the menu original. You can personalize it by CSS or by options.
You can download the latest version of MenuChef in Github or can use the unpkg CDN
<script src="//unpkg.com/menuchef@1.3.0"></script>Nutritional
Table
Constructor
| Variable | Type | Default | Description |
|---|---|---|---|
| ingredients | string | -- | HTML selector for the anchor tags: eg: “.menu a” or “.menu-link” if ”.menu-link” it’s a NODE Collection of links |
| options | object | options | Overwrite the default options of MenuChef |
Options
| Variable | Type | Default | Description |
|---|---|---|---|
| v1.2.0 parent | string | body | Parent element where MenuChef'll placed |
| theme | string object | full | Theme string (name)/object to personalize specific details of MenuChef theme |
| v1.3.0 preventScroll | boolean | false | Prevent page scrolling while menu is open |
| scheme | string | black | Default schemes colors of MenuChef. You can modify by yourself Options: black, yellow, red, green, blue |
| closeOnClick | boolean | true | Close MenuChef when it’s clicked in a link |
| closeOnClickOutside | boolean | true | Close MenuChef when it’s clicked outside of kitchen (the menu it self) |
| v1.2.0 button | string | MenuChef's hamburger button | HTML of MenuChef's button. You can pass your own button HTML like <i class="myicon"></i>.
Remember: The MenuChef's button is the same for open and for close (toggle). You can control appearence of button with CSS. The button container receives the class is-active when MenuChef is open. |
| v1.1.0 classes | object | -- | Classes is a manager of classes in links passed to MenuChef. It reveives 3 properties. All properties receives ONLY array of classes.
exclude: remove a class or an array of classes
only: remove ALL classes expect this one or an array of classes
include: add a class or an array of classes
ps: The order of hierarchy is respected. exclude > only > include |
| hamburger | string | boring | This option is powered by awesome lib Hamburgers, by Jonathan Sug. The operation can be seen at lib demo site Options: 3dx, 3dx-r, 3dy, 3dy-r, arrow, arrow-r, arrowalt, arrowalt-r, boring, collapse, collapse-r, elastic, elastic-r, emphatic, emphatic-r, slider, slider-r, spin, spin-r, spring, spring-r, stand, stand-r, squeeze, vortex, vortex-r |
| bodyClassOpen | string | -- | Append a class in when the menu is opened |
| kitchenClass | string | -- | Append a class in MenuChef wrapper ps. Kitchen is the wrapper of MenuChef, where all the ingredients are cooked |
| kitchenOpenClass | string | -- | Append a class in MenuChef when the same is opened |
| onOpen | function | -- | Callback function that's called when MenuChef is open |
| onClose | function | -- | Callback function that's called when MenuChef is close |
| onClick | function | -- | Callback function that's called when a link in MenuChef is clicked |
| v1.2.0 onReady | function | -- | Callback function that's called when MenuChef is ready and loaded |
Theme Options
Methods
Public Variables
| Variable | Type | Default | Description |
|---|---|---|---|
| MenuChef.version | string | version | Return MenuChef version number |
| MenuChef.isOpen | boolean | null | Return null if MenuChef was never opened, true/>false
|
Theming Vars
MenuChef was created with CSS variables, so it's very easy change some elements of the interface just changing a couple of variables, with sort, without change the CSS in fact. The support of CSS variables isn't complete yet in some browsers, so if you want support those browsers, you can overwrite CSS theme default below. If you choose overwrite the CSS theme, don't forget to put !important because the MenuChef's style is injected by JS, so you CSS can't overwrite by cascade.
/* open hamburger button */
.MenuChefOpen .hamburger-inner,
.MenuChefOpen .hamburger-inner::before,
.MenuChefOpen .hamburger-inner::after {
background-color: #A0A1A5 !important; /* fallback */
background-color: var(--MenuChef-scheme-color, #A0A1A5) !important; /* try use CSS var with fallback */
}
/* close hamburger button */
.MenuChefOpen.is-active .hamburger-inner,
.MenuChefOpen.is-active .hamburger-inner::before,
.MenuChefOpen.is-active .hamburger-inner::after {
background-color: #28292E !important; /* fallback */
background-color: var(--MenuChef-scheme-color, #28292E) !important; /* try use CSS var with fallback */
}
/* Menuchef kitchen: link's area */
.MenuChef {
background-color: #28292E !important; /* fallback */
background-color: var(--MenuChef-scheme-bgcolor, #28292E) !important; /* try use CSS var with fallback */
}
/* Menuchef links */
.MenuChef .MenuChef-links-link {
color: #A0A1A5 !important; /* fallback */
color: var(--MenuChef-scheme-color, #A0A1A5) !important; /* try use CSS var with fallback */
}
/* Menuchef links hover */
.MenuChef .MenuChef-links-link:hover {
color: #86878c !important; /* fallback */
color: var(--MenuChef-scheme-color-hover, #86878c) !important; /* try use CSS var with fallback */
}Others Vars
Default Options
Example of all MenuChef default options
new MenuChef('.old-menu a', {
theme: {
theme: 'full',
effectOnOpen: '',
direction: '',
pageEffect: ''
},
scheme: 'black',
closeOnClick: true,
closeOnClickOutside: true,
classes: {
exclude: [],
only: [],
include: []
},
hamburger: 'boring',
bodyClassOpen: '',
kitchenClass: '',
kitchenOpenClass: '',
onOpen: function () {},
onClose: function () {},
onClick: function () {},
onReady: function () {}
});