ZorNet.Ru — сайт для вебмастера » Меню для сайта » Стильное вертикальное меню на JS для uCoz

Стильное вертикальное меню на JS для uCoz

Стильное вертикальное меню на JS для uCoz
Простенькое ну стильное вертикальное меню, специально для поклонников GTA, вертикальное меню в темна-светлых тонах. И можно установить под темный или светлый интернет ресурсы.Меню имеет несколько разделом, можно добавить свои. Меню специально для системы uCoz. Также не забываем, что изображение, которое стоит внутри, вы можете его сменить на свое, и здесь тематика безусловно сменится.

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

Второй или первый контейнер:

Код
<ul class="akkordeon">  
<li>  
  <p>GTA 6</p>  
  <div>  
  <span><a href="http://zornet.ru/" class="icon_menu">Скрипты и шаблоны для uCoz</a></span>  
  <span><a href="#" class="icon_menu">Дата выхода</a></span>  
</div>  
  </li>  
   
   
  <li>  
  <p>GTA Online</p>  
  <div>  
<span><a href="#" class="icon_menu">Статьи</a></span>  
<span><a href="#" class="icon_menu">Секреты</a></span>  
  </div>  
  </li>  
  <li>  
  <p>GTA 5</p>  
  <div>  
<span><a href="#" class="icon_menu">Статьи</a></span>  
<span><a href="#" class="icon_menu">Секреты</a></span>  
</div>  
</li>  
   
  <li>  
  <p>GTA 4</p>  
  <div>  
<span><a href="#" class="icon_menu">Статьи</a></span>  
  </div>  
  </li>  
   
  <li>  
  <p>GTA San Andreas</p>  
  <div>  
<span><a href="#" class="icon_menu">Статьи</a></span>  
  </div>  
  </li>  
   
  <li>  
  <p>GTA Criminal Russia</p>  
  <div>  
<span><a href="#" class="icon_menu">Статьи</a></span>  
<span><a href="#" class="icon_menu">Новости CRMP серверов</a></span>  
</div>  
  </li>  
   
  <li>  
  <p>Multi Theft Auto</p>  
  <div>  
<span><a href="#" class="icon_menu">Статьи</a></span>  
<span><a href="#" class="icon_menu">Как начать играть</a></span>  
<span><a href="#" class="icon_menu">Новости MTA серверов</a></span>  
  </div>  
  </li>  
  <li>  
  <p>GTA SAMP</p>  
  <div>  
<span><a href="#" class="icon_menu">Статьи</a></span>  
<span><a href="#" class="icon_menu">Раскрутка серверов</a></span>  
<span><a href="#" class="icon_menu">Новости SAMP серверов</a></span>  
<span><a href="#" class="icon_menu">Хостинги</a></span>  
  </div>  
  </li>  
   
  </ul>  
   
<script type="text/javascript">  
  $(document).ready(function(){  
  $('ul.akkordeon li > p').click(function(){  
  if(!$(this).hasClass('active')){  
  $('ul.akkordeon li > p').removeClass('active').next('div').slideUp();  
  $(this).addClass('active');  
  $(this).next('div').slideDown(200);  
  } else {  
  $(this).removeClass('active').next('div').slideUp();  
  }  
  });  
  });  
  </script>


Css:

