Need Help with Buttons HTML/CSS/Javascript

I’m attempting to make a nice navigation button banner for my site. I need them centered in the page and the scroll bar at the bottom gone. I’ve been working on this for over a week. These scripts are pretty much gibberish to me and I’m lucky to have gotten as far with it as I did.
Also, is this script making server calls?

</html><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}
.container {
  display: flex;
  flex-flow: row nowrap;
  center-content: space-between;
  width: 100%;
  padding: 30px
}
.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    left:0;
    background-color: rgba(0,0,0, 0.9);
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    transition: .5s;
}
.overlay a, .overlay2 a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: .3s;
}
.overlay a:hover, .overlay a:focus, .overlay2 a:hover{
    color: #f1f1f1;
}
.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center; 
    margin-top: 30px; 
}
.closebtnOverlay {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px !important;
}
.overlay2 {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 9;
    top: 0;
    left:0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: auto;
    overflow: hidden;
    text-align: center;
    transition: .5s;
}

@media screen and (max-height: 450px) {
    ..overlay2 a {font-size: 20px}
    .closebtnOverlay {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
    }
}
</style>
</head>
<div class="container">
<div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav()">×</a>
    <div class="overlay-content">      
      <a href="javascript:void(0)">About</a>
      <a href="javascript:void(0)">Services</a>
      <a href="javascript:void(0)">Clients</a>
      <a href="javascript:void(0)">Contact</a>
    </div>
  </div>
  <div id="myNav2" class="overlay2" style="height: 0%;">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav2()">×</a>
    <div class="overlay-content">      
      <a href="javascript:void(0)">About</a>
      <a href="javascript:void(0)">Services</a>
      <a href="javascript:void(0)">Clients</a>
      <a href="javascript:void(0)">Contact</a>
    </div>
  </div>
<button class="ws-btn w3-padding-large w3-dark-grey w3-mobile" onclick="openNav()">Arizona</button>
<p class="w3-hide-large w3-hide-medium"></p>
<button class="ws-btn w3-padding-large w3-dark-grey w3-mobile" onclick="openNav2()">Florida</button>
    <script>
  function openNav() {
    document.getElementById("myNav").style.width = "100%";
  }
  function closeNav() {
    document.getElementById("myNav").style.width = "0%";
  }
  
  function openNav2() {
    document.getElementById("myNav2").style.height = "100%";
  }
  function closeNav2() {
    document.getElementById("myNav2").style.height = "0%";
  }
 
</script>
</div>
</body>
</html>

I know it’s messed up. I have no idea what I’m doing. Thanks for the pointers. I’ll go back and try to figure it out with what you gave me.

I went back to the drawing board with what you gave me and was able to get things lined up the way I wanted, made the CSS more efficient, + a few more things I was able to figure out.
THEN I embedded the code into my Google Sites page. If I make it so the buttons look good in the layout the curtain menu won’t display correctly.
Is there a way to make the curtain menu “jump up” and cover the entire screen instead of just the frame it’s embedded in?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}
.container {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  padding top: 30px;
  padding bottom: 30px
}
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: auto;
    overflow: hidden;
    text-align: center;
    transition: .5s;
}
.overlay a, {
    text-decoration: none;
    color: #3333;
    display: block;
    transition: .5s;
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay-content {
  	display: flex;
  	flex-direction: column;
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center; 
    margin-top: 30px; 
}
.closebtnOverlay {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px !important;
}
.button {
  background-color: #FF8C00;
  border: 2px solid #4CAF50;
  border-radius: 12px;
  color: white;
  width: 120px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .closebtnOverlay {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
    }
}
</style>
</head>
<body>
<div class="container">
	<div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav()">×</a>
    	<div class="overlay-content">      
      	<a href="javascript:void(0)">About</a>
      	<a href="javascript:void(0)">Services</a>
      	<a href="javascript:void(0)">Clients</a>
      	<a href="javascript:void(0)">Contact</a>
    	</div>
  	</div>
  	<div id="myNav2" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav2()">×</a>
    	<div class="overlay-content">      
      	<a href="javascript:void(0)">About</a>
      	<a href="javascript:void(0)">Services</a>
      	<a href="javascript:void(0)">Clients</a>
      	<a href="javascript:void(0)">Contact</a>
    	</div>
  	</div>
  	<div id="myNav3" class="overlay">
  	<a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav3()">×</a>
  		<div class="overlay-content">
    	<a href="javascript:void(0)">Austin</a>
    	<a href="javascript:void(0)">Dallas</a>
    	<a href="javascript:void(0)">Houston</a>
   	 	<a href="javascript:void(0)">San Antonio</a>
  		</div>
	</div>

<button class="button" onclick="openNav()">Arizona</button>
<button class="button" onclick="openNav2()">Florida</button>
<button class="button" onclick="openNav3()">Texas</button>
<script>

function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}

