CSS отображает неправильный цвет при наведении курсора - PullRequest
Новая
       61

CSS отображает неправильный цвет при наведении курсора

0 голосов
/ 25 мая 2020

У меня очень ограниченные знания о css и html, поэтому при создании веб-сайта я решил go с готовым шаблоном, проблема заключалась в том, что я не знаю, как что-то изменить, если что-то пойдет не так. это файлы html и css:

Я хочу, чтобы ссылка на начало лиги и все, что находится под элементом управления P C, отображались синим цветом при наведении курсора, а не желтым, и я не уверен, что изменить. 

@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}

html:before,
body:before {
  background: linear-gradient(145deg, #00e6b4, #c300ff);
  bottom: 0;
  content: '';
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
}

svg {
  cursor: pointer;
  height: 44px;
  width: 44px;
}

svg path {
  fill: #fff;
}

ol {
  list-style-type: none;
}

a[href] {
  color: #fff;
  position: relative;
  text-decoration: none;
}

a[href]:hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

a[href]:after {
  content: '';
  position: absolute;
  top: 100%;
  height: 4px;
  background: #fff;
  left: 0;
  right: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.menu {
  position: relative;
  width: 250px;
}

.menu__content {
  color: #fff;
  margin: 0;
  padding: 0 0 25px 0;
  position: absolute;
  right: 100%;
  top: 0;
  width: 250px;
  z-index: 2;
}

.menu__toggle-label {
  height: 44px;
  left: 0;
  position: absolute;
  width: 44px;
}

.menu__toggle-label svg {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  z-index: 2;
}

.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu__toggle {
  opacity: 0;
  position: fixed;
}

.menu__toggle:checked~.menu__toggle-label {
  background: rgba(0, 0, 0, 0.65);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
  width: 100vw;
}

.menu__toggle:checked~.menu__toggle-label svg:nth-of-type(1) {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu__toggle:checked~.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transition-delay: 0.925s;
  transition-delay: 0.925s;
}

.menu__toggle:checked~.menu__content {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.menu__toggle:checked~.menu__content .menu-item {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) {
  border-color: red;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) a[href]:after {
  background: red;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) {
  border-color: #86e2d5;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) a[href]:after {
  background: #86e2d5;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) {
  border-color: #f5ab35;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) a[href]:after {
  background: #f5ab35;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) {
  border-color: #1e8bc3;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) a[href]:after {
  background: #1e8bc3;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) {
  border-color: #e26a6a;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) a[href]:after {
  background: #e26a6a;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.225s, 0.875s;
  transition-delay: 0.225s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.275s, 0.875s;
  transition-delay: 0.275s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.325s, 0.875s;
  transition-delay: 0.325s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.375s, 0.875s;
  transition-delay: 0.375s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.425s, 0.875s;
  transition-delay: 0.425s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.475s, 0.875s;
  transition-delay: 0.475s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) {
  -webkit-transition-delay: 0.525s, 0.875s;
  transition-delay: 0.525s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.575s, 0.875s;
  transition-delay: 0.575s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.625s, 0.875s;
  transition-delay: 0.625s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.675s, 0.875s;
  transition-delay: 0.675s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) {
  -webkit-transition-delay: 0.725s, 0.875s;
  transition-delay: 0.725s, 0.875s;
}

.menu__content>.menu-item {
  border-left: 8px solid transparent;
}

.menu__content>.menu-item>a {
  line-height: 44px;
  min-width: 60px;
}

.sub-menu {
  padding: 0 0 0 44px;
}

.menu-item {
  line-height: 44px;
  min-height: 44px;
  padding: 0 12px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.menu-item .menu-item {
  -webkit-transform: translateX(-150%);
  transform: translateX(-150%);
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <nav class="menu">
    <input id="menu__toggle" type="checkbox" class='menu__toggle' />
    <label for="menu__toggle" class="menu__toggle-label">
			<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
			  <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' />
			</svg>
			<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
			  <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
			</svg>
		  </label>
    <ol class='menu__content'>
      <li class="menu-item"><a style="font-size: 30px;" href="http://192.168.1.53">Home</a></li>
      <li class="menu-item">
        <a style="font-size: 30px;" href="#0">PC Control</a>
        <ol class="sub-menu">
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/C_shutdown.cgi">Turn Off PC</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/PC_Lock.cgi">Lock PC</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Start_League.cgi">Start League</a></li>
        </ol>
      </li>
      <li class="menu-item">
        <a style="font-size: 30px;" href="#0">Light Control</a>
        <ol class="sub-menu">
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Light_on.cgi">Turn On light</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Light_off.cgi">Turn off light</a></li>
        </ol>
      </li>
    </ol>
  </nav>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 25 мая 2020

Ваша проблема в том, что вы дали элемент sub li того же класса, что и родительский элемент. Вот почему задействован третий элемент вашего второго главного меню. Быстрое исправление ниже. Но я предлагаю вам изменить имена классов подменю и отредактировать css с этим именем класса. Если вы добавляете новые элементы в будущем, возникают такие проблемы, как 

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) .menu-item:nth-of-type(3) a[href]:after {
  background: #86e2d5;
}


@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}

html:before,
body:before {
  background: linear-gradient(145deg, #00e6b4, #c300ff);
  bottom: 0;
  content: '';
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
}

svg {
  cursor: pointer;
  height: 44px;
  width: 44px;
}

svg path {
  fill: #fff;
}

ol {
  list-style-type: none;
}

a[href] {
  color: #fff;
  position: relative;
  text-decoration: none;
}

a[href]:hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

a[href]:after {
  content: '';
  position: absolute;
  top: 100%;
  height: 4px;
  background: #fff;
  left: 0;
  right: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.menu {
  position: relative;
  width: 250px;
}

.menu__content {
  color: #fff;
  margin: 0;
  padding: 0 0 25px 0;
  position: absolute;
  right: 100%;
  top: 0;
  width: 250px;
  z-index: 2;
}

.menu__toggle-label {
  height: 44px;
  left: 0;
  position: absolute;
  width: 44px;
}

.menu__toggle-label svg {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  z-index: 2;
}

.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu__toggle {
  opacity: 0;
  position: fixed;
}

.menu__toggle:checked~.menu__toggle-label {
  background: rgba(0, 0, 0, 0.65);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
  width: 100vw;
}

.menu__toggle:checked~.menu__toggle-label svg:nth-of-type(1) {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu__toggle:checked~.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transition-delay: 0.925s;
  transition-delay: 0.925s;
}

.menu__toggle:checked~.menu__content {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.menu__toggle:checked~.menu__content .menu-item {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) {
  border-color: red;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) a[href]:after {
  background: red;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) {
  border-color: #86e2d5;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) a[href]:after {
  background: #86e2d5;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) {
  border-color: #f5ab35;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) a[href]:after {
  background: #f5ab35;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) .menu-item:nth-of-type(3) a[href]:after {
  background: #86e2d5;
}


.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) {
  border-color: #1e8bc3;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) a[href]:after {
  background: #1e8bc3;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) {
  border-color: #e26a6a;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) a[href]:after {
  background: #e26a6a;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.225s, 0.875s;
  transition-delay: 0.225s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.275s, 0.875s;
  transition-delay: 0.275s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.325s, 0.875s;
  transition-delay: 0.325s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.375s, 0.875s;
  transition-delay: 0.375s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.425s, 0.875s;
  transition-delay: 0.425s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.475s, 0.875s;
  transition-delay: 0.475s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) {
  -webkit-transition-delay: 0.525s, 0.875s;
  transition-delay: 0.525s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.575s, 0.875s;
  transition-delay: 0.575s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.625s, 0.875s;
  transition-delay: 0.625s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.675s, 0.875s;
  transition-delay: 0.675s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) {
  -webkit-transition-delay: 0.725s, 0.875s;
  transition-delay: 0.725s, 0.875s;
}

.menu__content>.menu-item {
  border-left: 8px solid transparent;
}

.menu__content>.menu-item>a {
  line-height: 44px;
  min-width: 60px;
}

.sub-menu {
  padding: 0 0 0 44px;
}

.menu-item {
  line-height: 44px;
  min-height: 44px;
  padding: 0 12px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.menu-item .menu-item {
  -webkit-transform: translateX(-150%);
  transform: translateX(-150%);
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <nav class="menu">
    <input id="menu__toggle" type="checkbox" class='menu__toggle' />
    <label for="menu__toggle" class="menu__toggle-label">
			<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
			  <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' />
			</svg>
			<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
			  <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
			</svg>
		  </label>
    <ol class='menu__content'>
      <li class="menu-item"><a style="font-size: 30px;" href="http://192.168.1.53">Home</a></li>
      <li class="menu-item">
        <a style="font-size: 30px;" href="#0">PC Control</a>
        <ol class="sub-menu">
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/C_shutdown.cgi">Turn Off PC</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/PC_Lock.cgi">Lock PC</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Start_League.cgi">Start League</a></li>
        </ol>
      </li>
      <li class="menu-item">
        <a style="font-size: 30px;" href="#0">Light Control</a>
        <ol class="sub-menu">
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Light_on.cgi">Turn On light</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Light_off.cgi">Turn off light</a></li>
        </ol>
      </li>
    </ol>
  </nav>
  </body>

</html>
0 голосов
/ 25 мая 2020

Вот он:)

Просто посмотрите на свой CSS на что-то вроде этого: 

menu__toggle:checked~.menu__content .menu-item:nth-of-type(N)

Где N - это число. 1 означает первый элемент для этого типа, 2 - второй элемент и так далее. Чтобы изменить цвет элемента управления P C (второй), просто замените цвет nth-of-type(2) в своем коде.

Подробнее: https://www.w3schools.com/cssref/sel_nth-of-type.asp

@import url("https://fonts.googleapis.com/css?family=Lato");
* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Lato', sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}

html:before,
body:before {
  background: linear-gradient(145deg, #00e6b4, #c300ff);
  bottom: 0;
  content: '';
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
}

svg {
  cursor: pointer;
  height: 44px;
  width: 44px;
}

svg path {
  fill: #fff;
}

ol {
  list-style-type: none;
}

a[href] {
  color: #fff;
  position: relative;
  text-decoration: none;
}

a[href]:hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

a[href]:after {
  content: '';
  position: absolute;
  top: 100%;
  height: 4px;
  background: #fff;
  left: 0;
  right: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.menu {
  position: relative;
  width: 250px;
}

.menu__content {
  color: #fff;
  margin: 0;
  padding: 0 0 25px 0;
  position: absolute;
  right: 100%;
  top: 0;
  width: 250px;
  z-index: 2;
}

.menu__toggle-label {
  height: 44px;
  left: 0;
  position: absolute;
  width: 44px;
}

.menu__toggle-label svg {
  left: 0;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  z-index: 2;
}

.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu__toggle {
  opacity: 0;
  position: fixed;
}

.menu__toggle:checked~.menu__toggle-label {
  background: rgba(0, 0, 0, 0.65);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
  width: 100vw;
}

.menu__toggle:checked~.menu__toggle-label svg:nth-of-type(1) {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.menu__toggle:checked~.menu__toggle-label svg:nth-of-type(2) {
  left: 250px;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
  -webkit-transition-delay: 0.925s;
  transition-delay: 0.925s;
}

.menu__toggle:checked~.menu__content {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}

.menu__toggle:checked~.menu__content .menu-item {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.15s, -webkit-transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) {
  border-color: red;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) a[href]:after {
  background: red;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) {
  border-color: blue;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) a[href]:after {
  background: blue;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) {
  border-color: #f5ab35;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) a[href]:after {
  background: #f5ab35;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) {
  border-color: #1e8bc3;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) a[href]:after {
  background: #1e8bc3;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) {
  border-color: #e26a6a;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) a[href]:after {
  background: #e26a6a;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.225s, 0.875s;
  transition-delay: 0.225s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.275s, 0.875s;
  transition-delay: 0.275s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.325s, 0.875s;
  transition-delay: 0.325s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.375s, 0.875s;
  transition-delay: 0.375s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.425s, 0.875s;
  transition-delay: 0.425s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(3) .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.475s, 0.875s;
  transition-delay: 0.475s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) {
  -webkit-transition-delay: 0.525s, 0.875s;
  transition-delay: 0.525s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(1) {
  -webkit-transition-delay: 0.575s, 0.875s;
  transition-delay: 0.575s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(2) {
  -webkit-transition-delay: 0.625s, 0.875s;
  transition-delay: 0.625s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(4) .menu-item:nth-of-type(3) {
  -webkit-transition-delay: 0.675s, 0.875s;
  transition-delay: 0.675s, 0.875s;
}

.menu__toggle:checked~.menu__content .menu-item:nth-of-type(5) {
  -webkit-transition-delay: 0.725s, 0.875s;
  transition-delay: 0.725s, 0.875s;
}

.menu__content>.menu-item {
  border-left: 8px solid transparent;
}

.menu__content>.menu-item>a {
  line-height: 44px;
  min-width: 60px;
}

.sub-menu {
  padding: 0 0 0 44px;
}

.menu-item {
  line-height: 44px;
  min-height: 44px;
  padding: 0 12px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.menu-item .menu-item {
  -webkit-transform: translateX(-150%);
  transform: translateX(-150%);
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <nav class="menu">
    <input id="menu__toggle" type="checkbox" class='menu__toggle' />
    <label for="menu__toggle" class="menu__toggle-label">
			<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
			  <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' />
			</svg>
			<svg preserveAspectRatio='xMinYMin' viewBox='0 0 24 24'>
			  <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
			</svg>
		  </label>
    <ol class='menu__content'>
      <li class="menu-item"><a style="font-size: 30px;" href="http://192.168.1.53">Home</a></li>
      <li class="menu-item">
        <a style="font-size: 30px;" href="#0">PC Control</a>
        <ol class="sub-menu">
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/C_shutdown.cgi">Turn Off PC</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/PC_Lock.cgi">Lock PC</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Start_League.cgi">Start League</a></li>
        </ol>
      </li>
      <li class="menu-item">
        <a style="font-size: 30px;" href="#0">Light Control</a>
        <ol class="sub-menu">
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Light_on.cgi">Turn On light</a></li>
          <li class="menu-item"><a style="font-size: 20px;" href="http://192.168.1.53/cgi-bin/Light_off.cgi">Turn off light</a></li>
        </ol>
      </li>
    </ol>
  </nav>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...