celsobessa/markup.html

## markup.html
<!doctype html>
<!-- Portions of the base code from from HTML5 Boilerplate. https://github.com/h5bp/html5-boilerplate -->
<!-- The original technique is a not an creation of mine. I am still looking for the creator to give the proper credit. -->
<!-- Also, there might be acessibility issues. Assuring its accessibility is a work in progress. -->
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <title>Sliding overlay menu withouth Javascript</title>
  <meta name="description" content="Experimental sliding overlay menu withouth Javascript">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
  <link rel="stylesheet" href="./css/javascript-less-sliding-menu.css">
</head>

<body>
  <header class="menu">
    <nav class="nav-menu">
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <h1 class="logo"><a href="./index.html">home</a></h1>
      <ul>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./item-1.html">Item 1</a></li>
        <li><a href="./item-2.html">Item 2</a></li>
        <li><a href="./item-3.html">Item 3</a></li>
        <li><a href="./item-4.html">Item 4</a></li>
        <li><a href="./item-5.html">Item 5</a></li>
        <li><a href="./item-6.html">Item 6</a></li>
        <li><a href="./item-7.html">Item 7</a></li>
        <li><a href="./item-8.html">Item 8</a></li>
        <li><a href="./item-9.html">Item 9</a></li>
      </ul>
    </nav>
  </header>
  <main>
  <h1>Sliding overlay menu withouth Javascript</h1>
  <p>Experimental sliding overlay menu withouth Javascript.</p>
  <p>Please, load this experiment in a screen or browser window less than 858px and click or drag the visualization pane until it is less than 858px. Then, click in the hamburger menu icon.</p>
  <p>The original technique is a not an creation of mine. I am still looking for the creator to give the proper credit.</p>
  <p>Also, there might be acessibility issues. Assuring its accessibility is a work in progress.</p>
  </main>
</body>

## style.css
/*header and navbar*/
header {
  background: #0082e6;
  min-height:80px;
  position: fixed;
  width: 100vw;
  z-index: 2;
}

nav {
  height: 80px;
  position: relative;
  width: 100%;
}

nav ul {
  float: right;
  margin-right: 20px;
}

nav ul li {
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
footer nav ul li {
  display: block;
  line-height: initial;
  margin: initial;
}

nav ul li a {
  color: white;
  font-weight: bold;
  font-size: 17px;
  padding: 7px 13px;
}

a.active,
a:hover {
  background: #1b9bff;
  transition: 0.5s;
}

.checkbtn {
  color: white;
  font-size: 30px;
  float: right;
  line-height: 80px;
  margin-right: 5rem;
  display: none;
}

#check {
  display: none;
}

