How do you code a food menu list? (i.imgur.com)
almost 4 years ago from Gergo Bekes, Web Designer
almost 4 years ago from Gergo Bekes, Web Designer
You should use an HTML definition list, it was made for this. More semantically-correct than any other tags you could use.
Great point.
Almost forgot to add the codepen link http://codepen.io/seanclayton/pen/ryPWMM
Nicely done, I forked and styled it. I also replaced the "dashed" by "dotted". http://codepen.io/antoinelouis/pen/qrvEVd
Sweet. Love where you took this :D
I'll fight you though!
Quick note;
I personally almost always use relevant copy. Makes it easier to spot issues.
Also, I love not using upper-case. That way you can use uppercase letters to show abbreviations, names, etc. Just gives you more room to let the copy do the talking!
With those tweaks, and a wee bit of padding rejig, here's my iteration :D
http://codepen.io/AboutaDirk/pen/EWMXXE
Who's next? :p
Will this menu be printed as well?
If so, then have you considered using LaTeX? I would code the menu in LaTeX, then use the PDF to print and display online. Reduces the amount of places you need to manage changes.
http://tex.stackexchange.com/questions/38091/document-class-for-a-restaurant-menu
Seems like an odd choice; if your endgame is just to have a PDF then any visual design tool would be fine, no need to code.
There's nothing there that couldn't be handled by some print CSS and HTML, so why forego all the benefits of that?
This.
If you're avoiding flexbox for whatever reason, one option is to create a dot (e.g. border-bottom or top) div and then put it behind the title/price. Set relative position accordingly to center the dots. Layer things with z-index. Put background color on the title/price div to match the background color of choice.
It's a hack, and it won't really work if you have variable background colors or a background image behind it, but it's the best method unless you're using flex.
The only reason I can think of to avoid using flexbox is to support old ie. Are there any other reasons?
IE support is sketchy, up to 11. Of course, you can choose to ignore that, considering thats not a significant part of the market nowadays.
Definition List or table plus schema formatting.
Tables. That's how you'd do it for print, why do it any other way for web?
Yes, I think tables are semantically correct (menus are just fancy pricing tables).
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now