0

I'm making a Windows 95 start menu only in CSS, without all of the JavaScript needed. But, when I try to use visibility in the checkbox hack, it doesn't work. This is what it should be: What it should be This is what I got: What I got This is my code:

@font-face {
  font-family: "MS Sans Serif";
  font-weight: normal;
  src: url("./mssansserif.woff2") format("woff2");
}

@font-face {
  font-family: "MS Sans Serif";
  font-weight: bold;
  src: url("./mssansserif-bold.woff2") format("woff2");
}

.taskbar {
  font-family: "MS Sans Serif", sans-serif;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 0px;
  box-sizing: border-box;
  background-color: #C0C0C0;
}

.taskbar>* {
  box-sizing: border-box;
}

.start {
  border-style: solid;
  border-image: url("./start.png") 3;
  border-width: 3;
  background-color: #C0C0C0;
  padding: 0px;
  display: block;
  height: 233px;
  visibility: collapse;
}

.start:before {
  position: relative;
  content: "";
  background: url("./branding.png") no-repeat;
  background-size: 21px 233px;
  display: block;
  width: 21px;
  height: 233px;
  float: left;
}

.menu {
  position: relative;
  background-color: #C0C0C0;
  border-style: solid;
  border-image: url("./button.png") 3;
  border-width: 3;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 20px;
  padding-right: 1px;
  margin: 0px;
  font-size: 10px;
  font-weight: bold;
  line-height: 14px;
  height: 22px;
  appearance: button;
  -moz-appearance: button;
  -webkit-appearance: button;
}

.menu:before {
  position: absolute;
  content: "";
  background: url("./windows.png") no-repeat;
  background-size: 16px 14px;
  background-position: center;
  display: block;
  width: 16px;
  height: 14px;
  float: left;
  padding-right: 6px;
  margin: 0px;
  left: -2px;
}

.menu:active {
  border-image: url("./button-pressed.png") 3;
}

#menu {
  margin: 0px;
  padding: 0px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

#menu:checked~.menu {
  border-image: url("./button-pressed.png") 3;
}

#menu:checked~* .start {
  visibility: visible;
}
<html>

<head>
  <title>Start Menu</title>
  <link rel="stylesheet" href="./start.css">
  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
  <div class="start">
    <div>test</div>
  </div>
  <div class="taskbar">
    <input type="checkbox" id="menu">
    <label for="menu" class="menu">Start</label>
  </div>
</body>

</html>

Did I did something wrong?

Pete
  • 54,116
  • 25
  • 104
  • 150
Leap of Azzam
  • 161
  • 1
  • 2
  • 6
  • 1
    your start div is before your checkbox and is on the parent level - sibling selectors only go forwards and there is no parent selector. if you wanted this to work, you would need to move the checkbox to before the start div so you could use `~ .start` and then style the menu using `~ .taskbar .menu` – Pete Aug 19 '21 at 14:33

0 Answers0