NK-uCoz.Ru » Каталог файлов » uCoz » Авторство NK-uCoz.Ru » Новое раздвижное меню Адаптация под uCoz [Rip,2014,Nk-CS.Ru]

Новое раздвижное меню Адаптация под uCoz [Rip,2014,Nk-CS.Ru]

Новое раздвижное меню Адаптация под uCoz [Rip,2014,Nk-CS.Ru]
Авторство NK-uCoz.Ru
na3uTuB4uk
24.01.14, 01:40
1078
1
Адаптация раздвижного меню с сайта zerx.ru под uCoz. Данное меню подойдет для сайтов онлайн кинотеатров.

Установка:

1. Данный код вставляем в блок:
Код
<script src="http://zerx.ru/templates/zerxnew/js/_menu.js"></script>
<section class="cblock" id="menuFilmsCats">
<div class="header"><span>Подобрать своё кино:</span></div>
<div class="content">
<div class="ssel">
<select name="" id="">...</select>
<div class="selected" id="selectedDivMyFilm1" onmouseenter="jQuery(this).next().show();jQuery(this).addClass('up');">
<div class="sel_arrow janr"></div>Выбрать по жанру<div class="sel_arr"></div>
</div>
<ul class="ssel-list" onmouseleave="jQuery(this).hide();jQuery(this).prev().removeClass('up');" id="selectedUlMyFilm1" style="display: none;">
  <li onclick="location.href="/load/1"" data-name="/load/1">Аниме</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Биография</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Боевик</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Вестерн</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Военный</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Детектив</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Документальный</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Драма</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Исторический</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Комедия</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Криминал</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Мелодрама</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Мистика</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Мультфильмы</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Мюзикл</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Отечественное</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Приключения</li>
  <li onclick="location.href="/load/"" data-name="/load/1">Семейный</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Сериал</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Спорт</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Тв-передачи</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Трейлеры</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Триллер</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Ужасы</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Фантастика</li>
  <li onclick="location.href="/load/1"" data-name="/load/1">Фэнтези</li>
</ul>
</div></div>


2. Данный код вставляем в CSS:
Код
.ssel{
  position: relative;
  margin-bottom: 20px;
}

.ssel SELECT{
  display: none;
}

.ssel .selected{
  border: 1px solid #FFFFFF !important;
  height: 31px;
  cursor: pointer;
  font: 1em Verdana;
  font-size: 17px;
  text-align: left;
  border-radius: 4px;
  position: relative;
  padding-top: 9px;
  padding-left: 70px;
  color: #15405F;
  text-shadow: none;
  box-shadow: none !important;
  background: #E1E1E1 url('/images/down_arr.png') no-repeat right center;
  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(205, 205, 205, 1) 100%, rgba(205, 205, 205, 1) 100%, rgba(205, 205, 205, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(205, 205, 205, 1)), color-stop(100%, rgba(205, 205, 205, 1)), color-stop(100%, rgba(205, 205, 205, 1)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(205, 205, 205, 1) 100%, rgba(205, 205, 205, 1) 100%, rgba(205, 205, 205, 1) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(205, 205, 205, 1) 100%, rgba(205, 205, 205, 1) 100%, rgba(205, 205, 205, 1) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(205, 205, 205, 1) 100%, rgba(205, 205, 205, 1) 100%, rgba(205, 205, 205, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(205, 205, 205, 1) 100%, rgba(205, 205, 205, 1) 100%, rgba(205, 205, 205, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cdcdcd', GradientType=0);
}

.ssel .selected .sel_arrow{
  width: 74px;
  height: 46px;
  position: absolute;
  background: url('/images/men-janr-bl.png') no-repeat -3px -1px;
  z-index: 101;
  margin-top: -9px;
  margin-left: -70px;
}

.ssel .selected .sel_arr{
  width: 20px;
  height: 46px;
  position: absolute;
  right: 11px;
  background: url(/images/down_arr.png') no-repeat 0px -1px;
  z-index: 99;
  margin-top: -12px;
  margin-left: -70px;
}

.ssel .selected.up .sel_arrow.janr{
  background: url('/images/men-janr.png') no-repeat -3px -1px;
}

.ssel .selected:hover .sel_arrow.janr{
  background: url(/images/men-janr.png') no-repeat -3px -1px;
}

.ssel .selected.up:hover .sel_arrow.janr{
  background: url('/images/men-janr.png') no-repeat -3px -1px;
}

.ssel-list{
  z-index: 100;
  display: none;
  position: absolute;
  margin: 0px;
  width: 298px;
  padding-bottom: 7px;
  background: #FFFFFF;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: #FFD320 solid 3px;
  border-radius: 5px;
  margin-left: 48px;
  margin-top: -59px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.ssel .ui-effects-wrapper .ssel-list{
  margin-left: 0px;
  margin-top: 0px;
}

.ssel .ui-effects-wrapper{
  margin-left: 48px !important;
  margin-top: -59px !important;
  width: 343px !important;
}

.ssel-list LI{
  color: #15405F;
  text-shadow: none;
  text-decoration: underline;
  font-size: 14px;
  padding: 0px 15px;
  cursor: pointer;
  margin-right: 15px;
}

.ssel-list LI:hover{
  color: #0720F6;
  background: #FFD320;
  margin-right: 0;
  margin-left: -16px;
  padding-left: 31px;
}

.ssel-list li:first-child{
}

.ssel-list li:first-child:hover{
}

.ssel-list LI.myfilmLi{
}

.cblock .smenu{
  font-size: .9em;
  line-height: 1.4;
}

.cblock .smenu SPAN{
  color: #FFF;
}


3. Заходим в файловый менеджер создаем папку images и заливаем картинки.

Установка завершена. Удачи.
1471_images.zip [12.5 Kb] (Скачали 40)
Ctrl
Enter
Заметили ошЫбку
Выделите текст и нажмите Ctrl+Enter
Вернуться назад
Комментарии (1)
QQQ
QQQ 31.12.14, 04:18
&RESPECT&
0