Multi-level Radial Tree Menu In Pure CSS

Preview:

Description:

A tree menu concept that expands the hamburger button into a multi-level radial menu. Written in pure CSS and nested HTML list.

How to use it:

The HTML structure for the radial tree menu. The menu uses checkbox and label hacks to toggle the submenus without using any JavaScript.

<nav>
  <input class="toggle" id="nav" type="checkbox" />
  <label class="label" for="nav">
    <p>Menu</p><span class="hum"></span>
    <ul class="list">
      <li class="list__home"><a href="#0">Home</a></li>
      <li class="list__about"><a href="#0">About</a></li>
      <li class="list__clients"><a href="#0"><span>Clients</span></a>
        <ul class="list__clientsItems">
          <li><a href="#0">Burger King</a></li>
          <li><a href="#0">Southwest Airlines</a></li>
          <li><a href="#0">Levi Strauss</a></li>
        </ul>
      </li>
      <li class="list__strauss"><a href="#0"><span>Services</span></a>
        <ul class="list__straussItem">
          <li><a href="#0">Print Design</a></li>
          <li><a href="#0">Web Design</a></li>
          <li><a href="#0">Mobile App Development</a></li>
        </ul>
      </li>
      <li class="list__contact"><a href="#0">Contact</a></li>
    </ul>
  </label>
</nav>

The necessary CSS/CSS3 rules for the radial tree menu. Just copy and paste the following CSS snippets into your page and done.

