1. Home
  2. Marco HTML
  3. Food menu
  4. Food menu structure

Food menu structure

Food menu is structured with menu filters and food menu items with description and price. Also you can add dish image and food menu category (appear on hover effect and after scroll). Each food menu is made up the same “modules” with different configurations. You can modify this appearance in a couple of ways by adding classes to desired elements.


Food menu filters

Add list of category filters and replace hash to category page link. Change position for filters to appear, simply replace class from “filters-right” to “filters-left” or “filters-center”.
 

...
   <div class="food-menu-filters small-12 columns animate-text">
      <ul class="food-menu-filters-list filters-right">
         <li>
            <a href="category page url" class="active-filter">All</a>
         </li>
         <li>
            <a href="category page url" class="active-filter">CATEGORY NAME</a>
         </li>
         ...
      </ul>
   </div>
...

Food menu category

Food menu category with description and category image. If you want to show only category name, remove other elements in markup.
 

...
   <div class="food-menu-category">
      <div class="food-menu-cat-img"> <-- to show category image
         <div class="food-menu-cat-header">
            <h4>Category name</h4>
            <div class="food-menu-subtitle">Category description</div>
         </div>
         <div class="food-menu-featured-img">
            <img src="Image url"/>
         </div>
      </div>
   </div>
...

Food menu item

Food menu item with dish name, price and dish description. All of menu item elements may be featured or have separator between title with price and description, simply add desired classes listed below. By default the food menu item has separator.
 

Food menu item classes:

 

food-menu-featured
whole menu item will be featured.
food-menu-featured-price
only menu item price will be featured
food-menu-featured-title
only dish name will be featured
food-menu-no-separator
menu item without separator
food-menu-border-title
menu item name with border *
food-menu-border-price
menu item price with border *

* add class “food-menu-no-separator”


Food menu item structure

To add food menu image, use a data attribute “data-img” and insert unique ID to markup presented below.
 

...
   FOOD MENU CATEGORY
   <div class="food-menu-category">
      <div class="food-menu-cat-img"> <-- to show food menu images
         ...
         <div class="food-menu-featured-img">
            <img src="<strong style="color: #3598db" data-id="unique ID">Image url"/>
         </div>
      </div>
   </div>

   FOOD MENU ITEM
   <div class="food-menu-item" data-img="unique ID">
      <div class="food-menu-item-header">
         <div class="food-menu-title">Dish name</div>
         <div class="food-menu-price">Price</div>
         <div class="food-menu-icon"></div> <-- feature for food-menu-item with image
      </div>
      <div class="food-menu-desc">Description</div>
   </div>
...
Was this article helpful to you? Yes No 1