Creating a single HTML file with multiple pages, each without a fixed navigation bar on the page

The main page will feature just a few buttons that will display specific content to the user.

These buttons within #home will not be in the header, so they will only be visible on the #home section.

<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 discovered the :target method in CSS which is simple to use and works well, but the #home section does not appear. It seems like it will only function correctly with a fixed header outside the section element.

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

Each section other than #home will have a back button that redirects the user back to the #home section. This was easily achieved using the :target method by simply using a href="#", and it worked effectively.

Are there any other methods I could utilize for this purpose?

javascriptjqueryhtmlcss

Answer №1

While there may not be a pure CSS solution for this problem, it can be easily achieved using JavaScript to check the hash value and toggle the display of elements accordingly. Here is an example implementation:

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">Something Else</a>
  <h3>Home</h3>
</div>
<div id="content" class="section">
  <a href="#home">Home</a>
  <h3>Content</h3>
</div>
<div id="somethingElse" class="section">
  <a href="#home">Home</a>
  <h3>Something Else</h3>
</div>

Fade Animation

To create a fade effect, I used position: absolute to stack sections on top of each other. Adding z-index: -1 keeps all sections in the background to prevent overlapping pointer events. The opacity was set to 0 to achieve the fade effect.

I also updated the JavaScript to simplify the CSS. Now, when visiting example.com/html.html, you will be redirected to example.com/html.html#home without affecting the back button history.

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="#somethingElse">Something Else</a>
  <h3>Home</h3>
</div>
<div id="content" class="section">
  <a href="#home">Home</a>
  <h3>Content</h3>
</div>
<div id="somethingElse" class="section">
  <a href="#home">Home</a>
  <h3>Something Else</h3>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

NPM: The registry cannot be found

npm http GET https://registry.npmjs.org/n npm ERR! Error: failed to fetch from registry: n npm ERR! at /usr/share/npm/lib/utils/npm-registry-client/get.js:139:12 npm ERR! at cb (/usr/share/npm/lib/utils/npm-registry-client/request.js:31:9) npm ERR ...

javascriptnode.jsnpm

Looking to incorporate HTML and JavaScript to create two unique forms that can be submitted separately on a single webpage

If I can't find an answer, then I ask: There are two different forms on the page: one is the "ask for call" form (which appears on every page of the site) and the other is a simple "contact form" (specifically placed on the contact page). Both forms ...

javascriptjqueryhtmlforms

Can Angular toggle visibility of static HTML content?

My website needs to display different services with well-formatted HTML code already in place. I want to show only one service's description at a time, with the option to switch between them by clicking on different service categories. I feel like I ...

javascripthtmlangularjs

Is it possible to generate an HTML element by utilizing an array of coordinates?

I have a set of 4 x/y coordinates that looks like this: [{x: 10, y: 5}, {x:10, y:15}, {x:20, y:10}, {x:20, y:20}] Is there a way to create an HTML element where each corner matches one of the coordinates in the array? I am aware that this can be done usi ...

javascripthtmlcss

What is the process for creating a List Grid View utilizing this particular code?

I attempted to modify the stylesheet extensively and also created a small function in JavaScript, but unfortunately it did not yield the desired results. <div class="row featured portfolio-items"> <div class="item col-lg-5 col-md-12 col-xs ...

htmlcss

Center the div and make it position fixed

Is there a way to position a div in the center of the screen or its parent div, and have it fixed so that it does not shift when its width changes? I have a div containing a table, as shown below: https://i.sstatic.net/OVh2y.png I'm unsure if the oute ...

htmlcss

Utilizing exclusively CSS for parent div, achieve dynamic resizing animation

I want to create a transition effect on the parent div when the child div disappears without using display:none My goal is to have a dynamically centered div that animates using CSS transitions only. Here is my current approach. document.querySelector ...

htmlcsscss-transitions

What is the best way to showcase JSON data on a webpage?

Currently, I have a total of 3 different objects containing education details in my JSON data. While I am able to display them in the console using a for loop, I am only able to show one object in my HTML output. How can I push all three details to my HTML ...

javascriptjqueryarraysjson

Serialize jQuery value to PHP code

I am relatively new to the world of incorporating jQuery with PHP. Recently, I experimented with the nestedsortable plugin from jQuery and managed to successfully integrate it into my kohana 2.3.4 framework. However, I am now faced with the challenge of tr ...

jqueryserializationkohana

Clicking on ng-click doesn't result in opening new windows

I am experiencing an issue with a table where the buttons in the last column are supposed to open a new window but they are not working as expected. Below is the code snippet I am using: <table class="table table-hover" id="angular_table"> <th ...

javascripthtmlangularjsangularjs-ng-click

What is the best way to create a border that surrounds a collection of pictures?

I'm currently facing a challenge in getting a border to perfectly fit around a collection of images. The issue can be observed in this Jsfiddle I shared, where the border aligns with the top and left edges, but not with the bottom and right edges. Her ...

htmlcssimageborder

The code is throwing a SyntaxError because it encountered an unexpected character in the JSON file at position 650xx

I am encountering an issue when attempting to save a JSON-formatted file from within the Javascript app I am developing. The app is running on Node v6.11.0 with Express on my local machine, port 3000. Occasionally, I come across the following error: Synta ...

javascriptnode.jsjsonstringify

Tips for utilizing a received variable within an ejs document

I am currently attempting to update the content of an HTML element in an EJS file with a variable that I have defined in a JavaScript file. let checkbox = document.querySelector('input[name="plan"]'); checkbox.addEventListener('ch ...

javascriptnode.jsexpressvariablesejs

Personalized FileInput within a card - Bootstrap 5

I am attempting to incorporate a custom file selection feature within a Bootstrap card: Here is my attempt: <style> label { cursor: pointer; } .custom-input-image { opacity: 0; position: absolute; z-index: -1; } </style> <div ...

htmlcssbootstrap-5

"Encountering a bug with setting the pixel ratio in Three.js on IOS

I am currently working on a three.js website where I load a json file using ObjectLoader. Everything works perfectly on all platforms: Windows with all desktop browsers, and Android phones with all browsers. However, IOS (specifically iPad Air) is causing ...

javascript3dthree.js

NodeJS is constantly refreshing the data in the database table

Every day, I use a cron job to scrape data and insert it into a database. However, I'm facing an issue where the database results on the server do not refresh themselves after new data is inserted. I've come across 2 solutions here, but one was ...

javascriptmysqlnode.jsexpresscron

Issue with async.js hanging while calling mongoose save method in waterfall approach

I am encountering an issue with the async waterfall method in my code. When it reaches a certain function, it seems to hang. I suspect that the save() operation is taking too long for the execution context. I started using async's waterfall to ensure ...

javascriptnode.jsasynchronousexpressmongoose

Creating Swagger clients from scratch

I am working on a project that is based on npm and I am looking to add a swagger-based REST API client. My plan is to use a yaml file for the API description and generate the client during the build process. Are there any popular methods or tools for acc ...

javascriptnpmswaggerswagger-codegen

What causes my ajax function to not be asynchronous and instead reload the page?

I am attempting to add a button to my webpage that will trigger an alert with certain data without causing the page to refresh. The data in question is a password, which is why I prefer not to have it hardcoded in the code. Here is the structure of my cur ...

phpjqueryajax

What could be causing the issue of React not showing the messages of "hello" or "goodbye"?

I have a page with a single button that is supposed to display either "hello world" or "goodbye world" when clicked. However, I am facing issues as the messages are not showing up as expected. Below is a screenshot of what the menu items look like when ca ...

javascriptreactjs