Moving around between <nav>, <section> and <main>

I am able to divide the whole page into 4 regions and they are:-

[header] (on the very top), [nav] (right below the header), [section] (on the bottom left) and [main] (on the bottom right).

In the [nav] portion, I have a list of hyperlinked items (like “item-A”, “item-B”, etc).

The task is to:-

When “item-A” is selected, the corresponding sub-list containing “A1”, “A2”, “A3” etc should be displayed on the [section] part. Similarly, if “item-B” is selected, the sub-list “B1”, “B2” should also be displayed on the [section] part (overwriting the previous content, of course).

“B2” again is hyperlinked to the file “B.html” which, when called, should be executed on the [main] portion.

How can I do all of the above?

P.S. I can finish the above if I use [frame] and [frameset]. Unfortunately, these become obsolete in HTML5.

The widths and heights of each region can be defined inside the CSS setup.

Solution

Stack Blitz code: https://stackblitz.com/edit/web-platform-uwbmw4?devtoolsheight=33&file=index.html

Because it needs a1,a2,b1,b2 HTML files and stuffs it does not work here(below)(other parts work other than iframe stuff) please try above stackblitz for testing

const itemAOptions = [
  {
    name: 'A1',
    data: 'A1.html',
  },
  {
    name: 'A2',
    data: 'A2.html',
  },
];

const itemBOptions = [
  {
    name: 'B1',
    data: 'B1.html',
  },
  {
    name: 'B2',
    data: 'B2.html',
  },
];

const dataContainer = document.querySelector('#display');
const menuContainer = document.querySelector('#menu');
const navContainer = document.querySelector('#navBar');

navContainer.addEventListener('click', (e) => {
  e.stopPropagation();
  if ('nochange' in e.target.dataset) {
    e.preventDefault();
    const toLoad = e.target.dataset.nochange;
    let data = '';
    if (toLoad === 'loadA') {
      data = constructData(itemAOptions);
    } else {
      data = constructData(itemBOptions);
    }
    menuContainer.innerHTML = data;
    display.innerHTML = ``;//emptydata means clear or empty screen as you requested
  }
});

menuContainer.addEventListener('click', (e) => {
  e.stopPropagation();

  e.preventDefault();
  const toLoad = e.target;
  let data = '';

  data = `<iframe src="https://web-platform-uwbmw4.stackblitz.io/${toLoad.innerHTML}.html" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
      </iframe>`;//use src="Your.Website.address.or.directory/${toLoad.innerHTML}.html"

  console.log(toLoad.innerHTML);
  display.innerHTML = data;
});

function constructData(item) {
  let innerData = '';
  item.forEach((i) => {
    innerData += `<li class="li"><a href=# class="a">${i.name}</a></li>`;
  });
  return `<ul class="ul">${innerData}</ul>`;
}

function constructDataIframe(item) {
  let innerData = '';
  item.forEach((i) => {
    innerData += `<iframe src="https://web-platform-uwbmw4.stackblitz.io/${i.data}" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
    </iframe>`;
  });
  return `${innerData}`;
}

h1 {
  text-align:center;
}
#navBar{
  background-color: transparent;
  border: 5px solid black;
  text-align: center;
}
.lk{
  text-decoration: none;
}
.uli{
  display: flex;
  justify-content: flex-end;
}
.lik{
  list-style: none;
  padding-right:15px;
}
.a{
  text-decoration: none;
}
.li{
  list-style: none;

}
.ul{
  float:left;
  padding-left: 10px;
}
#secHolder{
  width: 100%;
  background-color: transparent;
  border: 5px solid black;
  text-align: center;
}

#display{
  width: 100%;
  background-color: transparent;
  border: 5px solid black;
  text-align: center;
}
#Holder{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

<html>
  <head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" type="text/css" href="styles.css"> 
  </head>
  <body>
   <h1>Header</h1>
  <nav id="navBar">
  
  <ul>
    <div class="uli">
    <li class="lik"><a href="#" data-nochange="loadA" class="lk">Item A</a></li>
    <li class="lik"><a href="#" data-nochange="loadB" class="lk">Item B</a></li>
  </div>
  </ul>
</nav>
<div id="Holder">

<div id="secHolder">
<h3>Section</h3>
<section id="menu"></section>
</div>
<main id="display"></main>
</div>
<script src="script.js"></script>
  </body>
</html>

P.S I have tried my best on answering but I don't have regular practice on commenting please try to understand, ask for doubts.

I cannot understand what you mean by I cannot use frame its obsolete in html5, I have used iframe is it ok?