Код
ul.akkordeon{list-style: none;padding:5px 0 0 0;}  
ul.akkordeon li{padding: 0px;margin: 0}  
ul.akkordeon li:nth-last-child(1){padding: 0px;margin: 0}  
ul.akkordeon li:nth-of-type(1) > p{-webkit-border-top-left-radius:2px;-webkit-border-top-right-radius:2px;-moz-border-radius-topleft:2px;-moz-border-radius-topright:2px;border-top-left-radius:2px;border-top-right-radius:2px;}  
ul.akkordeon li:nth-last-child(1) > p {-webkit-border-bottom-right-radius:2px;-webkit-border-bottom-left-radius:2px;-moz-border-radius-bottomright:2px;-moz-border-radius-bottomleft:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;border:0 !important;}  
ul.akkordeon li > p{position:relative;padding:0 0 0 14px;display: block;cursor: pointer;margin: 0;text-align: left;color: #fff;font-size: 16px;line-height: 24px;font-family: Cuprum;background:#3c3c3c;height: 35px;line-height: 35px;border-bottom: 1px solid #262828}  
ul.akkordeon li > p:hover, ul.akkordeon li > p.active {background:#e99f00;color: #3c3c3c;text-shadow: #fcb927 1px 1px 1px;}  
ul.akkordeon li > div {display: none;}  
ul.akkordeon li > div span {background: #252626;display: block;}  
ul.akkordeon li > div span:hover {background: #2f2f2f}  
ul.akkordeon li > div a{border-bottom:1px solid #0e0e0e;color: #c0c0c0 !important;padding: 0 0 0 50px;font-family: Cuprum;font-size: 14px;text-decoration: none !important;display: block;height: 30px;line-height: 30px;}  
ul.akkordeon li > div span:nth-last-child(1) a {border:0 !important;}  
ul.akkordeon li > p:before {background-image: url("http://zornet.ru/Aben/Gsa/14777628.png");background-position: center center;background-repeat: repeat;position: absolute;content: "";display: block;width: 14px;height: 5px;margin: 15px 0 0 213px;}  
ul.akkordeon li > p.active:before {background-image: url("http://zornet.ru/Aben/Gsa/14777633.png");background-position: center center;background-repeat: repeat;position: absolute;content: "";display: block;width: 14px;height: 5px;margin: 15px 0 0 213px;}  
.icon_menu {background:url("http://zornet.ru/Aben/Gsa/14777637.png") no-repeat;background-position: 15px 2px;}


(rip Бармен) - он же JoniDen.
02 Ноября 2016 Просмотров: 2364 Комментариев: (13)

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

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

Оставь свой отзыв

Комментарии: 13
Kosten
Kosten 02 Ноября 2016 20:091
0
JoniDen, как видно, у всех разделов, есть категорий или под категорий. Это если кому нужно убрать, то прямо со скрипта убираем, а разделы оставляем.
JoniDen
JoniDen 02 Ноября 2016 20:122
+1
Все разделы под одним классом, class="akkordeon" если его отключить, разделы не будут работать. Хоть есть еще один вот такой, class="icon_menu" ну он отвечает за иконку машины, при открытие раздела.
Kosten
Kosten 02 Ноября 2016 20:143
0
Так это просто значок можно поменять и поставить на другую тематику.
JoniDen
JoniDen 02 Ноября 2016 20:347
0
Да можно ну желательно ставить, такое же разрешение что и этот значок.
Kosten
Kosten 02 Ноября 2016 20:379
0
Но это понятно, что по размеру обязательно подобрать аналогичный.
JoniDen
JoniDen 02 Ноября 2016 20:4311
0
Просто бывают спрашивают, тоже самое что ты, я отвечаю да можно. И тут бац у них значок на пол меню. Да можно сделать так, чтобы при любом разрешение оно менялось под твое.
Kolinkor
Kolinkor 02 Ноября 2016 20:164
0
Где то GTA потеряло свое меню. 07a
FeStemBer
FeStemBer 02 Ноября 2016 20:205
0
Здесь вот как раз, продемонстрировать нужно. То на какие то не очень актуальные меню есть demo, а вот на нужные не когда не ставите.
tsakonter
tsakonter 02 Ноября 2016 20:246
0
Так установи, здесь же не нужно не чего закачивать, быстро поставил и посмотрел. Подходит оно или что то нужно редактировать.
JoniDen
JoniDen 02 Ноября 2016 20:368
+1
Уважаемый tsakonter, все правильно говорит.
Kosten
Kosten 02 Ноября 2016 20:3910
0
По установке здесь все просто, сейчас как раз такие нужны, что на стилях идут и не чего файловый менеджер кидать не нужно.
Kosten
Kosten 04 Ноября 2016 01:3012
0
Флуд удален!
noavatar
spaaan4 01 Декабря 2018 11:0113
0
Как сделать чтобы ячейка всегда раздвинута была?
avatar