Interactive, Easy Menu for Restaurant Website

If you would like to add a creative menu to your restaurant website but do not have a lot of JS knowledge, here is a helpful guide!

Watch the menu in action.

What is the most important part of any restaurant website? The menu of course! I am going to walk through the steps of creating an easy, interactive, and creative menu for any restaurant website.

Design

What is the purpose of a menu? To help users gather information about the food that the restaurant serves. Important information that users are looking for includes the item name, ingredients, and price. The menu design should align with the overall website theme and portray the same vibe as the rest of the website. This however, not should be done at the expense of the user’s ability to get the information they need in a timely and efficient manner. The restaurant business is a competitive one and if it is hard for a user to gather information about the food then they can easily move on to a different place. With all of this in mind I crafted the following simple design:

The design for this menu.

Important design elements in this menu design:

1. Space- there is a good amount of room between items to reduce the cognitive load of the user.
2. Typography- for this menu design I used the typeface pairs Lato and Lora. Each of these typefaces are very legible and come in a variety of styles and weights. Lora is a serif font while Lato is a sans-serif font. Their pairing is very versatile and provide a more elegant or more casual vibe to the design.
3. Hierarchy- The font sizes and weights provide a clear hierarchy of the information. The users eyes are directed right to the menu items and categories.
4. Color- This is where any restaurant can apply their theme colors to the menu. However it is important that all colors have a contrast ratio that is accessible for all users. All of the font colors used in this design have a contrast ratio of AA or AAA. According to Accessibility for Web Design, meaningful text should have a contrast ratio of 4.5:1 or higher and large or bold text should have a contrast ratio of 3:1. All of my colors have a contrast ratio of 5.7 and higher. This is an important and easy thing to accomplish. While I was creating this design, I fell in love with the color #da6c80 which is a rose color. I loved how elegant and soft it was. However, it had a contrast ratio of 4.06 against the white page. A simple change to #c54d63 meant keeping the the soft rose color I loved but brought the contrast ratio up to 5.73. I could hardly tell the difference between the colors but for someone with a vision impairment, this could be a world of difference. Remember, it is not about you- it is about the users.
5. Important Information- I decided to add the subscripts and key indicating extra dietary restrictions for each menu item. This was a design choice made based on recent trends in consumer eating habits for wellness and lifestyle.

With the design laid out, let’s get started building the menu on your website.

Files you Need

For this simple menu, you will need:

1. An html file
2. A main css file
3. The jquery_v3.3.1.min.js file
4. A main.js file

You do not have to use the compressed version of the jQuery file but it sure does save a lot of space!

Getting Started

I used Atom for this particular project but any text editor will do just fine.

Step 1: Start by creating an html file, a css folder with your main css file in it, and a js folder with your js files inside of it. This is what mine looks like:

How my files are organized.

Step 2: Inside of your menu.html file, link to your style sheets in the head of your html and the js files at the end before the closing body tag. I try to use comments to keep things organized. You will also notice in the images below that I imported the fonts “Lato” and “Lora” google fonts.

Where our css files and js files should be linked to in our html.

Step 3: For this menu to work, we need to add some JQuery. Essentially, the way this menu works is you click on a menu navigation item and the javascript finds the element you clicked on and adds the class “color-primary” which changes it to our primary color. Any nav item that is not clicked will no longer have this class. The menu items associated with that menu nav option will then hide and the new menu items associated with that menu nav link will fade in. In order for this to work, we need to add the following to our main.js file:

jQuery that we need to put in our main. js file.

Step 4: Let’s break down the html. First we will open our main menu section and add the filter section.

The menu nav.

You will notice that the .menu-link-js that we see in our javascript above is located in each of the li items in the menu-nav. Each of the li items is anchored to a specific id so that the correct unordered list of menu items is displayed when that nav item is clicked.

To get the nav centered I used flex and for it to be responsive for smaller screen sizes, I set a flex-wrap. To create an underline underneath the selected nav item I set a bottom border when the class “color-primary” as also attached to “menu-nav_link”.

CSS for menu nav:

.menu-nav{
 display:flex;
 justify-content: center;
 margin-bottom: 5em;
 flex-wrap: wrap;
}
.menu-nav li {
 text-transform: uppercase;
 margin-right: 4em;
 margin-left: 4em;
 margin-top: 3em;
 font-size: 18px;
 font-family: ‘Lora’, sans-serif;
 font-weight: 700;
}
.menu-nav__link.color-primary {
 padding-bottom: 2px;
 border-bottom: 2px solid #c54d63;
}

In order to have the menu centered on the screen and leave more space on each side, I set the menu to:

.menu {
 max-width: 80%;
 width: 80%;
 margin: auto; }

Step 5: We next create our first menu section or “menu-tab.” This will be linked to the first nav li item- bread.

The opening of the “bread” menu-tab and examples of menu-list-item format.

You will notice that in the first line id="bread”. This important for this line in our nav items to work:

<li><a href=”#bread” class=”menu-nav__link color-primary menu-link-js”>Bread</a></li>

Lines 27–43 are two examples of menu list items: Seven Oat Bread and Rye. In each list item there is a title and a content div that contains the item description, dots, and price.

You can use this format for the list item to make as many list items as your restaurant needs. When starting a new “menu-tab” you can follow this same format.

This is the next menu tab div in my html. Before we looked at Bread and now we are looking at Pastries.

I did not show the closing tags for these menu-tab divs or the unordered lists but make sure you close them!

In order for only one of the menu-tab divs to show at a time you will need the javascript we already set up and you will need the following CSS:

.menu-tab {
 display: none;
 margin: 4em 0;
}
.menu-tab:first-of-type {
 display: block;
}

In order for your menu items to appear in a two column set up, you will need the following CSS:

.menu-tab > div {
 display: flex;
}
.content{
 display: flex;
}

However, this two column set up does not work in smaller screen sizes so you will need the following media query which will wrap the items so that they will all be in one column:

@media(max-width: 850px){
 .menu-tab > div {
 display: flex;
 flex-wrap: wrap;
 }
}

This is how I styled the menu item content but you can change it for the style of your menu:

.menu-list-item {
 margin-bottom: 1.5em;
}
.menu-list-item__title {
 font-weight: 500;
 font-size: 20px;
 font-family: ‘Lora’, serif;
}
.menu-list-item sup {
 color: #575757;
 margin-left: 2px;
 font-family: “Lato”;
 font-size: 12px;
 font-weight: 400;
}
.menu-list-item__desc {
 color: #575757;
 max-width: 50%;
 font-size: 14px;
 font-style: italic;
}
.menu-list-item__desc,
.menu-list-item__price {
 flex: 1 0 auto; /*This flex property helps the item description, dots, and price span sit in a nicer way together.*/
 font-family: ‘Lato’, sans-serif;
}

In order to make the dots between the description and price, you will need to define the following for the before pseudo-selector:

.menu-list-item__dots::before {
 display: block;
 overflow: hidden;
 content: “……………………………………………………………………………………..”;
 height: 2em;
 padding: 0 6px;
 word-break: break-word;
 float: right;
}

And finally, this is how I styled the diet key at the bottom. Again, this can be changed for your menu:

.diet-options{
 text-align: center;
 font-size: 14px;
 color: #575757;
 font-weight: 500;
 font-family: ‘Lato’, sans-serif;
}

(helpful hint: Everything spacing out in a weird way? Try adding the following at the top of your main.css…)

*{
 margin: 0;
 padding: 0;
}

I hope this tutorial has been helpful and that you can use it to make your restaurant website or any website more interactive.