Best way to create left menu?

HTML & CSS
21

I guess that the you are referring to the
<input type="radio"> in your pen. :winky:

This element does not need to “fit”, as it
will be activated by the label element
wherever that happens to be positioned. :biggrin:

coothead

22

@DaveMaxwell,

I was just relaying @coothead question on to you.

I wasn’t commenting one way or the other.

23

And you basically knew the answer of why…no need to get me involved in something like that :shifty:

24

No, I have nothing to comment on @Coothead’s critique of the code you posted. I’m sure either way works and has pros and cons. I just figured you could answer better than me because you understand the code better than me.

Makes no difference to me - your solution works just fine in my mind.

25

All I was trying to do was just point out that clicking on the
label “for” an input is the same as clicking that input.

Understanding that, will make the CSS very much simpler. :winky:

coothead

27

I liked the versatility of 'coothead’s answer the best.

If the requirements were changed such that multiple selections were allowed
and multiple displays were needed, a small change of the IDs to CLASS
and the TYPE to allow radio or checkbox, the code would look like:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title> Pick/Menu-Flexbox RBtn/CBox </title>
<!-- From: https://www.sitepoint.com/community/t/best-way-to-create-left-menu/342760/25 -->
<style media="screen">
 body {
    background-color: #f9f9f9;
    font: normal 1em / 1.5em;
 }
 .books {
     display: flex;
     flex-wrap: wrap;
     padding: 0;
     margin: 1.5em 0 0;
     list-style: none;
 }
 .books li {
     width: 8em;
     margin:0.5em;
 }
 .books input {
    position: absolute;
    left: -999em;
 }
 .books label {
    display: block;
    padding: 0.5em 0;
    border: 1px solid #ccc; 
    background: #fff;
    cursor: pointer;
    text-align: center;
 }
 .books label:active,
 .books label:focus,
 .books label:hover { background: #ddd; }
 .books input:checked + label {
    border: 1px solid tan; 
    font-weight: bold;
    background: wheat;
 }
</style>

</head>
<body> 
<h1> Radio Button Version </h1>
 <ul class="books">
  <li>
   <input type="radio" id="PrintRB" name="bookType">
   <label for="PrintRB">Print<br>$15</label>
  </li>
  <li>
   <input type="radio" id="DiscRB" name="bookType">
   <label for="DiscRB">Disc<br>$10</label>
  </li>
  <li>
   <input type="radio" id="eBookRB" name="bookType">
   <label for="eBookRB">eBook<br>$8</label>
  </li>
  <li>
   <input type="radio" id="bothRB" name="bookType" checked="checked">
   <label for="bothRB">Print/eBook<br>$20</label>
  </li>
 </ul>

<h1> Checkbox Version </h1>
 <ul class="books">
  <li>
   <input type="checkbox" id="PrintCB" name="bookType">
   <label for="PrintCB">Print<br>$15</label>
  </li>
  <li>
   <input type="checkbox" id="DiscCB" name="bookType">
   <label for="DiscCB">Disc<br>$12</label>
  </li>
  <li>
   <input type="checkbox" id="eBookCB" name="bookType">
   <label for="eBookCB">eBook<br>$8</label>
  </li>
  <li>
   <input type="checkbox" id="bothCB" name="bookType" checked="checked">
   <label for="bothCB">Print/eBook<br>$20</label>
  </li>
 </ul>

</body>
</html>
1 Like
28

@jmrker,

Wow! That’s some cool code! :+1:

29

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.