multiple pages in one html file without fixed nav on each page

Question

Main page would only have several buttons that will show the user designated content.

Those buttons in #home is not in header, so buttons will be only shown on #home only.

<section id="home">
  <a href="#content">content</a>
  <a href="#something">something</a>
  <a href="#someelse">someelse</a>
</section>
<section id="content">
<section id="something">
<section id="someelse">

I found :target method on css which seems very easy to use and works ok, but #home is not displaying. It seems like it would only work when I have a fixed header outside section

section {
  display: none;
}
section:target {
  display: block;
}

Each section other than #home will have back button which will send user to #home as well. This was fairly easy on :target method because I just used a href="#", and it worked.

What other method would I be able to use ?

So you want #home to show by default when the header is like www.example.com/html.html and then show the others when it's specified like www.example.com/html.html#content? — Jack
– Jack, Commented Apr 1, 2020 at 1:15
@JackStoller Yes, so www.example.com will show #home content which would be just buttons for other contents, and after button is clicked, it will be www.example.com#content and will show the #content content. — Hobbit Y
– Hobbit Y, Commented Apr 1, 2020 at 1:22

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

I can't think of any pure CSS ways to do this, but it can easily be done with a little JavaScript to check if the hash is empty, and then show #home and hide it when there is a value.

window.onhashchange = checkHash;

checkHash();

function checkHash() {
  var home = document.getElementById('home');

  //Check if the hash is empty
  if (window.location.hash.substring(1) == '') {
    home.style.display = 'block';
  } else {
    home.style.display = 'none';
  }
}

.section {
  display: none;
}

.section:target {
  display: block !important;
}

<div id="home" class="section">
  <a href="#content">Content</a>
  <a href="#somthingElse">Somthing Else</a>
  <h3>Home</h3>
</div>
<div id="content" class="section">
  <a href="#home">Home</a>
  <h3>Content</h3>
</div>
<div id="somthingElse" class="section">
  <a href="#home">Home</a>
  <h3>Somthing Else</h3>
</div>

Fade

I used position: absolute so they will stack on top of each other. z-index: -1 will keep all the rest of the sections to the clear back to stop pointer events from overlapping. opacity: 0 was obviously used for the fade.

I changed the JS script to simplify my CSS. Now when you go to example.com/html.html you get redirected to example.com/html.html#home (without a history change for the back button).

window.onhashchange = checkHash;

checkHash();

function checkHash() {
  //Check if the hash is empty
  if (window.location.hash.substring(1) == '') {
    history.replaceState(undefined, undefined, "#home")
  }
}

.section {
  position: absolute;
  z-index: -1;
  
  opacity: 0;
  
  transition: opacity 0.5s;  
}

.section:target {
  z-index: 1;

  opacity: 1;
}

<div id="home" class="section">
  <a href="#content">Content</a>
  <a href="#somthingElse">Somthing Else</a>
  <h3>Home</h3>
</div>
<div id="content" class="section">
  <a href="#home">Home</a>
  <h3>Content</h3>
</div>
<div id="somthingElse" class="section">
  <a href="#home">Home</a>
  <h3>Somthing Else</h3>
</div>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 1, 2020 at 1:36

Jack

2,0091 gold badge15 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hobbit Y Over a year ago

Thanks ! This was exactly I needed. Just wondering, if I were to add some transitions between pages, should I do some extra javascript? or just putting transition under section would work?

Jack Over a year ago

It depends on your transition. display cannot be animated. If you want a fade, you'll have to use opacity and something else to stop clicks (display, z-index, etc.) If you want a slide in/out you could use either margin or transform: translate(). Zoom in/out would be transform: scale(). Anything else would probably require a CSS animation. If you want a certain style I could edit my answer with it.

Hobbit Y Over a year ago

I was thinking only about bit of fade. I tried with opacity, but it didn't work for me :(. if it doesn't bother you too much, editing answer would be super appreciated.

Jack Over a year ago

@HobbitY Ok, see my edit. I think that is what you're looking for.

Collectives™ on Stack Overflow

multiple pages in one html file without fixed nav on each page

1 Answer 1

Fade

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Fade

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related