I have created a side navigation for a website, but I don't want it to overlay on top of my website. I want it to pushover the rest of the site. For example how they do it on this website. The code i have is below.
<div id="mainbox" onclick="openFunction()">☰ </div>
<div id="menu" class="sidemenu">
Home
Shop
About
Contact
×
</div>
<script type="text/javascript">
function openFunction(){
document.getElementById("menu").style.width="400px";
document.getElementById("mainbox").style.marginLeft="400px";
}
function closeFunction(){
document.getElementById("menu").style.width="0px";
document.getElementById("mainbox").style.marginLeft="0px";
}
</script>
CSS:
#mainbox{
position: fixed;
font-size: 40px;
cursor: pointer;
transition: all .6s;
transform: translate(3750%, -1600%);
}
.sidemenu{
position: fixed;
top: 0px;
right: 0px;
height: 100%;
width: 0px;
background-color: #FFEECA;
z-index: 1;
padding-top: 100px;
overflow-x: hidden;
transition: all .5s;
}
.sidemenu a{
padding: 8px 8px 8px 64px;
text-decoration: none;
font-size: 20px;
color: #222;
display: block;
}
.sidemenu a:hover{
color: white;
}
.sidemenu .closebtn{
position: absolute;
top: 0px;
right: 25px;
font-size: 36px;
margin-left: 32px;
}
laatste...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
hey
alles
oke
?
</div>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html>
here you go, i hope its the thing you wanted...lol
https://codepen.io/schliflo/pen/Eawzzw
Related
I've been trying to get the burger icon in my site to not move when the burger menu opens but I'm having issues with keeping it fixed to the left side of the page.
I've tried keeping it fixed by putting in position: fixed but that did'nt work. I think the issue might be due to this line:
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
</div>
Code for burger menu function-
CSS:
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: white;
color: black;
padding: 10px 15px;
border: none;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>
</body>
</html>
Any help would be greatly appreciated!
Removenthis line from your script: document.getElementById("main").style.marginLeft = "250px";
You're giving it 250px of left margin which is pushing it out when you click on it.
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: white;
color: black;
padding: 10px 15px;
border: none;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰</button>
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
}
</script>
</body>
</html>
Your hunch was right. The button moves with the <div id="main"> container, though position: fixed; should prevent that.
Since the button element should not move with the main container, just remove it from that container in the same hierarchy as the sidebar and the main div.
Then add the following rules to the CSS of the button.
.openbtn {
position: fixed;
z-index: 9;
}
This will make your button fixed to the screen and above the, also fixed, sidebar element.
I hope this is what you meant. Check out the example below.
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
position: fixed;
font-size: 20px;
cursor: pointer;
background-color: white;
color: black;
padding: 10px 15px;
border: none;
z-index: 9;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 75px;
}
.sidebar a {
font-size: 18px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mySidebar" class="sidebar">
×
About
Services
Clients
Contact
</div>
<button class="openbtn" onclick="openNav()">☰</button>
<div id="main">
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>
</body>
</html>
I need to create a sidebar that can be able to close it clicking on the X button and clicking anywhere
I am able to close the navbar by clicking on the X button in the sidebar. How can I change my javascript to be able to close the sidebar by clicking anywhere on the page?
function openNav() {
document.getElementById('mySidenav').style.width="250px";
}
function closeNav() {
document.getElementById('mySidenav').style.width="0"
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a{
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover{
color: #F1F1F1;
}
.sidenav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#media screen and (max-height: 450px){
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<body>
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>
</body>
You can listen to clicks on your entire page through:
document.body.onclick = function () {
// Close Nav here
}
However, doing this will cause your entire page to try to close the nav when clicked – even your open button.
You can exclude certain elements from listening to events set on parent elements through the e.stopPropagation() method. See an example implementation below.
Please also note that your body will not start off 100% of your window's height due to the lack of content, and thus will not respond to clicks everywhere on the page. You can fix this by using setting the CSS property body: 100vh.
function openNav(e) {
e.stopPropagation();
document.getElementById('mySidenav').style.width="250px";
}
function closeNav(e) {
e.stopPropagation();
document.getElementById('mySidenav').style.width="0"
}
document.body.onclick = closeNav;
document.getElementsByClassName('openbtn')[0].onclick = openNav;
document.getElementById('mySidenav').onclick = openNav;
document.getElementsByClassName('closebtn')[0].onclick = closeNav;
body {
height: 100vh;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a {
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover {
color: #F1F1F1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<body>
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" class="openbtn">cart</span>
</body>
Easily you can add overlay element when the sidebar is shown.
function overlay(isShow){
var elm = document.getElementById('overlay')
if (isShow) {
elm.style.display = 'block';
} else {
elm.style.display = 'none';
}
}
function openNav() {
overlay(true);
document.getElementById('mySidenav').style.width="250px";
}
function closeNav() {
overlay(false);
document.getElementById('mySidenav').style.width="0"
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a{
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover{
color: #F1F1F1;
}
.sidenav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#overlay{
z-index: 2;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: none;
}
#media screen and (max-height: 450px){
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>
<div id="overlay" onclick="closeNav()"></div>
I am trying to keep my buttons concise inside a menu nav bar but I noticed most of the contents in the nav bar act as links, I want to store table in my buttons, inside the nav bar. I don't know if this is possible or sensible. I am really new at this..............................................................
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.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 .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:
</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "50%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
This should give you what you need. Change your menu links to
<div class="overlay-content">
<button class="buttonStyle" href="#">About</button>
<button class="buttonStyle" href="#">Services</button>
<button class="buttonStyle" href="#">Clients</button>
<button class="buttonStyle" href="#">Contact</button>
</div>
Then add the following to your style.
.buttonStyle {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
background-color: transparent;
border: 0;
outline: 0;
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.buttonStyle:hover {
color: #f1f1f1;
}
All we've done here is changed your <a> tags to <button> tags and styled your button so it appears the same as your text links. Hope this helps.
Edit: You will need to edit your media query to add responsiveness again :)
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.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 .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.buttonStyle {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
background-color: transparent;
border: 0;
outline: 0;
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.buttonStyle:hover {
color: #f1f1f1;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
<div class="overlay-content">
About
<button class="buttonStyle" href="#">Services</button>
<button class="buttonStyle" href="#">Clients</button>
<button class="buttonStyle" href="#">Contact</button>
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:
</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "50%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
Add .btn class to your link and add some styles. With :active selector, you can add click effect like standard button - for example: inset shadow.
.overlay a.btn {
background: #818181;
color: #fff;
display: inline-block;
font-weight: 600;
font-size: 36px;
line-height: 36px;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 6px;
padding: 17px;
text-transform: uppercase;
text-decoration: none;
white-space: normal;
}
.overlay a.btn:active {
box-shadow: inset 0px 0px 8px rgba(0,0,0,.7);
}
About
See, here I've the working snippet, you can change color and padding /margin for button class according to you.
function openNav() {
document.getElementById("myNav").style.width = "50%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
.button {
display: block;
width: 115px;
height: 25px;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
margin-left : 100px;
margin-bottom:5px;
}
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<!DOCTYPE html>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:
</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
You could do like this if you wan't to keep your links for some reason:
<!DOCTYPE>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
</head>
<body>
alikn
</body>
</html>
<script>
function hRefClick(event){
event.preventDefault();
alert("redirection prevented");
}
</script>
I found this Sidenav on the internet which I would like to use for my application! Link to this: http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_none
<!DOCTYPE html>
<html>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
display: none;
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<h2>Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("mySidenav").style.display = "block";
}
function closeNav() {
document.getElementById("mySidenav").style.display = "none";
}
</script>
</body>
</html>
But, the sidenav only opens when the button is activated, but I would like it to be open by default. What syntaxes would I need to change for this?
All you need to do is remove the css that is hiding the sidenav by default
.sidenav {
//display: none; - remove this line
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
}
I have been trying for days to get this to work, I am looking to have this overlay as is but simply initiate on page load instead of having to click the link in order to have it open. Can anyone suggest what i can do to have it auto overlay when someone visits?
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.6);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.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 .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<h2></h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>
Just add document.addEventListener('DOMContentLoaded', openNav()); inside your <script>
Shorthand : document.ready(openNav());
For more information check out: js document.ready()
add openNav()
openNav()
<!DOCTYPE html>
<html>
<style>
body {
margin: 0;
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.6);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.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 .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
<body>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<h2></h2>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>