Kategorie
Bez kategorii

Task 4

Below you can look on source code:

Index.html

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dawid Andrejczuk</title>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      z-index: 1;
    }
    .dropdown:hover .dropdown-content {
      display: block;
    }
    .framebox {
      padding: 10px;
      height: 100%;
      overflow-y: scroll;
    }
	.column-1 {
	float: left;
    width:20%;
	}
	.column-2 {
	float: left;
    width:80%;
	height:90%;
	}
	.row {
    width:100%;
	height:100%;
    display: inline-flex;
    flex-wrap: wrap;
	}
  </style>
</head>
<body>
    <h1>Responsive webpage - task 4</h1>
	<section class="row">
	<div clss="column-1">
	<div class="dropdown" >
		<button>Menu</button>
		<div class="dropdown-content">
			<a href="#" onclick="changeFrame('link1.html')">Task 1</a>
			<a href="#" onclick="changeFrame('link2.html')">Task 2</a>
			<a href="#" onclick="changeFrame('link3.html')">Task 3</a>
		</div>
	</div>
	</div>
	<div class="column-2">
	<div class="framebox" height="100%">
		<iframe id="frame" src="link1.html" width="100%" height="100%"></iframe>
	</div>
	</div>
	</section>
  <!-- JavaScript function to change the content of the frame box -->
  <script>
    function changeFrame(link) {
      document.getElementById("frame").src = link;
    }
  </script>
</body>
</html>

Additionaly were created 3 html pages for links.

On next page you can check demo version.