Ross P.

User

Can anyone help with setting up a responsive food menu on a page please?

Author: Ross P.

Visited 1955, Followers 1, Shared 0

Tags: #responsivefoodmenu,website x5 pro 2022.2

Hello

I have attached an image of a menu for a cafe that I would like to include in a website I have been asked to do.

I would like it to be responsive and set out the same as the image.

Your help will be appreciated.

Cheers

Posted on the 08/20/2022 22:45:07

14 ANSWERS - 4 USEFUL - 1 CORRECT

Daniel W.

User

I don't know if this works directly with WebSite X5, but with HTML and CSS.

It's called Dot leaders, see instructions

>> https://www.w3.org/Style/Examples/007/leaders.en.html (english)

>> https://www.w3.org/Style/Examples/007/leaders.de.html (german (deutsch))

Posted on the 08/21/2022 00:10:11 from Daniel W.

Esahc ..

Moderator

Daniel has provided links to the best way, but if you want a quick solution without coding you could do a screen grab of your menu as displayed, save the menu portion as a jpeg and place it as an image. On a mobile it may be smallish, but the user could zoom to read it.

Posted on the 08/21/2022 01:36:48 from Esahc ..

Daniel W.

User

It didn't work with the above code, hence the 2nd code from here

>> https://stackoverflow.com/questions/2508732/create-leading-dots-in-css

Here the tested code for website X5, see

>> https://findelinks.de/dot-leaders.html (Text in german)

Posted on the 08/21/2022 02:17:48 from Daniel W.

Daniel W.

User

Here is a smartphone preview of the restaurant menu in WebSite X5 with the tested code in the link above.

Posted on the 08/21/2022 02:31:24 from Daniel W.

Ross P.

User
Author

Daniel

This looks brilliant, but have not done a lot of coding so hope you don't minf me being a bit dumb here but - does this part go in the "before closing head properties" on the page:

And then this go in the HTML Code section on the page where I want the menu to go:

<div>
<ul class="toc">
<li> Salmon Ravioli 7,95
Euro </li>
<li> Frittierte Calamari 9,95 Euro </li>
<li> Almond Garnelen Cocktail 7,95 Euro </li>
<li> Bruschetta 5,25
Euro </li>
<li> Margherita Pizza 10,95 Euro </li>
</ul>
</div>

If so where and how would I put a menu item with description like this please,

BEEF & BACON BURGER..................................$26.00
120gm Beef Pattie with Bacon, Cheese, Pickles, Slaw & Our Special Burger Sauce. Served with Triple Cooked Chips & Tomato Sauce - NF

Thank you for being so helpful and I am really appreciating your help. You can view the site I am making at this address to get an idea of what I am on about: http://passengers.pagans.nz/

Kind regards

Ross

Posted on the 08/21/2022 03:02:02 from Ross P.

Daniel W.

User

I have revised my linked page >> https://findelinks.de/dot-leaders.html (Press F5)

In WebSite X5, this code on my website is placed in an HTML code object at point 4 pages.

In the inserted code, enter the names of the dishes and the price in these areas. If necessary, copy the small snippets of code for dish and price and just paste them underneath.

---------------

<li>
Salmon Ravioli 7,95 Euro
</li>

---------------

In the inserted code, enter the names of the dishes and the price (see bold text above). If necessary, copy the small snippets of code (see above) for dish and price and just paste them underneath.

--------


<li>
Spaghetti alla carbonara 14,95 Euro
</li>


<li>
Lasagne 12,95 Euro
</li>

--------

Posted on the 08/21/2022 04:33:39 from Daniel W.

Daniel W.

User

Perhaps Incomedia will provide an additional object for such menus. There is most likely a need for this type of menu on restaurant websites.

If Incomedia does not offer such an additional object or only for money, then you can also create this type of menu relatively easily with the code from my website.

Posted on the 08/21/2022 05:00:53 from Daniel W.

Daniel W.

User

If the menu should look exactly like the screenshot, i.e. text lines with dots and text lines without dots and with subheadings, then a CSS professional has to do it.

My knowledge of CSS is minimal and only good enough for small changes to existing CSS code.

Posted on the 08/21/2022 07:09:23 from Daniel W.

John S.

User

Try this:

.toc li .title {
order: 1;
font-weight: bold;
}

.toc li .chapter {
order: 3;
}

.toc li::after {
background-image: radial-gradient(circle, currentcolor 1px, transparent 1.5px);
background-position: bottom;
background-size: 1ex 4.5px;
background-repeat: space no-repeat;
content: "";
flex-grow: 1;
height: 1em;
order: 2;
}

p {
text-align: left;
color:grey;
}
</style>

<li> CAPRICCIOSA 7,95 Euro</li>
Tomato sauce, mozzarella, Prosciutto Cotto cooked ham, mushrooms & black olives 
<li> HAWAIIAN 9,95 Euro</li>
Tomato sauce, mozzarella, Prosciutto Cotto cooked ham & Pineapple 
<li> HOT & SPICY 7,95 Euro</li>
Pepperoni, rødløg, jalapeños, peberfrugt, chili flager 
<li> CHICKEN KEBAB 5,25 Euro</li>
Rødløg, kylling kebab, hvidløgsdressing 
<li> BBQ MIXED GRILL 10,95 Euro</li>
BBQ sauce, mozzarella, chicken, bacon, Prosciutto Cotto cooked ham, beef, peppers & red onion
</ul>
</div>

