Горизонтальное выдвижное меню на CSS3

Отличное построение горизонтального меню, которое появляется после нажатие кнопки, где по нему можно перейти на актуальные темы на сайте. Все это создано на CSS, где есть возможность поменять полностью дизайн, который заключается в оттенке цвета. Также в стилистике присутствует редакция по каркасу навигаций, это выставить ширину по оформлению более привлекательным.

Так как не стал прописывать к нему тени, просто здесь оно идет, как на темный или светлый фон. На Demo странице показан полный вид на изображение, но здесь можно его безусловно темнее сделать. Это про то, что сам разработчик подгоняет самостоятельно под свой интернет ресурс.

Что по удобству, то на современном шаблоне его можно применить, также на стандартном, так как везде это меню будет отлично отрабатывать по своему функционалу. Не исключаю, что можно с этого эффекта сделать что, то свое, как пример, это показ одного запроса, который может вести на профиль пользователя. Где на отдельной страницы такой трюк должен быть востребован, здесь полная навигация, которая место будет в одной кнопке, что очень удобно.

HTML

  <nav class="menu-opener">
    <div class="menu-opener-inner"></div>
  </nav>
  <nav class="menu">
    <ul class="menu-inner">
      <a href="#" class="menu-link">
        <li>Accueil</li>
      </a>
      <a href="#" class="menu-link">
        <li>Portfolio</li>
      </a>
      <a href="#" class="menu-link">
        <li>Themes</li>
      </a>
      <a href="#" class="menu-link">
        <li>Templates</li>
      </a>
      <a href="#" class="menu-link">
        <li>Contact</li>
      </a>
    </ul>
  </nav>

CSS

.dverkasing-kodunels, .dverkasing-kodunels:hover, .dverkasing-kodunels.active, .dingosta-dukosa-tulop, .dingosta-dukosa-tulop::before, .dingosta-dukosa-tulop::after, .menu, .menu.active { 
  -webkit-transition: 250ms all; 
  transition: 250ms all; 
} 

.dverkasing-kodunels { 
  cursor: pointer; 
  height: 64px; 
  position: absolute; 
  top: 2%; 
  left: 1%; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
  width: 64px; 
} 
.dverkasing-kodunels:hover, .dverkasing-kodunels.active { 
  background: #11ab17; 
} 

.dingosta-dukosa-tulop { 
  background: #f6f9f6; 
  height: .5rem; 
  margin-left: 0.80rem; 
  margin-top: 1.80rem; 
  width: 2.4rem; 
} 
.dingosta-dukosa-tulop::before, .dingosta-dukosa-tulop::after { 
  background: white; 
  content: ''; 
  display: block; 
  height: .5rem; 
  width: 2.4rem; 
} 
.dingosta-dukosa-tulop::before { 
  -webkit-transform: translateY(-0.80rem); 
  -ms-transform: translateY(-0.80rem); 
  transform: translateY(-0.80rem); 
} 
.dingosta-dukosa-tulop::after { 
  -webkit-transform: translateY(0.30rem); 
  -ms-transform: translateY(0.30rem); 
  transform: translateY(0.30rem); 
} 
.dingosta-dukosa-tulop.active { 
  background: transparent; 
} 
.dingosta-dukosa-tulop.active::before { 
  -webkit-transform: translateY(0rem) rotate(-45deg); 
  -ms-transform: translateY(0rem) rotate(-45deg); 
  transform: translateY(0rem) rotate(-45deg); 
} 
.dingosta-dukosa-tulop.active::after { 
  -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
  -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
  transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
} 

.navigakopsag { 
  background: #136dbb; 
  color: transparent; 
  height: 64px; 
  position: absolute; 
  top: 2%; 
  left: 1%; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
  width: 0rem; 
  z-index: -1; 
} 

.navigakopsag a:hover {  
background: #0f4980; 
border-left: 0px solid #2a69c3; 
} 

.navigakopsag.active { 
  width: -webkit-calc(100% - 2rem); 
  width: calc(100% - 2rem); 
} 
.navigakopsag.active .vunamous-sompanieb { 
  color: white; 
} 

.lonaguben-gaplaton { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: horizontal; 
  -webkit-box-direction: normal; 
  -webkit-flex-direction: row; 
  -ms-flex-direction: row; 
  flex-direction: row; 
  height: 100%; 
  list-style-type: none; 
  margin: 0; 
  margin-left: 4rem; 
  padding: 0; 
} 

.vunamous-sompanieb { 
  color: transparent; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-flex: 1; 
  -webkit-flex: 1 1 auto; 
  -ms-flex: 1 1 auto; 
  flex: 1 1 auto; 
  font-size: 1.3rem; 
  font-weight: 100; 
  height: 100%; 
  text-align: center; 
  text-decoration: none; 
} 
.vunamous-sompanieb li { 
  margin: auto; 
} 

@media screen and (max-width: 768px) { 
  .navigakopsag { 
  height: auto; 
  } 
  .lonaguben-gaplaton { 
  display: block; 
  } 
  .vunamous-sompanieb { 
  padding: 10px 0; 
  font-size: 1.2em; 
  } 
  .navigakopsag.active { 
  width: -webkit-calc(100% - 0.5rem); 
  width: calc(100% - 0.5rem); 
  } 
}

JS

$(".dverkasing-kodunels").click(function(){ 
  $(".dverkasing-kodunels, .dingosta-dukosa-tulop, .navigakopsag").toggleClass("active"); 
});

[center][/center]