10
How do you code a food menu list? (i.imgur.com)
almost 3 years ago from Gergo Bekes, Web Designer
14 comments
Gergo Bekes, almost 3 years ago Almost forgot to add the codepen link http://codepen.io/seanclayton/pen/ryPWMM
Antoine Louis, almost 3 years ago Nicely done, I forked and styled it. I also replaced the "dashed" by "dotted". http://codepen.io/antoinelouis/pen/qrvEVd
Dirk HCM van Boxtel, almost 3 years ago
Sweet. Love where you took this :D
I'll fight you though!
Quick note;
- Make sure you set a line-height (1.5em for body, 1.2 for headings) - especially when you have a large x-height. In this case I'd go 1.65-ish em. That way your copy doesn't risk looking like a brick :x (sorry! lol)
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
Mike Rundle, almost 3 years ago
You should use an HTML definition list, it was made for this. More semantically-correct than any other tags you could use.
Great point.
Cooper McGoodwin, almost 3 years ago 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
Tristam Goch, almost 3 years ago
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?
Mirza Sadovic, almost 3 years ago
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.
Olivier F, almost 3 years ago
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.
Dean Hayden, almost 3 years ago
Tables. That's how you'd do it for print, why do it any other way for web?
Account deleted almost 3 years ago Yes, I think tables are semantically correct (menus are just fancy pricing tables).
Art Vandelay, almost 3 years ago
Definition List or table plus schema formatting.
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