function openNav2() {
document.getElementById("myNav2").style.height = "100%";
}
function closeNav2() {
document.getElementById("myNav2").style.height = "0%";
}
  
function openNav3() {
    document.getElementById("myNav3").style.height = "100%";
}
function closeNav3() {
document.getElementById("myNav3").style.height = "0%";
}
</script>
</div>
</body>
</html>

Hello? Some help, please.

I went back to the drawing board with what I learned from my previous post and was able to get things lined up the way I wanted, made the CSS more efficient, + a few more things I was able to figure out.
THEN I embedded the code into my Google Sites page. If I make it so the buttons look good in the layout the curtain menu won’t display correctly.
Is there a way to make the curtain menu “jump up” and cover the entire screen instead of just the frame it’s embedded in?
Latest version. I’m trying.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: 'Lato', sans-serif;
}
.container {
  display: flex;
  flex-flow: row nowrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
  padding top: 30px
}
.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0, 0.9);
    overflow-x: auto;
    overflow: scroll;
    text-align: center;
    transition: .5s;
}
.overlay a {
  text-decoration: none;
  font-size: 24px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}
.overlay-content {
  	display: flex;
  	flex-direction: column;
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center; 
}
.closebtnOverlay {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 50px !important;
}
.button {
  background-color: #FF8C00;
  border: 2px solid #338C9A;
  border-radius: 12px;
  color: white;
  width: 120px;
  height: 40px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 16px;
}
.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
@media screen and (max-height: 450px) {
    .overlay a {font-size: 20px}
    .closebtnOverlay {
        font-size: 40px !important;
        top: 15px;
        right: 35px;
    }
}
</style>
</head>
<body>
<div class="container">
	<div id="myNav" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav()">×</a>
    	<div class="overlay-content">      
      	<a href="javascript:void(0)">Phoenix</a>
      	<a href="javascript:void(0)">Prescott</a>
      	<a href="javascript:void(0)">Scottsdale</a>
      	<a href="javascript:void(0)">Tucson</a>
    	</div>
  	</div>
  	<div id="myNav2" class="overlay">
    <a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav2()">×</a>
    	<div class="overlay-content">      
      	<a href="javascript:void(0)">Cape Coral</a>
      	<a href="javascript:void(0)">Jacksonville</a>
      	<a href="javascript:void(0)">Lakeland</a>
      	<a href="javascript:void(0)">Miami</a>
        <a href="javascript:void(0)">Ocala</a>
      	<a href="javascript:void(0)">Orlando</a>
      	<a href="javascript:void(0)">Palm Beach</a>
      	<a href="javascript:void(0)">Pensacola</a>
        <a href="javascript:void(0)">Port Charlotte</a>
      	<a href="javascript:void(0)">Sarasota</a>
      	<a href="javascript:void(0)">St. Augustine</a>
      	<a href="javascript:void(0)">St. Petersburg</a>
      	<a href="javascript:void(0)">Tallahasse</a>
      	<a href="javascript:void(0)">Tampa</a>
    	</div>
  	</div>
  	<div id="myNav3" class="overlay">
  	<a href="javascript:void(0)" class="closebtnOverlay" onclick="closeNav3()">×</a>
  		<div class="overlay-content">
    	<a href="javascript:void(0)">Austin</a>
    	<a href="javascript:void(0)">Dallas</a>
    	<a href="javascript:void(0)">Houston</a>
   	 	<a href="javascript:void(0)">San Antonio</a>
  		</div>
	</div>
<button class="button" onclick="openNav()">Arizona</button>
<button class="button" onclick="openNav2()">Florida</button>
<button class="button" onclick="openNav3()">Texas</button>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}

function openNav2() {
document.getElementById("myNav2").style.height = "100%";
}
function closeNav2() {
document.getElementById("myNav2").style.height = "0%";
}
  
function openNav3() {
    document.getElementById("myNav3").style.height = "100%";
}
function closeNav3() {
document.getElementById("myNav3").style.height = "0%";
}
</script>
</div>
</body>
</html>

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.