» »

Горизонтальное выдвижное меню с эффектом


Горизонтальное выдвижное меню с эффектом

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

Вставляем в то место, где хотим видеть меню. Мне понравилось расположение в самом низу верхней части сайта.

3 готовых варианта цвета.
Также вы можете настроить на свой вкус, в стилях я указал в каком месте нужно заменить цвет после 
background: 

  
 

То есть ищите строчки:
1
Код
.menuHolder {margin:30px 0 0 0; text-align:center; position:relative; height:40px; z-index:20; background:#000000; /*общий фон меню


1
Код
.menuHolder ul.nav li:hover a.top-a {background:#363636; border-radius:8px 8px 0 0; /*нажим обвод*/


3
Код
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#363636; padding:5px 0 10px 0; /*подменю цвет фона*/



Варианты цветов можете подобрать Таблица цветов HTML
Черный


Код
</***************************************************менюха>
<style type="text/css">
.menuHolder {margin:30px 0 0 0; text-align:center; position:relative; height:40px; z-index:20; background:#000000;/*общий фон меню
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}

.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}

.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}

  .menuHolder ul.nav li:hover a.top-a {background:#363636; border-radius:8px 8px 0 0; /*нажим обвод*/
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}

  .menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#363636; padding:5px 0 10px 0; /*подменю цвет фона*/
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);

-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;

-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);

-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}

.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}

.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}

.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(http://delaisait.ucoz.ru/img/marker/8.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent (arrow.gif) no-repeat 1px center;}

.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}

.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
  <div class="menuHolder">
<ul class="nav">
  <li><a class="top-a" href="/"><b>Ссылка</b></a></li>
  <li><a class="top-a" href="/"><b>Ссылка</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="/">/</a>Ссылка</li>
<li><a href="/">/</a>Ссылка</li>
<li><a href="/">/</a>Ссылка</li>
<li><a href="/"></a>Ссылка</li>
<li><a href="/"></a>Ссылка</li>
  <li><a href="/"></a>Ссылка</li>
</ul>
<ul class="col">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
  </ul>
<ul class="colRight">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
</ul>
</div>
</li>
  <li><a class="top-a" href="/video"><b>Видео</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
<ul class="colRight">
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
</ul>
</div>
</li>
  <li><a class="top-a" href="/photo"><b>Ссылка</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#"><b>Ссылка</b></a>
  <div class="col2 left">
  <ul class="colLeft">
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  </ul>
  <ul class="colRight">
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  </ul>
  </div>
  </li>
  </ul>
</div>
  <script>
  var sw = $(window).width();
  var breakpoint = 979;
  var mobile = false;

  if (sw < breakpoint) {
  $('#catmenu').attr('class', 'nav-mobi')
  }
  </script>
  </div>
  </div>
  </*********************************************************************** менюха>

Зеленый

Код
</*********************************************************************** менюха>
<style type="text/css">
.menuHolder {margin:30px 0 0 0; text-align:center; position:relative; height:40px; z-index:20; background:#006400;/*общий фон меню
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}

.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}

.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}

  .menuHolder ul.nav li:hover a.top-a {background:#2E8B57; border-radius:8px 8px 0 0; /*нажим обвод*/
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}

  .menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#2E8B57; padding:5px 0 10px 0; /*подменю цвет фона*/
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);

-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;

-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);

-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}

.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}

.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}

.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(http://delaisait.ucoz.ru/img/marker/8.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent (arrow.gif) no-repeat 1px center;}

.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}

.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
  <div class="menuHolder">
<ul class="nav">
  <li><a class="top-a" href="/"><b>Ссылка</b></a></li>
  <li><a class="top-a" href="/"><b>Ссылка</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
  <li><a href="/">Ссылка</a></li>
</ul>
<ul class="col">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
  </ul>
<ul class="colRight">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
</ul>
</div>
</li>
  <li><a class="top-a" href="/video"><b>Видео</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
