Živá ukázka

Výsledek

HTML

Autoformát
Standardní režim
Mobilní zobrazení

#nav {
  position: relative;
  box-sizing: border-box;
  background: #d7e4ef;
  height: 50px;
  padding: 0;
  border-bottom: 5px solid #578fbd;
}

#nav ul {
  padding-left: 0;
}

#nav ul li {
  display: inline-block;
  padding: 0 10px;
}

#nav ul li a {
  height: 50px;
  margin-right: 20px;
  display: block;
  text-decoration: none;
  color: #333;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 50px;
}

.open {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  padding: 5px 10px;
  background: #333;
  color: white;
  cursor: pointer;
}

#nav ul li:nth-child(n+3) {
  display: none;
  background: #699bc4;
  margin-left: 3rem;
}

#nav ul li:nth-child(n+3) a {
  color: white;
}

#check {
  display: none;
}

#nav label {
  font-family: 'Courier New CE', 'Courier CE', 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  font-weight: 700;
}

#check:checked~#nav label {
  background: #699bc4;
}

#check:checked~#nav ul li:nth-child(n+3) {
  display: block; 
}

#check:checked~#nav label:after { content: "- méně"; }
#check:not(:checked)~#nav label:after { content: "+ více" }

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS