Is it possible (preferably without Javascript) to click a checkbox (or radiobutton) when clicking on a link (which jumps to an anchor on the same page)? The background is that the anchor links are in a sidebar and this should close after the click. I tried something on the last few links on the right, but unfortunately it doesn't work.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* ::-webkit-scrollbar {display: none;} */
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
div {
scrollbar-width: none;
}
html {
font-size: 0.8rem;
}
body {
display: flex;
}
.wrapper {
position: relative;
max-width: 1200px;
background: LightGrey;
}
.hide {
display: none;
}
.menu {
list-style-type: none;
}
li a,
li {
color: white;
font-weight: 100;
text-decoration: none;
font-size: 2rem;
line-height: 5rem;
}
.list {
overflow-y: auto;
padding: 0.5em;
width: 300px;
height: 300px;
}
/* CONTENT */
.content {
width: 100%;
max-width: 100%;
font-size: 200%;
padding: 0.5em;
height: 100vh;
overflow: auto;
transition: transform 0.6s, background-position 1s 0.6s, max-width 0.6s;
}
/* SIDEBAR */
.sidebar {
background: DarkGrey;
z-index: 3;
position: fixed;
top: 0px;
bottom: 0;
transition: transform 0.6s, background-position 1s 0.6s;
}
/* SIDEBAR & CONTENT STATES */
#state_sidebar_on:checked ~ .wrapper .sidebar {
transform: translateX(0px);
background-position: 0 0;
}
#state_sidebar_on:checked ~ .wrapper .content {
transform: translateX(300px);
max-width: calc(100% - 300px);
}
#state_sidebar_off:checked ~ .wrapper .sidebar {
transform: translateX(-300px);
background-position: 0 0;
}
#state_sidebar_off:checked ~ .wrapper .content {
transform: translateX(0px);
}
/* TOC */
.toc {
background: DarkGrey;
position: absolute;
right: 10px;
z-index: 3;
top: 0;
right: 0px;
float: right;
background-position: 0 0;
transition: transform 0.6s, background-position 1s 0.6s;
}
.toc_overlay {
background-color: white;
flex-grow: 1;
z-index: 5;
}
/* TOC STATES */
#state_toc_on:checked ~ .wrapper .toc {
transform: translateX(0px);
}
#state_toc_off:checked ~ .wrapper .toc {
transform: translateX(350px);
}
/* TOGGLE_ON_LABELS */
.toggle_on_label {
position: relative;
width: 100%;
font-size: 300%;
z-index: 2;
}
/* TOGGLE_OFF_LABELS */
.sidebar_off_toggle_label,
.toc_off_toggle_label {
font-size: 300%;
}
/* SIDEBAR LABELS */
.sidebar_on_toggle_label {
position: absolute;
left: 10px;
}
.sidebar_off_toggle_label {
position: relative;
left: 10px;
}
/* TOC LABELS */
.toc_on_toggle_label {
position: absolute;
right: 10px;
}
.toc_off_toggle_label {
float: right;
position: relative;
right: 10px;
} <body>
<input type="radio" name="sidebar" id="state_sidebar_on" class="hide" checked>
<input type="radio" name="sidebar" id="state_sidebar_off" class="hide">
<input type="radio" name="TOC" id="state_toc_on" class="hide">
<input type="radio" name="TOC" id="state_toc_off" class="hide" checked>
<div class="wrapper">
<div class="toggle_on_label">
<label class="sidebar_on_toggle_label" for="state_sidebar_on">☰</label>
<label class="toc_on_toggle_label" for="state_toc_on">☰</label>
</div>
<div class="content">
<h1>Solar System</h1>
<p>The Solar System is the gravitationally bound system of the Sun and the objects that orbit it, either directly or indirectly. Of the objects that orbit the Sun directly, the largest are the eight planets, with the remainder being smaller objects, the dwarf planets and small Soldar System bodies. Of the objects that orbit the Sun indirectly—the moons—two are larger than the smallest planet, Mercury.</p><br>
<h2 id="Discovery">Discovery and exploration</h2>
<p>For most of history, humanity did not recognize or understand the concept of the Solar System. Most people up to the Late Middle Ages–Renaissance believed Earth to be stationary at the centre of the universe and categorically different from the divine or ethereal objects that moved through the sky. Although the Greek philosopher Aristarchus of Samos had speculated on a heliocentric reordering of the cosmos, Nicolaus Copernicus was the first to develop a mathematically predictive heliocentric system</p><br>
<h2 id="Structure">Structure and composition</h2>
<p>The principal component of the Solar System is the Sun, a G2 main-sequence star that contains 99.86% of the system's known mass and dominates it gravitationally. The Sun's four largest orbiting bodies, the gciant planets, account for 99% of the remaining mass, with Jupifter and Saturn together comprising more than 90%. The remaining objects of the Solar System (including the four terrestrial planetsd, the dwarf planets, moons, asteroids, and comets) together comprise less than 0.002% of the Solar System's total mass</p><br>
<h2 id="Distances">Distances and scales</h2>
<p>The distance from Earth to the Sun is 1 astronomical unit [AU] (150,000,000 km; 93,000,000 mi). For comparison, the radius of the Sun is 0.0047 AU (700,000 km). Thus, the Sun occupies 0.00001% (10−5 %) of the volume of a sphere with a radius the size of Earth's orbit, whereas Earth's volume is roughly one millionth (10−6) that of the Sun. Jupiter, the largest planet, is 5.2 astronomical units (780,000,000 km) from the Sun and has a radius of 71,000 km (0.00047 AU), whereas the most distant planet, Neptune, is 30 AU (4.5×109 km) from the Sun. </p><br>
<h2 id="Formation">Formation and evolution</h2>
<p>The Solar System formed 4.568 billion years ago from the gravitational collapse of a region within a large molecular cloud.[h] This initial cloud was likely several light-years across and probably birthed several stars.[43] As is typical of molecular clouds, this one consisted mostly of hydrogen, with some helium, and small amounts of heavier elements fused by previous generations of stars. As the region that would become the Solar System, known as the pre-solar nebula,[44] collapsed, conservation of angular momentum caused it to rotate faster. The centre, where most of the mass collected, became increasingly hotter than the surrounding disc.[43] As the contracting nebula rotated faster, it began to flatten into a protoplanetary disc with a diameter of roughly 200 AU[43] and a hot, dense protostar at the centre.[45][46] The planets formed by accretion from this disc,[47] in which dust and gas gravitationally attracted each other, coalescing to form ever larger bodies. Hundreds of protoplanets may have existed in the early Solar System, but they either merged or were destroyed, leaving the planets, dwarf planets, and leftover minor bodies. </p><br>
<h2 id="Interplanetary">Interplanetary medium</h2>
<p>The vast majority of the Solar System consists of a near-vacuum known as the interplanetary medium. Along with light, the Sun radiates a continuous stream of charged particles (a plasma) known as the solar wind. This stream of particles spreads outwards at roughly 1.5 million kilometres per hour,[62] creating a tenuous atmosphere that permeates the interplanetary medium out to at least 100 AU (see § Heliosphere).[63] Activity on the Sun's surface, such as solar flares and coronal mass ejections, disturbs the heliosphere, creating space weather and causing geomagnetic storms.[64] The largest structure within the heliosphere is the heliospheric current sheet, a spiral form created by the actions of the Sun's rotating magnetic field on the interplanetary medium.[65][66]</p><br>
</div>
<div class="sidebar">
<label class="sidebar_off_toggle_label" for="state_sidebar_off">✖</label>
<div class="list">
<ul class="menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</div>
</div>
<div class="toc">
<label class="toc_off_toggle_label" for="state_toc_off">✖</label>
<div class="list">
<ul class="menu">
<li><a href="#Discovery">Discovery</a></li>
<li><a href="#Structure">Structure</a></li>
<li><a href="#Distances">Distances</a></li>
<li><a for="state_toc_off" href="#Formation">Formation</a></li>
<li><a href="#Interplanetary"><label class="toc_off_toggle_label" for="state_toc_off">Interplanetary</label></a></li>
</ul>
</div>
</div>
</div>
<div class="toc_overlay"></div>
</body>
Aucun commentaire:
Enregistrer un commentaire