Posted on the 08/21/2022 09:05:10 from John S.

John S.

User

Should give this:

Posted on the 08/21/2022 09:06:40 from John S.

Daniel W.

User

Thanks from me.

I would like to include the code on my website. Should I put a link or a name on my website as an attribution to the author, other than the link to the forum post.

I'm planning to add a section on Website X5 to my website to help beginners. In addition to brief information and links, there should also be small code parts to expand missing functions.

My e-mail address is in the imprint of FindeLinks.de.

Posted on the 08/21/2022 17:22:49 from Daniel W.

John S.

User

No attribution is needed for code like this.

You could mark the post you find "Useful" with a thumbs-up.

Posted on the 08/21/2022 18:09:07 from John S.

Ross P.

User
Author

Thank you John and Daniel.

Your code, comments and help are greatly appreciated. Great work you are so kind in giving your time, expertise and knowledge so freely for all to benefit from.

Hope you stay well.

Thanks again

Ross

Posted on the 08/21/2022 21:54:22 from Ross P.

Ross P.

User
Author

Hello again and sorry to be a nuisance about this but I have a problem with getting the menu to align to the left on the mobile version, are you able to help please.

Here is what I have added and what it looks like on a mobile:

Before closing the HEAD tag:

.toc li .title {
order: 1;
font-weight: bold;
}

.toc li .chapter {
order: 3;
}

p {
text-align: left;
color:black;
}
</style>

HTML Code - DIV section

<li> CREAMY MUSHROOMS $23.00</li>
Toasted Ciabatta with Mushrooms, Poached Egg, Cream, Garlic & Toasted Pumpkin Seeds with Salsa Verde - V & NF
 
<li> GF - Gluten Free Bread $25.00</li>
<li> DF - Dairy Free Butter, Garlic Oil + Thyme Instead of Cream $23.00</li>
<li> Vegan - DF Option + No Egg $22.00</li> 
 
</ul>
</div>

<li> BEEF CHEEK HASH $25.00</li>
Smashed Potatoes, Beef Cheek, Cherry Tomatoes, Spinach, Topped with a Fried Egg & Creme Fraiche - GF & NF 
<li> DF - No Creme Fraiche or Substitute for Aioli. $25.00</li> 
 
</ul>
</div>

<li> AVOCADO + HALOUMI SMASH $24.00</li>
Toasted Ciabatta, Avocado + Pea Smash, Haloumi, Poached Egg, Pesto, Snow Pea Shoots with a Balsamic Glaze - V & NF
 
<li> GF - Gluten Free Bread $26.00</li>
<li> DF - Dairy Free Butter, Cherry Tomatoes Instead of Haloumi $24.00</li>
<li> Vegan - DF Option + No Egg $23.00</li> 
 
</ul>
</div>

<li> PASSENGERS BIG BREAKFAST $26.00</li>
Bacon, Sausage, Mushrooms, Smashed Potatoes & Two Eggs Your Way on Toasted Honey Linseed Bread with Tomato Relish - NF 
<li> GF - Gluten Free Bread $28.00</li>
<li> DF - Dairy Free Butter $26.00</li>
<li> Free Butter. Vegetarian - Swap Bacon & Sausage for Tomato & Spinach $25.00</li> 
 
</ul>
</div>

<li> THREE EGG OMELETTE $23.00</li>
with Bacon, Cheese & Tomato on Toast with a Side of Greens - NF 
<li> GF - Gluten Free Bread $25.00</li>
<li> DF - Dairv Free Butter + Dairy Free Cheese $25.00</li>
<li> Veg - Mushrooms Instead of Bacon $23.00</li> 
 
</ul>
</div>

<li> WARMED QUINOA SALAD $25.00</li>
Pan Seared Chicken Breast, Pumpkin, Feta, Pea, Mesclun and Toasted Seeds - GF & NF 
<li> DF - No Feta $25.00</li>
<li> Vegan - Seasonal Vegetables + No Feta $25.00</li> 
 
</ul>
</div>

<li> BEEF & BACON BURGER $26.00</li>
120gm Beef Pattie with Bacon, Cheese, Pickles, Slaw Our Special Burger Sauce. Served with Triple Cooked Chips & Tomato Sauce - NF 
<li> GF - Gluten Free Bun $28.00</li>
<li> DF - Gluten Free Option + Dairy Free Cheese $28.00</li>
 
</ul>
</div>

Mobile version image

If it helps you can view the website at: http://passengers.pagans.nz/

I am aware that I might be being a bit fussy here but also is there a way that on the mobile view the setting can be made to look something like this:

Free Butter. Vegetarian - Swap Bacon & Sausage
for Tomato & Spinach.......................................$25.00

Thanks once again for your help.

Kind regards

Ross

Posted on the 09/04/2022 22:12:18 from Ross P.