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.1.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 |
|---|---|---|---|
| theme | string object | full | Theme string (name)/object to personalize specific details of MenuChef theme |
| 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.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 |
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.
.MenuChefOpen[data-scheme].is-active .hamburger-inner, .MenuChefOpen[data-scheme].is-active .hamburger-inner::before, .MenuChefOpen[data-scheme].is-active .hamburger-inner::after {
background-color: #A0A1A5;
background-color: var(--MenuChef-scheme-color, #A0A1A5);
}
.MenuChef[data-scheme] {
background-color: #28292E;
background-color: var(--MenuChef-scheme-bgcolor, #28292E);
}
.MenuChef[data-scheme] .MenuChef-links-link {
color: #A0A1A5;
color: var(--MenuChef-scheme-color, #A0A1A5);
}
.MenuChef[data-scheme] .MenuChef-links-link:hover {
color: #86878c;
color: var(--MenuChef-scheme-color-hover, #86878c);
}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 () {}
});