As mentioned before, I now have two static sites generated by a *Planet*, Old School RPG Planet and Indie RPG Planet. I wanted these pages to be easy to read from a phone. How to do this?
Screenshot of how it looks on wide screen
The first step is to add a viewport meta element. Don’t ask me why this is necessary. What were mobile browser makers thinking?
I added this to the HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
Next, I wanted the unnumbered list with all the members to be hidden by default, and to show or hide it with a click. The simplest solution (to a simpleton like me) is to use a class attribute on the element I want to toggle.
Thus:
<ul class="hidden"> ... </ul>
And some Javascript to toggle it:
function toggle(elem) {
if (elem.className=="shown") {
elem.className="hidden";
}
else {
elem.className="shown";
}
}
function addMenu() {
var sidebar = document.getElementById('sidebar');
if (!sidebar) return;
var ul = sidebar.getElementsByTagName('ul')[0];
var h2 = sidebar.getElementsByTagName('h2')[0];
if (!ul || !h2) return;
h2.onclick = function(){toggle(ul)};
}
I call `addMenu` when the page loads. It identifies the “Members” heading (the first `h2`) which will be used as a button and it identifies the actual list of members (the first `ul`) which will be toggled. Toggling simply means changing the class attribute from “hidden” to “shown” and back. Everything else happens in the CSS.
/* ------------------------- Small Devices ------------------------- */
@media only screen and (max-width: 1000px) {
body {
margin: 0.2em;
}
.news .content {
padding: 0;
margin: 0;
}
#sidebar {
float: none;
width: 100%;
padding: 0;
margin: 0;
}
#sidebar ul {
list-style: none;
display: none;
}
#sidebar ul.shown {
display: block;
}
#sidebar ul.hidden {
display: none;
}
#sidebar li {
float: left;
width: 100%;
white-space: nowrap;
}
/* hide INFO */
#sidebar h2, #sidebar dl, #sidebar form {
display: none;
}
#sidebar h2, #sidebar dl, #sidebar form {
display: none;
}
/* show MEMBERS */
#sidebar h2:first-of-type {
display: block;
background: #ddd;
margin: 0.5em;
cursor: pointer;
}
}
As you can see, I’m setting a few borders and paddings to smaller values or to zero in order to not waste any space, and most importantly, the `display` property of the list changes depending on the class attribute.
All of this is wrapped in a selector for narrow screens, which in this case means anything less than 1000px wide. Which you trigger on the Desktop by simply making your browser window narrow.
Also, if your Javascript is disabled, the list is hidden and remains hidden. I think that’s a good default.
And in a text browser, the list is present. But it’s OK because there’s a “Skip to content” link at the very top.
#Web #CSS
(Please contact me if you want to remove your comment.)
⁂
@tomasino offers a different solution without JavaScript using a checkbox and the `:checked` pseudo class. He posted a codepen demo, too. Thanks!
And I used it for the two Planets,too!
The HTML now looks as follows:
<h2><label for="toggle">Members</label></h2> <input type="checkbox" id="toggle"/> <ul id="toggled"> ... </ul>
And the CSS stripped down to its essentials looks as follows:
#toggle {
display: none;
}
@media only screen and (max-width: 1000px) {
#sidebar ul {
display: none;
}
#sidebar h2 label:before {
content: "☰ ";
font-size: 1.2em;
}
#sidebar h2 label:hover {
cursor: pointer;
}
#toggle:checked ~ #toggled {
display: block;
}
}
In a text browser, the checkbox remains visible:
# Indie RPG Planet (p1 of 40)
#Indie RPG Planet
Skip to content
Indie RPG Planet
What is this?
Members
[ ]
* (feed) Alex Schroeder
* (feed) Burn After Running
* (feed) Doom Rides
* (feed) FASA Games, Inc.
* (feed) Red Moose Games
* (feed) Space·Time Will Tell
* (feed) Spouting Lore
* (feed) Step into RPGs
* (feed) Take on Rules
* (feed) Thoughty
* (feed) UFO Press
For browsers without CSS support, the useless checkbox remains visible, of course.
– Alex Schroeder 2018-10-25 20:17 UTC