Add food menu (text format)

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I am wanting to add a simple text menu to my website.

Ideally something like this website's menu: http://www.spiceclubblantyre.com/menu/

I would put it ALL in a text widged but there is just too much on the menu and there would be too much scrolling up and down to get to the required section of the menu.

I would really appreciate any help!
Photo of Qasim

Qasim

  • 4 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Qasim

Yola Style Templates offer you horizontal and vertical menu designs, most of them horizontal and a handful of vertical ones.

Your navigation menu shouldn't be too packed, but only contain the links to the most important main pages of your website because it could otherwise be quite confusing for your visitors. If you'd still like to add a lot of links, a vertical menu may be your best bet.

Also, you can add multiple submenus to each main menu link of your navigation. If you choose a Premium Style, it'll be a secondary navigation layout, and when using a Free or Recommended Style, your subpages will display in Flyover Menus.

I hope this helps with making the right decision for your needs.
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
I'm just re-reading your request, and I think my post isn't the answer to your question, I'm sorry.

From what I understand, you could maybe add a list of clickable food groups or something at the beginning. When clicking on one of them, you could have the page jump to the respective section of the page with the details (anchor links). Please find more information in our tutorial Creating anchor links.

Another option would be to add an expand/collapse feature. This would require some javascript and general coding knowledge/experience. To use this, please refer to this thread.
Photo of Qasim

Qasim

  • 4 Posts
  • 0 Reply Likes
Ideally I'd like something like this:

http://www.bombayspicetakeaway.com/me...

The menu is easy to navigate.

Any ideas?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Qasim

That's easy to achieve. The designer of that website just created a custom vertical navigation and links to separate pages from there.

So what you need to do is create such a vertical navigation with your meal headings as menu links. Then you create each page with the detailed menu for the respective meal. On each of these pages, you will need the custom navigation, so you can make use of the "Save Page As" option when creating a new page with the detailed menu.

To create the custom menu, you can use Text Widgets that you place below each other and link from the navigation items to the respective page. Use the Column Divider Widget or a two-column layout to separate your custom navigation from the menu details.
Photo of Qasim

Qasim

  • 4 Posts
  • 0 Reply Likes
Thanks for the rapid replies Stefan.

I am not sure how to add a vertical navigation on the menu page :/

Any help please?
Photo of Richard Scott

Richard Scott

  • 3 Posts
  • 0 Reply Likes
Qasim hi,
I think possibly the easiest option would be to move the menu item to the bottom of your page item list on the left so it looks like this:
Info
Location
About Us
Contact Us
Menu

And now make each menu page Pakoras, Sauces, Starters, Tandoori and so on a sub page of the menu page this way when a customer move the cursor over the menu item the other items will show.

If a customer does click on the menu item link make the menu page a list of menu items linked to each menu page, Pakoras, Sauces, Starters, Tandoori and so, I think this would keep it easy to navigate and use.

It took me a while to find the chicken biryani so maybe the ability to search would help if its possible, I’m sure the Yola staff can answer that.

I like your site very, very much, it looks much better than the example you showed us.

R
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Qasim

No problem, let me give you a step-by-step guide. So what you need to know is that you will create a separate page for each of your different menus. These pages (except for the first menu page) need to be outside your standard navigation displaying at the top of your site because you will make these pages accessible from a custom vertical menu that you create manually.

Here are the detailed steps:
  1. First you need to know how many different menus you'd like to display. Let's say you have three, Menu 1, Menu 2, and Menu 3. For each of them you want to display details, so Menu Details 1, Menu Details 2, Menu Details 3.

  2. Now create the first page, i.e. the page for Menu 1. Click on the "Page" tab and then on the little green X on the left hand side to start the Page Creation wizard.

  3. A dialogue box will open. Enter the name of the page, e.g. "Menus". This means that your "Menus" page will be your "Menu 1" page at the same time because you want your visitors to access your menus page via the standard navigation and then be able click through to the other menus using the custom vertical navigation you'll create.

  4. Leave the "Display in navigation" checkbox checked this time.

  5. On your new "Menus" page, start creating your custom vertical menu navigation. Drag and drop a Column Divider Widget to the page and make the left column thinner than the right one by moving the middle line accordingly.

  6. Drag and drop a Text Widget into the left column. Enter the name of the first menu, e.g. "Menu 1".

  7. Drag and drop another Text Widget into the left column and place it below the first one. Enter "Menu 2". Do the same for "Menu 3".

  8. Drag and drop a Text Widget into the right column. Add the details for Menu 1. You've now created the page for Menu 1 which is the "Menus" page clickable from the main navigation at the same time.

  9. Now create your Menu 2 page which will not be available from the standard navigation, but only from your custom vertical navigation. The most convenient way to do this is to just copy the Menu 1 page you've just created: Click on the "Page" tab and then on "Save Page As".

  10. The dialogue box opens again. Change the page name to "Menu 2".

  11. Important: Now you need to uncheck the "Display in navigation" checkbox because you don't want the Menu 2 page display in your standard navigation.

  12. Your new page will be a duplicate of the "Menu 1" page, but its name is "Menu 2". Now edit the menu details according to Menu 2 and save the page. You've created your Menu 2 page!

  13. Repeat from step 9 to create your Menu 3 page.

  14. Last steps: Link your pages to each other manually. Go back to your "Menus" page. To do this, click on the "Page" tab. In the top-left corner you can see a drop down menu with a list of your pages. Choose the "Menus" page to open it.

  15. Click into the Text Widget of the left-hand side column where you entered "Menu 1".

  16. Highlight "Menu 1" and click on the Link icon in your Text Editing Toolbar above.

  17. Choose the "Menus" page from the first option and click "OK".

  18. Back in Sitebuilder, highlight "Menu 2" of the following Text Widget in the same column. Make it a link as well, and choose the "Menu 2" page in the Link Editor this time.

  19. Repeat these steps for "Menu 3".

  20. Once done, go to your Menu 2 page and repeat the above steps. Afterwards, proceed to your Menu 3 page and repeat the same steps.

This is the way you create a manual custom navigation.

If you'd like to spice up your custom vertical menu, you can drag and drop the Custom Panel Widget into the left column and drag the Text Widgets onto it.

Also: Instead of Text Widgets of the left-hand side column, you could also work with Button Widgets to create your custom vertical navigation. The Button Widget can be formatted from the Style Designer. I hope this helps! ;-)
Photo of Qasim

Qasim

  • 4 Posts
  • 0 Reply Likes
Finally done :)

http://www.curryclubbroxburn.co.uk/me...

I plan to change the side links of each menu to buttons, but other than going through every single page and changing every menu to a button, is there any easier way to do it?

Is there no way to put the vertical menu into a column and save the column and insert it into each page to replace the current basic "text links" in the current vertical menu?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello Qasim

Thank you for sharing this! Your hard work is amazing, and you've done well - congrats!

I'm afraid there's currently no convenient copy-over feature for widgets or menus. So you'd need to go into each page and replace the links by buttons. Providing a copy/paste feature for widgets is on our agenda, however, I can't make any promises as yet. So until then it'll require some dedicated work to achieve this.

I hope you will still enjoy it as the Sitebuilder makes it easy for you.