Simple Menu with symbols/legend

KLTRON · July 20, 2016, 5:55am

Help!!

I’m having no luck with getting collections/dynamic lists to do what I want. I have to design a menu with over 50 items on each web page with a symbol beside it to represent if it’s spicy/vegetarian/glutenfree. I made a photoshop version to illustrate what I’m trying to achieve.

https://s25.postimg.org/4xgisa8f3/Screen_Shot_2016_07_20_at_1_41_59_AM.png

How would I go about doing this efficiently? (I don’t need it to expand for more details, I simply need to list it with the ability to stylize nicely and add a symbol accordingly beside selected items).

Preview link > Lunch: https://preview.webflow.com/preview/qings-cuisine?preview=3d05ebe9e2fe6e6d6be5f7d4c8886e0f

Thanks in advance!

vincent · July 20, 2016, 7:16am

Hi.

Instead of making a big paragraph for each menu section, make a paragraph for each line. So they’ll all have the same class.

Now define three extra classes, one for spicy, one for vege and one for spicy+vege.

Now for each class add your symbol as a background image, stuck to the left, and add a left padding to the original p class for the text to let room fr icons.

https://v.usetapes.com/5um0iCUGTk

KLTRON · July 22, 2016, 6:45pm

Thanks, I think I’m starting to understand Webflow. However, I’m still having trouble with designing/laying out the menu. I have to not only put symbols beside each item but a price as well for 100+ items.

See list of Menu items: https://www.evernote.com/shard/s390/sh/92fdfb66-be2f-4d58-98a0-c543970e89b8/f880603d4a274e50c0a6f7d1845d3acb/res/231e971f-d950-4710-8d74-feeaeead1b95/Qing's%20Cuisine%20-%20Chinese%20Menu.pdf

See Preview link > Chinese: https://preview.webflow.com/preview/qings-cuisine?preview=3d05ebe9e2fe6e6d6be5f7d4c8886e0f1 (I’ve started but feeling overwhelmed with the idea of having to do that for over 100 items). Please help!! Surely there’s a much more effective way than simply starting a new paragraph for each item?

Waldo · August 1, 2019, 3:19am

Hi @KLTRON to add those background images, try adding a Combo Class with a background image associated with that background image as shown in this gif below:

For the prices, try adding the price and then wrapping it with an inline style? Please let me know if this is helpful or if you have any other questions

KLTRON · August 4, 2016, 1:32am

@Waldo Okay. I see that. However, I need to see how you do the pricing wrap around in the text. I’m not sure how to and also, I have to do this for over 100 items and I want to know if there is a more efficient way of doing so.

KLTRON · August 1, 2019, 3:19am

@Waldo Hi, I’m having trouble lining up my menu items in a tight grid on web (Chinese & Thai pages)? Is there a better way to list my 100+ items?

https://preview.webflow.com/preview/qings-cuisine?preview=3d05ebe9e2fe6e6d6be5f7d4c8886e0f

How do I avoid a vertical shift when I condense the column? This seems to happen across all responsive states as well.

sabanna · September 2, 2016, 12:42am

Hi, @KLTRON

I would suggest using flexbox settings for adjusting columns “position” and size, instead of just padding. Here I made a sceencast of how I would do that:

Cheers,
Anna

KLTRON · September 3, 2016, 12:24am

Hi @sabanna,

Thanks for the video, however, after replicating your steps, it appears my hierarchy is off. Can you show me your hierarchy in navigator? Our screens/items don’t seem to match up.

sabanna · September 3, 2016, 2:55pm

I was working on YOUR site in read-only mode, so I didn’t change the hierarchy.

But I noticed the difference between 1st row and 2nd row. Only in the 1st row all signs (1st column) were wrapped into div. Now I see that same structure in the 2nd row too

Regards,
Anna

KLTRON · September 8, 2016, 1:54am

Hi @sabanna, in regards to your reply, which hierarchy should I use? The one with the additional div block or the one without it?

Also, when I followed your steps and changed the width to 100px of the first column, part of the symbols cut off. Could you please check what I did wrong so I can retrace the steps and correct them? Thanks in advance!

sabanna · September 8, 2016, 3:08am

Hi, @KLTRON

I would use wrapper div, it will let you easier control the symbols columns.
Also, the reason of the problem with “cutting” is that you set paragraphs (with symbols) to 100px instead of 100% as I did. The wrapper div should be 100% too. And only column width set in pixels

Cheers,
Anna

KLTRON · September 8, 2016, 9:33pm

Hi @sabanna,

Thanks for the reply. I changed the boxes to 100% instead of px and kept only the column width to px like you said. However, everything still isn’t lining up, vertically and horizontally.

https://preview.webflow.com/preview/qings-cuisine?preview=3d05ebe9e2fe6e6d6be5f7d4c8886e0f

Could you please take a look? I would appreciate if you could help troubleshoot where the problem is so I can move forward with this project. Thanks in advance!

sabanna · September 10, 2016, 6:35pm

Here is step-by-step video. There are still some paragraphs having width 100px (should be 100%) and also, you add too many “space” characters that make paragraphs break in 1 lines when width is too small:

system · November 10, 2016, 3:41pm

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.