Looking to create a unique restaurant horizontal list bar for my application. The goal is to have a horizontal menu that displays 3 options on the screen at a time, with the middle one being the largest and the two flanking it smaller in size. As I scroll horizontally through the options, I need the size of each option to adjust accordingly. I've managed to write most of the code but could use some help figuring out how to dynamically change the sizes based on what's currently visible. Any assistance would be greatly appreciated.
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charest="utf-8" />
<title>main screen</title>
<link rel="stylesheet" type="text/css" href="question.css" />
</head>
<body>
<div class="wrapper">
<h1> choose your restaurant </h1>
<div class="lists">
<ul>
<li>
<a href="#">pastori</a>
</li>
<li>
<a href="#">moses</a>
</li>
<li>
<a href="#">pizza</a>
</li>
</ul>
</div>
</div>
</body>
</html>
And here is my CSS code:
* {
padding: 0;
margin: 0;
}
h1 {
text-align: center;
font-size: 30px;
margin: 30px 0px;
}
ul {
list-style-type: none;
margin: 0px auto;
overflow-x: auto;
width: 340px;
}
li {
float: left;
width: 100px;
height: 30px;
margin: 0px 4px;
border: 2px solid #111;
border-radius: 3px;
}
li a {
display: inline-block;
color: black;
margin: 0px 4px;
width: 100px;
height: 30px;
line-height: 30px;
text-decoration: none;
text-align: center;
}
.wrapper {
text-align: center;
}