The anchor links work but back button does not make it go back.
It works fine in this simplified version, or just removing the fauxBody div:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
name="viewport"
content="width=device-width,height=device-height,initial-scale=1"
>
</head><body>
<header id="top">
<h1>Night and Day</h1>
<div id="mainMenu">
<div><nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#submenu">Sub Menu</a></li>
<li><a href="#search">Search</a></li>
<li><a href="#login">Log In</a></li>
<li class="nightAndDay" hidden aria-hidden="true">
<label for="toggle_nightAndDay"></label>
</li>
</ul>
</nav></div>
<!-- #mainMenu --></div>
</header>
<main>
<ul>
<li>
<a href="#disadvantages">
Disadvantages
</a>
</li><li>
<a href="#advantages">
Advantages
</a>
</li><li>
<a href="#notes">
Notes
</a>
</li>
</ul>
<h2 id="toggling">Toggling Your Colour Scheme</h2>
<p>
This demo shows how a simple hidden <code><input type="checkbox"></code> combined with a <code><label></code> can be combined to toggle the entire colour scheme of your layout via CSS3 variables.
</p><p>
In the main menu above (or in the mobile modal) click on "day mode" or "night mode" to switch between the two states.
</p>
<h3 id="disadvantages">Disadvantages</h3>
<p>
The only major disadvantage being that IE doesn't know what CSS variables are, and that Chakra based Edge can't handle full properties -- like "1px solid #0003" -- as variables. Since Chakra Edge is now dead replaced by a Blink based <em>(aka "chrome-like")</em> version, and IE users really should expect a degraded experience, I think it's time to tell them where to stick it on full 100% support.
</p><p>
<strong>I'm not saying</strong> not to support said browsers, simply feed them a degraded experience. As any good site should use semantic markup, I say just stop feeding them CSS and JS altogether. Easiest way to do that? Use X-UA to tell IE to pretend to be IE9/earlier, which turns on conditional comments.
</p>
<h3 id="advantages">Advantages</h3>
<p>
Most of the heavy lifting is CSS driven, with only the state change of the checkbox being tracked in localstorage by JavaScript.
</p><p>
As it is almost entirely CSS driven, you do not need to play with the JavaScript or the markup to make any changes.
</p>
<h2 id="notes">Notes</h2>
<p>
This page includes the modal dialog function for hamburger menus and a sub-menu/search/login to demonstrate how the colour inherits to those as well. See <a href="https://levelup.gitconnected.com/modal-dialog-driven-websites-without-javascript-16e858615780">my Medium article about modal driven pages</a> for more information about that part of the code.
</p>
</main>
<footer>
<section>
<h2>Night and Day Demo</h2>
Jason M. Knight, September 2020<br>
<em>Released to the Public Domain</em>
</section><section>
<h2>Links</h2>
<ul>
<li><a href="https://medium.com/@deathshadow/day-night-colour-switching-using-css3-variables-and-minimal-vanilla-javascript-a54fa36c550f">Medium article explaining this</a></li>
<li><a href="#"><a href="https://cutcodedown.com/for_others/medium_articles/nightAndDay/nightAndDay.rar">.RAR of this page</a></li>
</ul>
</section>
</footer>
<!-- #fauxInner, #fauxBody --></div></div>
<div id="submenu" class="modal modalMenu">
<div><nav>
<h2>Sub Menu</h2>
<div>
<ul>
<li><a href="#search">Search</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</nav></div>
<!-- #submenu.modal.menu --></div>
<!-- same for JavaScript, let IE gracefully degrade -->
</body></html>
Topic: Broken anchor navigation in nightAndDay template (Read 497 times)