If you are looking for a unique way to style service-based menu items on your website—think restaurant, spa services, etc—I have a simple way to do it with HTML and CSS.
Resources mentioned in the video
💻 Programs & Services Mentioned in Video
CodePen
Divi // Elegant Themes
WordPress
✅ Want to purchase the Divi Layout featured in this video? Click here to access.
HTML TABLE FOR ITEMS
<div class="menu">
<table style="border: none;">
<tbody>
<tr>
<td><span>MENU ITEM GOES HERE</span></td>
<td><span> $100 </span></td>
</tr>
</tbody>
</table>
<p class="p1"><em>You can place a description for the item above in this paragraph.</em></p>
</div>
<div class="menu">
<table style="border: none;">
<tbody>
<tr>
<td><span>MENU ITEM GOES HERE</span></td>
<td><span> $100 </span></td>
</tr>
</tbody>
</table>
<p class="p1"><em>You can place a description for the item above in this paragraph.</em></p>
</div>Side note: if the name for the class I listed as “menu” seems too generic for you, feel free to jazz it up. Make sure whatever name you choose is correctly referenced in the HTML table.
CSS TO STYLE TABLE
/* MENU TABLE */
.menu table {
width: 100%;
margin: 5px auto 5px !important;
padding-bottom:0px;
table-layout:fixed;
border-collapse: collapse;
border:none !important;
}
.menu td {
padding:1em 0 0 0 !important;
vertical-align:bottom;
background-image:radial-gradient(#000 1px, #fff 0px);
background-size: 8px 8px;
background-repeat:repeat-x;
background-position: left bottom;
border:none !important;
}
.menu td span{
background-color:#fff;
padding:8px 0;
}
.menu td:first-child {
text-align: left;
font-weight: 700;
text-transform:uppercase;
line-height:1.7em;
}
.menu td:first-child span{
padding-right:0;
}
.menu td:last-child {
text-align:right;
width:20%;
line-height:1.7em;
}
.menu td:last-child span{
padding-left:0;
}
@media only screen and (max-width: 600px) {
.menu td:first-child, .menu td:last-child {
font-size:.9em;
line-height:1.7em;
}
}Looking to build a website and not sure where to start?
Get my FREE Building a Website: Getting Started Checklist to learn how to plan and build your site.
Looking for resources to create websites? Check out my recommendations below. Flywheel is a great web host for your WordPress site, and Divi is an excellent theme to build out your vision.
Disclosure: Some of the links in this post are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission.
