Get 15 Days Free Trial. No Credit Card Required. Hurry Now!
Our Success Stories Free Resources
Sign up
Sign up for Free

Restaurant Menu Html Css Codepen Official

menuItems.forEach((item) => { const itemText = item.textContent.toLowerCase(); if (itemText.includes(filterValue)) { item.style.display = 'block'; } else { item.style.display = 'none'; } }); }); This JavaScript code adds a filter input field and listens for input events. When the user types a filter value, it hides or shows menu items based on whether they match the filter value.

header nav ul { list-style: none; margin: 0; padding: 0; }

h3 { margin-top: 0; }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Restaurant Menu</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="#appetizers">Appetizers</a></li> <li><a href="#entrees">Entrees</a></li> <li><a href="#desserts">Desserts</a></li> </ul> </nav> </header> <main> <input id="filter-input" type="text" placeholder="Filter menu..."> <section id="appetizers"> <h2>Appetizers</h2> <ul> <li class="menu-item"> <h3>Bruschetta</h3> <p> Toasted bread with fresh tomatoes and basil ($8)</p> </li> <li class="menu-item"> <h3>Calamari</h3> <p> Fried squid rings with tangy marinara sauce ($12)</p> </li> </ul> </section> <!-- entrees and desserts sections --> </main>

h2 { margin-top: 0; }

header nav ul li { display: inline-block; margin-right: 20px; }

const menuItems = document.querySelectorAll('.menu-item'); restaurant menu html css codepen

Now that we have our HTML structure in place, let's add some CSS to make our menu look visually appealing. Here's an example:

Start Free Trial
WhatsApp