.logo {
  color: white;
  display: inline-block;
  font-size: 35px;
  font-weight: bold;
  line-height: 80px;
  margin: 0;
}
.logo a {
  color: #fff;
}
#check {
  display: none;
}
main {
  top:40vh;
}
@media (max-width: 858px) {
  .checkbtn {
    display: block;
  }

  header nav {
    background: #0082e6;
    position: fixed;
    top: 0;
    width: 100%;
  }

  header nav ul {
    background: #97b8da;
    height: 100vh;
    left: -100vw;
    margin: 0;
    overflow-y: scroll;
    padding: 0;
    position: fixed;
    top: 80px;
    text-align: center;
    transition: all 0.5s;
    width: 100vw;
  }

  nav ul li {
    display: block;
    line-height: 30px;
    margin: 50px 0;
  }

  nav ul li a {
    font-size: 20px;
  }

  a:hover,
  a.active {
    background: none;
    color: #0082e6;
  }

  #check:checked ~ ul {
    left: 0;
  }

  .footer {
    height: 50rem;
    width: 100%;
  }
  .footer nav {
    flex-flow: column;
  }
}
	<!doctype html>
	<!-- Portions of the base code from from HTML5 Boilerplate. https://github.com/h5bp/html5-boilerplate -->
	<!-- The original technique is a not an creation of mine. I am still looking for the creator to give the proper credit. -->
	<!-- Also, there might be acessibility issues. Assuring its accessibility is a work in progress. -->
	<html class="no-js" lang="">

	<head>
	<meta charset="utf-8">
	<title>Sliding overlay menu withouth Javascript</title>
	<meta name="description" content="Experimental sliding overlay menu withouth Javascript">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
	<link rel="stylesheet" href="./css/javascript-less-sliding-menu.css">
	</head>

	<body>
	<header class="menu">
	<nav class="nav-menu">
	<input type="checkbox" id="check">
	<label for="check" class="checkbtn">
	<i class="fas fa-bars"></i>
	</label>
	<h1 class="logo"><a href="./index.html">home</a></h1>
	<ul>
	<li><a href="./index.html">Home</a></li>
	<li><a href="./item-1.html">Item 1</a></li>
	<li><a href="./item-2.html">Item 2</a></li>
	<li><a href="./item-3.html">Item 3</a></li>
	<li><a href="./item-4.html">Item 4</a></li>
	<li><a href="./item-5.html">Item 5</a></li>
	<li><a href="./item-6.html">Item 6</a></li>
	<li><a href="./item-7.html">Item 7</a></li>
	<li><a href="./item-8.html">Item 8</a></li>
	<li><a href="./item-9.html">Item 9</a></li>
	</ul>
	</nav>
	</header>
	<main>
	<h1>Sliding overlay menu withouth Javascript</h1>
	<p>Experimental sliding overlay menu withouth Javascript.</p>
	<p>Please, load this experiment in a screen or browser window less than 858px and click or drag the visualization pane until it is less than 858px. Then, click in the hamburger menu icon.</p>
	<p>The original technique is a not an creation of mine. I am still looking for the creator to give the proper credit.</p>
	<p>Also, there might be acessibility issues. Assuring its accessibility is a work in progress.</p>
	</main>
	</body>
	/header and navbar/
	header {
	background: #0082e6;
	min-height:80px;
	position: fixed;
	width: 100vw;
	z-index: 2;
	}

	nav {
	height: 80px;
	position: relative;
	width: 100%;
	}

	nav ul {
	float: right;
	margin-right: 20px;
	}

	nav ul li {
	display: inline-block;
	line-height: 80px;
	margin: 0 5px;
	}
	footer nav ul li {
	display: block;
	line-height: initial;
	margin: initial;
	}

	nav ul li a {
	color: white;
	font-weight: bold;
	font-size: 17px;
	padding: 7px 13px;
	}

	a.active,
	a:hover {
	background: #1b9bff;
	transition: 0.5s;
	}

	.checkbtn {
	color: white;
	font-size: 30px;
	float: right;
	line-height: 80px;
	margin-right: 5rem;
	display: none;
	}

	#check {
	display: none;
	}

	.logo {
	color: white;
	display: inline-block;
	font-size: 35px;
	font-weight: bold;
	line-height: 80px;
	margin: 0;
	}
	.logo a {
	color: #fff;
	}
	#check {
	display: none;
	}
	main {
	top:40vh;
	}
	@media (max-width: 858px) {
	.checkbtn {
	display: block;
	}

	header nav {
	background: #0082e6;
	position: fixed;
	top: 0;
	width: 100%;
	}

	header nav ul {
	background: #97b8da;
	height: 100vh;
	left: -100vw;
	margin: 0;
	overflow-y: scroll;
	padding: 0;
	position: fixed;
	top: 80px;
	text-align: center;
	transition: all 0.5s;
	width: 100vw;
	}

	nav ul li {
	display: block;
	line-height: 30px;
	margin: 50px 0;
	}

	nav ul li a {
	font-size: 20px;
	}

	a:hover,
	a.active {
	background: none;
	color: #0082e6;
	}

	#check:checked ~ ul {
	left: 0;
	}

	.footer {
	height: 50rem;
	width: 100%;
	}
	.footer nav {
	flex-flow: column;
	}
	}