I've spent a considerable amount of time on this project without making much progress. However, I came across a tutorial with a beautiful menu design that I decided to replicate. Here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu List</title>
<link rel="stylesheet" type="text/css" href="../CSS/checklist_menu_style.css">
</head>
<body>
<div class="menu">
<h2>Our Menu</h2>
<ul>
<li>
<label>
<input type="checkbox" name="">
<span class="icon"></span>
<span class="list">Fried Fish With Souce</span>
</label>
</li>
... (rest of the HTML code)
</ul>
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css?family=Poppins');
body
{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Poppins', sans-serif;
}
... (rest of the CSS code)
View the menu result here.
I am now looking to modify the menu so that it appears as a popup when a link on my homepage is clicked, rather than opening as a separate page. The popup should also blur the background and close when the user clicks elsewhere on the page. Any assistance would be greatly appreciated!