[HTML] I don't know what this is called, can someone point me in the right direction to build something like this?

[RockSolid1106]

I need someone to point me in the right direction for this.

I'm into some web-development, and I realized, the settings page for my extension was a bit long/tall. So I thought of dividing the options into groups, to be shown as "menus" and one can switch between these menus by next/back buttons.

Spoiler

 

Menus I will be dividing it into:

 

I want to make something like this:

Spoiler

 

 

 

My first approach to this was to make each of them positioned absolute, essentially positioned one behind the other at the same position, and then only one would have an opacity of 1 while others will be at 0, so only one will be visible. I realized this was getting too complicated.

 

I tried to look up on this but I just cant find any results. I don't know what I'm looking for. What is the term used for this, if any?

I'm pretty sure I will have to use JS here. What are the tools/libraries I could use to make something like this?

 

Thanks!

[jaypro]

Pagination?

[Ababba]

Tabs would be similar.

 

You can use a tick where you use opacity:0 radio inputs attached to a labels styled as a buttons with the for attribute. Clicking would then hide/show each section using a checked selector.

 

.sidebar {
    display: none;
}

input[name="sidebar"]:checked ~ .sidebar {
    display: block;
}

 

[mariushm]

You could also just have each page in a div with a unique id  example "page01" , "page02" etc  and on bottom you have previous  and next  buttons with a javascript function on them. 

The function reads the display attribute of each div and sets only one at a time to display:block, and the rest to display:none; 

 

You could probably have some CSS rules to make a transition effect when the div is hidden or shown .. see as an inspiration : https://medium.com/cloud-native-the-gathering/how-to-use-css-to-fade-in-and-fade-out-html-text-and-pictures-f45c11364f08

 

[RockSolid1106]

9 hours ago, jaypro said:

Pagination?

Thanks, that looks like the term I was looking for. While not in this project, that will definitely be useful in future ones with more pages to deal with.

 

8 hours ago, mariushm said:

You could also just have each page in a div with a unique id  example "page01" , "page02" etc  and on bottom you have previous  and next  buttons with a javascript function on them. 

The function reads the display attribute of each div and sets only one at a time to display:block, and the rest to display:none; 

 

You could probably have some CSS rules to make a transition effect when the div is hidden or shown .. see as an inspiration : https://medium.com/cloud-native-the-gathering/how-to-use-css-to-fade-in-and-fade-out-html-text-and-pictures-f45c11364f08

 

Thanks for this. I got it to work pretty well. I applied a display of block on one and none on the rest, as you mentioned, and then played around with some transforms and opacity to get this:

Spoiler

 

 

 

Code:

Spoiler

HTML:

    <div class="menu-placeholder">
      <div class="main-menu menus" id="main-menu">
        <div class="menu-buttons">
          <center><input type="button" class="main-menu-buttons" id="sidebar-button" value="Sidebar" >
          <input type="button" class="main-menu-buttons" id="profile-button" value="Profile">
          <input type="button" class="main-menu-buttons" id="forums-button" value="Forums">
          <input type="button" class="main-menu-buttons" id="advanced-button" value="Advanced Options"></center>
        </div>
      </div>
      <div class="menus menu-sidebar" id="menu-sidebar">
        <span style="color: #DD6B20; font-family: 'Zilla Slab', serif; font-size: 1.25em; padding: 0; margin: 0.3em;">Sidebar options:</span><br>
        <label><input type="checkbox" id="ad">Hide Ad</label><br>
        <label><input type="checkbox" id="rtopics">Hide Recent Topics</label><br>
        <label><input type="checkbox" id="featured">Hide the Featured Topics section</label><br>
        <label><input type="checkbox" id="social">Hide LMG Social Links(Discord, LTT merch, etc.)</label><br>
        <label><input type="checkbox" id="vids">Hide All Recent LMG Videos</label><br>
        &nbsp&nbsp<label><input type="checkbox" id="ltt">Linus Tech Tips</label><br>
        &nbsp&nbsp<label><input type="checkbox" id="tq">TechQuickie</label><br>
        &nbsp&nbsp<label><input type="checkbox" id="tl">TechLinked</label><br>
        &nbsp&nbsp<label><input type="checkbox" id="sc">ShortCircuit</label><br>
        &nbsp&nbsp<label><input type="checkbox" id="ma">Mac Address</label><br>
        &nbsp&nbsp<label><input type="checkbox" id="csf">Channel Super Fun</label><br><br>

        <br><center><input type="button" value="Back" class="backbutton">&nbsp&nbsp<input type="button" value="Submit" class="submitbutton"></center>

      </div>

      <div class="menus menu-profiles" id="menu-profiles">
        <span style="color: #DD6B20; font-family: 'Zilla Slab', serif; font-size: 1.25em; padding: 0; margin: 0.3em;">Misc:</span><br>
        <label><input type="checkbox" id="mbadges">Hide the rank icons in the member profiles</label><br>
        <label><input type="checkbox" id="mrank">Replace the "Member" with the user's rank</label><br>
        <label><input type="checkbox" id="replpcount">Replace the post count with complete post count</label><br>
        <label><input type="checkbox" id="soln">Remove the solutions count</label><br>
        <label><input type="checkbox" id="group">Hide member group (Moderator, Administrator, etc)</label><br>
        <label><input type="checkbox" id="location">Show the location below member's profiles</label><br>
        <label><input type="checkbox" id="level">Show your level/rank in the profile dropdown</label><br><br>
        <br><center><input type="button" value="Back" class="backbutton">&nbsp;&nbsp;<input type="button" value="Submit" class="submitbutton"></center>

      </div>
      <div class="menus menu-forums" id="menu-forums">
        <span style="color: #DD6B20; font-family: 'Zilla Slab', serif; font-size: 1.25em; padding: 0; margin: 0.3em;">Forums:</span><br>
        <label><input type="checkbox" id="hideofficial">Hide LTT Official forum</label><br>
        <label><input type="checkbox" id="moveinfo">Move Forum Information to The Hub</label><br>
        <label><input type="checkbox" id="movereleases">Move LTT Releases to The Hub</label><br>
        <label><input type="checkbox" id="moveofficial">Move LTT Official below The Hub</label><br><br>
        <br><center><input type="button" value="Back" class="backbutton">&nbsp;&nbsp;<input type="button" value="Submit" class="submitbutton"></center>

      </div>

      <div class="menus menu-advanced" id="menu-advanced">
        <span style="color: #DD6B20; font-family: 'Zilla Slab', serif; font-size: 1.25em; padding: 0; margin: 0.3em;">Advanced:</span><br>
        <label><input type="checkbox" id="logging">Enable logging for troubleshooting</label><br>
        <br><center><input type="button" value="Back" class="backbutton">&nbsp;&nbsp;<input type="button" value="Submit" class="submitbutton"></center>

      </div>

 

