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

Question

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.

Answer 1

You can use buttons instead of a hyperlink and get the same output.

Below is my solution:

const displayItemA = () => {
    document.getElementById("item-A").style.display = 'grid';
    document.getElementById("item-B").style.display = 'none';
}
const displayItemB = () => {
    document.getElementById("item-B").style.display = 'grid';
    document.getElementById("item-A").style.display = 'none';
}

const mainContent = ["A1", "A2", "A3", "B1", "B2", "B3"];
const displayMain = (q) => {
    document.getElementById(q).style.display = "grid";
    const toNone = mainContent.filter(e => e !== q);
    for (let i = 0; i < toNone.length; i++) {
        document.getElementById(toNone[i]).style.display = "none";
    }
}

const displayA1 = () => displayMain("A1");
const displayA2 = () => displayMain("A2");
const displayA3 = () => displayMain("A3");
const displayB1 = () => displayMain("B1");
const displayB2 = () => displayMain("B2");
const displayB3 = () => displayMain("B3");

:root {
--main-color:red;
--dark-color:#444;
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
margin: 0px;
display: grid;
place-items: center;
font-size: 20px;
}

/* repeated element */
.button-nav {
    text-decoration: none;
    color: var(--main-color);
    background: none;
    border: none;
    font-size: 20px;
    text-align: start;
}

.header {
    height: 100px;
    width: 100%;
    display: grid;
    place-items: center;
    border-bottom: 2px solid var(--dark-color);
}

.nav {
    position: relative;
    height: 75px;
    width: 100%;
    border-bottom: 2px solid var(--dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}
.nav h2 {
    position: absolute;
    left: 30px;
}

.section {
    position: absolute;
    left: 0px;
    min-height: calc(100vh - 175px);
    width: 30%;
    border-right: 2px solid var(--dark-color);
    padding: 30px;
    gap: 1em;
}
.sub-nav {
    display: grid;
    gap: 1em;
}
#item-A, #item-B{ display:none }

.main {
    position: absolute;
    left: 30%;
    min-height: calc(100vh - 175px);
    width: 70%;
    display: grid;
    padding: 30px;
    gap: 1em;
    text-align: center;
}
#A1 { display: grid; }
#A2, #A3, #B1, #B2, #B3 { display: none; }

<header class="header">
        <h1>Header</h1>
    </header>
    <nav class="nav">
        <h2>Nav</h2>
        <button class="button-nav" onclick="displayItemA()">item-A</button>
        <button class="button-nav" onclick="displayItemB()">item-B</button>
    </nav>
    <div>
        <section class="section">
            <h3>Section</h3>
            <br />
            <nav class="sub-nav" id="item-A">
                <button class="button-nav" onclick="displayA1()">A1</button>
                <button class="button-nav" onclick="displayA2()">A2</button>
                <button class="button-nav" onclick="displayA3()">A3</button>
            </nav>
            <nav class="sub-nav" id="item-B">
                <button class="button-nav" onclick="displayB1()">B1</button>
                <button class="button-nav" onclick="displayB2()">B2</button>
                <button class="button-nav" onclick="displayB3()">B3</button>
            </nav>
        </section>
        <main class="main">
            <h3>Main</h3>
            <div id="A1">These are the contents of A1.</div>
            <div id="A2">These are the contents of A2.</div>
            <div id="A3">These are the contents of A3.</div>
            <div id="B1">These are the contents of B1.</div>
            <div id="B2">These are the contents of B2.</div>
            <div id="B3">These are the contents of B3.</div>
        </main>
    </div>

You can also test the code at enter link description here so you can see it on a larger viewport.

Update: I made the items in the "section" area blank by default as per the OP's request. This was done by changing the value of the display of "#item-A" to "none" in the CSS file.

Answer 2

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?