Html, css menus and submenus

Question

Html, css menus and submenus

There is a menu with a submenu. When you click on+, the list expands. How to make it so that after the disclosure, instead of a plus, there was already a minus. Here is the code:

.menu,
#go {
  display: none;
}

.st {
  padding: 0 20px 0 20px;
  background: green;
  cursor: pointer;
  color: white;
}

#go:checked~.menu {
  display: block;
}

<input id="go" type="checkbox" />
<label for="go" class="st">+</label>
<ul class="menu">
  <li><a href="#">подпункт 1</a></li>
  <li><a href="#">подпункт 2</a></li>
  <li><a href="#">подпункт 3</a></li>
</ul>

2

html css menu

Author: UModeL, 2018-10-04

Source

1 answers

score 3 · Answer 1

If on css, then you can use a pseudo-element.

.menu,
#go {
  display: none;
}

.st {
  padding: 0 20px 0 20px;
  background: green;
  cursor: pointer;
  color: white;
}
.st:before{
  content:'+';
}
:checked+.st:before{
  content:'-';
}

#go:checked~.menu {
  display: block;
}

<input id="go" type="checkbox" />
<label for="go" class="st"></label>
<ul class="menu">
  <li><a href="#">подпункт 1</a></li>
  <li><a href="#">подпункт 2</a></li>
  <li><a href="#">подпункт 3</a></li>
</ul>