Адаптация раздвижного меню с сайта zerx.ru под uCoz. Данное меню подойдет для сайтов онлайн кинотеатров.
Установка:
1. Данный код вставляем в блок:
2. Данный код вставляем в CSS:
3. Заходим в файловый менеджер создаем папку images и заливаем картинки.
Установка завершена. Удачи.
Установка:
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>
<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;
}
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