CSS:

/* Anims */
@keyframes menu-fade-in-anim {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes menu-fade-in-anim {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.menu-fade-in {
  transform-origin: center;
  animation: menu-fade-in-anim 300ms ease-out forwards;
  display: block;
}
/*  */
@keyframes menu-fade-out-anim {
  to {
    opacity: 0;
    transform: scale(0.95)
  }
  from {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes menu-fade-out-anim {
  to {
    opacity: 0;
    transform: scale(0.95)
  }
  from {
    opacity: 1;
    transform: scale(1);
    
  }
}

.menu-fade-out {
  transform-origin: center;
  animation: menu-fade-out-anim 300ms ease-out forwards;
  display: none;
}

 

JS:

document.getElementById("sidebar-button").addEventListener("click", handle_change_sidebar)
document.getElementById("profile-button").addEventListener("click", handle_change_profile)
document.getElementById("forums-button").addEventListener("click", handle_change_forums)
document.getElementById("advanced-button").addEventListener("click", handle_change_advanced)
Array.from(document.getElementsByClassName("backbutton")).forEach((e) => {e.addEventListener("click", handle_back)})
function handle_change_sidebar() {
  Array.from(document.getElementsByClassName("menus")).forEach((e) => {e.style.display = "none"; e.classList.remove("menu-fade-in"); e.classList.add("menu-fade-out")})
  document.getElementById("menu-sidebar").style.display = "block";
  document.getElementById("menu-sidebar").classList.remove("menu-fade-out");
  document.getElementById("menu-sidebar").classList.add("menu-fade-in");

}
function handle_change_profile() {
  Array.from(document.getElementsByClassName("menus")).forEach((e) => {e.style.display = "none"; e.classList.remove("menu-fade-in"); e.classList.add("menu-fade-out")})
  document.getElementById("menu-profiles").style.display = "block";
  document.getElementById("menu-profiles").classList.remove("menu-fade-out");
  document.getElementById("menu-profiles").classList.add("menu-fade-in");
}
function handle_change_forums() {
  Array.from(document.getElementsByClassName("menus")).forEach((e) => {e.style.display = "none"; e.classList.remove("menu-fade-in"); e.classList.add("menu-fade-out")})
  document.getElementById("menu-forums").style.display = "block";
  document.getElementById("menu-forums").classList.remove("menu-fade-out");
  document.getElementById("menu-forums").classList.add("menu-fade-in");
}
function handle_change_advanced() {
  Array.from(document.getElementsByClassName("menus")).forEach((e) => {e.style.display = "none"; e.classList.remove("menu-fade-in"); e.classList.add("menu-fade-out")})
  document.getElementById("menu-advanced").style.display = "block";
  document.getElementById("menu-advanced").classList.remove("menu-fade-out");
  document.getElementById("menu-advanced").classList.add("menu-fade-in");
}

function handle_back() {
  Array.from(document.getElementsByClassName("menus")).forEach((e) => {e.style.display = "none"; e.classList.remove("menu-fade-in"); e.classList.add("menu-fade-out")})
  document.getElementById("main-menu").style.display = "block";
  document.getElementById("main-menu").classList.add("menu-fade-in");
  document.getElementById("main-menu").classList.remove("menu-fade-out");
  Array.from(document.getElementsByClassName("submitbutton")).forEach((e) => {e.value = "SUBMIT"})
}

 

[RockSolid1106]

6 hours ago, Sakuriru said:

 

Thanks, I applied your recommendations to the code. Flexbox seems pretty cool, I should learn a bit about that.

 

I couldn't get onclick to work though. It wouldn't execute the function at all. I tried a console log in there, and it didn't output anything so to me it seems like a limitation from Firefox Addons. I'll have to stick with event listeners here.

 

 

Thanks for taking the time going through the code and making recommendations