<ul class="colRight">
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
</ul>
</div>
</li>
  <li><a class="top-a" href="/photo"><b>Ссылка</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#"><b>Ссылка</b></a>
  <div class="col2 left">
  <ul class="colLeft">
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  </ul>
  <ul class="colRight">
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  </ul>
  </div>
  </li>
  </ul>
</div>
  <script>
  var sw = $(window).width();
  var breakpoint = 979;
  var mobile = false;

  if (sw < breakpoint) {
  $('#catmenu').attr('class', 'nav-mobi')
  }
  </script>
  </div>
  </div>
  </*********************************************************************** менюха>


Красный

Код
</*********************************************************************** менюха>
<style type="text/css">
.menuHolder {margin:30px 0 0 0; text-align:center; position:relative; height:40px; z-index:20; background:#8B1A1A;/*общий фон меню
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}

.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}

.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}

  .menuHolder ul.nav li:hover a.top-a {background:#CD2626; border-radius:8px 8px 0 0; /*нажим обвод*/
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}

  .menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#CD2626; padding:5px 0 10px 0; /*подменю цвет фона*/
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);

-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;

-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);

-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}

.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}

.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}

.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(http://delaisait.ucoz.ru/img/marker/8.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent (arrow.gif) no-repeat 1px center;}

.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}

.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
  <div class="menuHolder">
<ul class="nav">
  <li><a class="top-a" href="/"><b>Ссылка</b></a></li>
  <li><a class="top-a" href="/"><b>Ссылка</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
  <li><a href="/">Ссылка</a></li>
</ul>
<ul class="col">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
  </ul>
<ul class="colRight">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
</ul>
</div>
</li>
  <li><a class="top-a" href="/video"><b>Видео</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="/">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
<ul class="colRight">
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
</ul>
</div>
</li>
  <li><a class="top-a" href="/photo"><b>Ссылка</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
<li><a href="#">Stroka</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#"><b>Ссылка</b></a>
  <div class="col2 left">
  <ul class="colLeft">
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  </ul>
  <ul class="colRight">
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  <li><a href="#">Stroka</a></li>
  </ul>
  </div>
  </li>
  </ul>
</div>
  <script>
  var sw = $(window).width();
  var breakpoint = 979;
  var mobile = false;

  if (sw < breakpoint) {
  $('#catmenu').attr('class', 'nav-mobi')
  }
  </script>
  </div>
  </div>
  </*********************************************************************** менюха>
23.02.2016 Просмотров: 734 Комментарий: (9)

Поделиться в социальных сетях

Материал разместил

Комментарий: 9
Kosten
Kosten 23.02.2016 01:311
0
В такое меню можно все запросы сайта прописать, но также и запутаться, разделить по категориям или есть несколько разделов, то как раз подойдет.
Сопрано
Сопрано 23.02.2016 01:352
0
Так смотрится красиво, только если убрать некоторые под меню, то там слишком их много.
Alex_L_X
Alex_L_X 23.02.2016 01:353
0
с одного раздела меню можно открыть 2-3-4 столбца с подменю. на скрине открыто с 2 столбцами.
tsakonter
tsakonter 23.02.2016 01:395
0
Но 4, куда, да столько на сайте информации не будет, разве что сами запросы писать в них, но самое большое это 2, да так чтоб выводило все по теме, это сложно настроить и созданием сайта нужно делать.
Alex_L_X
Alex_L_X 23.02.2016 01:436
0
Еще как можно. Например мне на сайт ужасов подойдет. сейчас немного категорий вбил. Уже почти заполнил)
Ну тут уже от тематики.
По крайней мере если нужно много подменю, считаю что в самый раз
Alex_L_X
Alex_L_X 23.02.2016 01:384
0
Демку можно тут глянуть. Временно
Kosten
Kosten 23.02.2016 01:527
0
Но так под темный дизайн нормально походит. Просто не когда не приходилось ставить больше одного под меню.
ucozmental
ucozmental 23.02.2016 01:548
0
Меню стандартное, вот эффект появление больше понравился.
FeStemBer
FeStemBer 23.02.2016 02:029
0
На темном шаблоне смотрится не плохо и светлый стиль в нем аккуратно сделан с обводом темным.
avatar