Excercise 8 - Iframe with Side Bar Navigation

<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">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;

}

@media screen and (max-height: 450px) {

  .sidenav {padding-top: 15px;}

  .sidenav a {font-size: 18px;}

}

</style>

<div class="sidenav" id="mySidenav"><a class="closebtn" href="javascript:void(0)" onclick="closeNav()">&times;</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a></div>

<h2>IFrame and Side Navigation</h2>

<p>Click on the element below to open the side navigation menu.</p>

<p><span onclick="openNav()" style="font-size:30px;cursor:pointer">☰ Side</span><script>

function openNav() {

  document.getElementById("mySidenav").style.width = "250px";

}

function closeNav() {

  document.getElementById("mySidenav").style.width = "0";

}

</script></p>

<p><iframe height="480" src="https://panlasangpinoy.com/" title="Panlasang Pinoy" width="540"></iframe></p>

</body>

</html>