Comments on 2018-10-25 Web Design for Simpletons

@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


Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. Note: in order to facilitate peer review and fight vandalism, we will store your IP number for a number of days. See Privacy Policy for more information. See Info for text formatting rules. You can edit this page if you need to fix typos. You can subscribe to updates by email without leaving a comment.

To save this page you must answer this question:

Please say HELLO.