.list__home, .list__about, .list__clients, .list__clients .list__clientsItems li, .list__strauss, .list__strauss .list__straussItem li, .list__contact {
  position: absolute;
  opacity: 0;
  bottom: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  z-index: -1;
  transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
}
.list__home:after, .list__about:after, .list__clients:after, .list__clients .list__clientsItems li:after, .list__strauss:after, .list__strauss .list__straussItem li:after, .list__contact:after {
  top: 100px;
  width: 1px;
  height: 100%;
  background: #555273;
  z-index: -1;
}
.list__home a, .list__about a, .list__clients a, .list__clients .list__clientsItems li a, .list__strauss a, .list__strauss .list__straussItem li a, .list__contact a {
  display: flex;
  width: 100px;
  height: 100px;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  margin: auto;
  justify-content: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  border-radius: 50%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  line-height: 1;
  color: #e2eff1;
}
.list__home a:visited, .list__about a:visited, .list__clients a:visited, .list__strauss a:visited, .list__contact a:visited, .list__home a:active, .list__about a:active, .list__clients a:active, .list__strauss a:active, .list__contact a:active {
  color: #e2eff1;
}
.list__home a:hover, .list__about a:hover, .list__clients a:hover, .list__strauss a:hover, .list__contact a:hover {
  color: #fff;
}
.toggle:checked + .label .list__home, .toggle:checked + .label .list__about, .toggle:checked + .label .list__clients, .toggle:checked + .label .list__strauss, .toggle:checked + .label .list__contact {
  opacity: 1;
  z-index: 0;
}
nav {
  position: relative;
  margin: auto;
  width: 500px;
  height: 100%;
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
}
ul {
  padding: 0;
  margin: 0;
  font-size: 30px;
  text-align: center;
}
li {
  list-style: none;
}
.toggle {
  opacity: 0;
}
.toggle:checked + .label .hum {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  transform: rotate(45deg) translate(10px, 10px);
  -webkit-transform: rotate(45deg) translate(10px, 10px);
}
.toggle:checked + .label .hum:before {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  transform: rotate(-90deg) translate(10px, 0px);
  -webkit-transform: rotate(-90deg) translate(10px, 0px);
}
.toggle:checked + .label .hum:after {
  opacity: 0;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  transform: rotate(-90deg) translate(20px, 0px);
  -webkit-transform: rotate(-90deg) translate(20px, 0px);
}
.toggle:checked + .label .list__home {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  opacity: 1;
  height: 200px;
}
.toggle:checked + .label .list__about {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  opacity: 1;
  height: 200px;
}
.toggle:checked + .label .list__clients {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  opacity: 1;
  transform: translate(200px, -200px) rotate(45deg);
  -webkit-transform: translate(200px, -200px) rotate(45deg);
}
.toggle:checked + .label .list__clients:after {
  height: 36px;
  transition: 1.1s;
  -webkit-transition: 1.1s;
}
.toggle:checked + .label .list__clients li {
  opacity: 0;
}
.toggle:checked + .label .list__strauss {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  opacity: 1;
  transform: translate(90px, -260px) rotate(-135deg);
  -webkit-transform: translate(90px, -260px) rotate(-135deg);
}
.toggle:checked + .label .list__strauss:after {
  height: 36px;
  transition: 1.1s;
  -webkit-transition: 1.1s;
}
.toggle:checked + .label .list__clientsItems:nth-of-type(1) {
  height: 0;
}
.toggle:checked + .label .list__contact {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  opacity: 1;
  height: 200px;
}
.label {
  position: absolute;
  top: calc(50% - (100px / 2));
  left: calc(50% - (100px / 2));
  width: 100px;
  height: 100px;
  background-color: #e23e57;
  border-radius: 50%;
  z-index: 10;
}
.list {
  position: absolute;
  top: -200px;
  left: calc(50% - 250px);
  width: 500px;
  height: 500px;
  transform-origin: center;
  -webkit-transform-origin: center;
}
.list__home {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  height: 10px;
  transform: translate(200px, -300px);
  -webkit-transform: translate(200px, -300px);
  overflow: hidden;
}
.list__home a {
  background: #65799b;
}
.list__about {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  height: 10px;
  transform: translate(158px, -275px) rotate(-45deg);
  -webkit-transform: translate(158px, -275px) rotate(-45deg);
  overflow: hidden;
}
.list__about a {
  background: #65799b;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.list__clients {
  width: 300px;
  height: 300px;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  transform: translate(100px, -110px) rotate(45deg);
  -webkit-transform: translate(100px, -110px) rotate(45deg);
}
.list__clients a {
  background: #65799b;
}
.list__clients a span {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.list__clients:after {
  top: 250px;
  width: 1px;
  height: 0;
  background: #555273;
  left: 45px;
  transition: 0.3s;
}
.list__clients .list__clientsItems {
  transition: 0.8s;
  -webkit-transition: 0.8s;
}
.list__clients .list__clientsItems li {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  opacity: 0;
  width: 100px;
  height: 0;
  overflow: hidden;
}
.list__clients .list__clientsItems li:after {
  z-index: -1;
}
.list__clients .list__clientsItems li a {
  margin: 0 0 auto 0;
  background: #555273;
}
.list__clients .list__clientsItems li:after {
  top: 100px;
  left: 50px;
}
.list__clients .list__clientsItems li:nth-of-type(1) {
  transform: scale(0.8) translate(-15px, -155px) rotate(-20deg);
  -webkit-transform: scale(0.8) translate(-15px, -155px) rotate(-20deg);
}
.list__clients .list__clientsItems li:nth-of-type(1) a {
  transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
}
.list__clients .list__clientsItems li:nth-of-type(2) {
  transform: scale(0.8) translate(20px, -148px) rotate(30deg);
  -webkit-transform: scale(0.8) translate(20px, -148px) rotate(30deg);
  font-size: 22px;
}
.list__clients .list__clientsItems li:nth-of-type(2) a {
  transform: rotate(-75deg);
  -webkit-transform: rotate(-75deg);
}
.list__clients .list__clientsItems li:nth-of-type(3) {
  transform: scale(0.8) translate(33px, -107px) rotate(120deg);
  -webkit-transform: scale(0.8) translate(33px, -107px) rotate(120deg);
}
.list__clients .list__clientsItems li:nth-of-type(3):after {
  transition: 0s;
  top: 100px;
}
.list__clients .list__clientsItems li:nth-of-type(3) a {
  transform: rotate(195deg);
  -webkit-transform: rotate(195deg);
}
.list__clients:hover {
  opacity: 1;
}
.list__clients:hover ul,
.list__clients:hover li {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.list__clients:hover .list__clientsItems {
  transition: 0.8s;
  -webkit-transition: 0.8s;
}
.list__clients:hover .list__clientsItems li:nth-of-type(1) {
  height: 200px;
  opacity: 1;
}
.list__clients:hover .list__clientsItems li:nth-of-type(2) {
  height: 225px;
  opacity: 1;
}
.list__clients:hover .list__clientsItems li:nth-of-type(3) {
  height: 210px;
  opacity: 1;
}
.list__clients a {
  margin: 150px 0 0 0;
}
.list__strauss {
  width: 200px;
  height: 300px;
  transition: 0.8s;
  -webkit-transition: 0.8s;
  transform: translate(185px, -355px) rotate(-135deg);
  -webkit-transform: translate(185px, -355px) rotate(-135deg);
}
.list__strauss a {
  background: #65799b;
}
.list__strauss a span {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.list__strauss:after {
  top: 250px;
  width: 1px;
  height: 0;
  background: #555273;
  left: 45px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}
.list__strauss .list__straussItem {
  transition: 0.8s;
  -webkit-transition: 0.8s;
}
.list__strauss .list__straussItem li {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  opacity: 0;
  width: 100px;
  height: 0;
  overflow: hidden;
}
.list__strauss .list__straussItem li:after {
  z-index: -1;
}
.list__strauss .list__straussItem li a {
  margin: 0 0 auto 0;
  background: #555273;
}
.list__strauss .list__straussItem li:after {
  top: 100px;
  left: 50px;
}
.list__strauss .list__straussItem li:nth-of-type(1) {
  transform: scale(0.8) translate(-15px, -160px) rotate(-20deg);
  -webkit-transform: scale(0.8) translate(-15px, -160px) rotate(-20deg);
}
.list__strauss .list__straussItem li:nth-of-type(1) a {
  transform: rotate(155deg);
  -webkit-transform: rotate(155deg);
}
.list__strauss .list__straussItem li:nth-of-type(2) {
  transform: scale(0.8) translate(20px, -155px) rotate(30deg);
  -webkit-transform: scale(0.8) translate(20px, -155px) rotate(30deg);
  font-size: 22px;
}
.list__strauss .list__straussItem li:nth-of-type(2) a {
  transform: rotate(105deg);
  -webkit-transform: rotate(105deg);
}
.list__strauss .list__straussItem li:nth-of-type(3) {
  transform: scale(0.8) translate(30px, -105px) rotate(120deg);
  -webkit-transform: scale(0.8) translate(30px, -105px) rotate(120deg);
  font-size: 22px;
}
.list__strauss .list__straussItem li:nth-of-type(3):after {
  top: 100px;
}
.list__strauss .list__straussItem li:nth-of-type(3) a {
  transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
}
.list__strauss:hover {
  opacity: 1;
}
.list__strauss:hover ul,
.list__strauss:hover li {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.list__strauss:hover .list__straussItem {
  transition: 0.8s;
  -webkit-transition: 0.8s;
}
.list__strauss:hover .list__straussItem li:nth-of-type(1) {
  height: 200px;
  opacity: 1;
}
.list__strauss:hover .list__straussItem li:nth-of-type(2) {
  height: 230px;
  opacity: 1;
}
.list__strauss:hover .list__straussItem li:nth-of-type(3) {
  height: 225px;
  opacity: 1;
}
.list__strauss a {
  margin: 150px 0 0 0;
}
.list__contact {
  transition: 0.8s;
  -webkit-transition: 0.8s;
  height: 10px;
  transform: translate(230px, -210px) rotate(135deg);
  -webkit-transform: translate(230px, -210px) rotate(135deg);
  overflow: hidden;
}
.list__contact a {
  background: #65799b;
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
p {
  position: absolute;
  bottom: 10px;
  left: calc(50% - 22px);
  margin: 0;
  color: #fff;
  font-size: 30px;
}
.hum {
  position: absolute;
  top: 28px;
  left: 30px;
  width: 40px;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  transition: 0.8s;
  -webkit-transition: 0.8s;
}
.hum:before {
  top: 10px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  transition: 0.8s;
  -webkit-transition: 0.8s;
}
.hum:after {
  top: 20px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  transition: 0.8s;
  -webkit-transition: 0.8s;
}
@media screen and (min-width: 450px) {
  nav {
    transform: scale(0.5);
  }
}