NK-uCoz.Ru » Каталог файлов » uCoz » Авторство NK-uCoz.Ru » Новое раздвижное меню для uCoz

Новое раздвижное меню для uCoz

Новое раздвижное меню для uCoz
Авторство NK-uCoz.Ru
na3uTuB4uk
07.01.16, 16:39
850
3
Описание:
Новое красивое раздвижное меню для uCoz, меню для торрент портала выполненное в темных и красных тонах отлично смотрится на сайте. Меню легко устанавливается, так же вы можете изменить цвет который для вас будет удобнее.

Установка:
1. Для начала установим код самого меню в ваш блок:
Код
<div class="block_c menu">
<ul class="reset">
<li><a href="#" title=""><b>Торрент игры для PC</b></a>
<ul class="reset">
<li><a href="#">Action / Экшены</a></li>
<li><a href="#">Racing / Гонки</a></li>
<li><a href="#">Fighting / Драки</a></li>
<li><a href="#">Квесты / Quest</a> </li>
<li><a href="#">Sport / Спортивные</a></li>
<li><a href="#">Simulation / Симуляторы</a></li>
<li><a href="#">Strategy / Стратегии</a></li>
<li><a href="#">Arcade / Аркады</a></li>
<li><a href="#">Online / Онлайновые</a></li>
<li><a href="#">Игры для Консолей</a></li>
<li><a href="#">Logic / Логические</a></li>
<li><a href="#">MMO</a></li>
<li><a href="#">RPG / Ролевые</a></li>
</ul></li>

<li><a href="#" title=""><b>Торрент фильмы</b></a>
<ul class="reset">
<li><a href="#">Боевики</a></li>
<li><a href="#">Документальные</a></li>
<li><a href="#">3D Фильмы</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>
<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>
<li><a href="#">Биография</a> </li>
<li><a href="#">Ужасы</a></li>
<li><a href="#">Криминал</a></li>
</ul></li>

<li><a href="#"><b>Торрент программы</b></a>
<ul class="reset">
<li><a href="#">Драйвера</a></li>
<li><a href="#">Мультимедиа</a></li>
<li><a href="#">Работа с CD / DVD</a></li>
<li><a href="#">Графика</a></li>
<li><a href="#">Антивирусы</a></li>
<li><a href="#">Архиваторы</a> </li>
<li><a href="#">FTP-Клиенты</a> </li>
<li><a href="#">Операционные системы</a></li>
<li><a href="#">Интернет</a></li>
<li><a href="#">Кодеки</a></li>
<li><a href="#">Прочий софт</a></li>
</ul></li>

<li class="men_resa"><a href="#" title="">Игровые журналы</a></li>
<li><a href="#" title="">ТОП 100 фильмы / игры</a>
<ul class="reset">
<li><a href="#">Топ по просмотрам</a></li>
<li><a href="#">Топ по комментариям</a></li>
<li><a href="#">Топ по рейтингу</a></li>
</ul></li>

<li><a href="#">Всё для Counter Strike 1.6</a>
<ul class="reset">
<li><a href="#">Скачать Cs 1.6</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>
<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>
<li><a href="#">Linux</a> </li>
<li><a href="#">Плагины для Зомби Мода Cs 1.6</a></li>
</ul></li>

<li><a href="#">Полезные Статьи CS 1.6</a>
<ul class="reset">
<li><a href="#">Set Master для Cs 1.6 и CS:S</a></li>
<li><a href="#">Как сделать себя Админом</a></li>
<li><a href="#">FAQ по Counter-Strike 1.6</a></li>
<li><a href="#">Делаем постоянный IP</a></li>
<li><a href="#">Оптимизация Сервера</a></li>
<li><a href="#">Создаем свой сервер CS</a></li>
<li><a href="#">Быстрая Загрузка Файлов HTTP</a></li>
<li><a href="#">FAQ по Зомби моду</a></li>
<li><a href="#">Cтавим свои модели на сервер</a></li>
<li><a href="#">Запуск сервера через консоль</a></li>
<li><a href="#">AMX команды админа</a></li>
<li><a href="#">Установка плагинов</a></li>
</ul></li>

<li><a href="#" title=""><b>Флеш игры онлайн</b></a></li>
</ul>
</div>

2. Добавьте стили в CSS в самый конец:
Код
.block_c{position:relative;min-height:30px;overflow:hidden;padding:5px}
.menu ul{margin:4px 1px 1px;padding:0}
.menu ul li ul{font-size:11px;display:none;background:#591818 url(/images/bgs.png) no-repeat center top;text-shadow:0 1px 0 rgba(0,0,0,0.29);-moz-border-bottom-left-radius:6px;-webkit-border-bottom-left-radius:6px;border-bottom-left-radius:6px;-moz-border-bottom-right-radius:6px;-webkit-border-bottom-right-radius:6px;border-bottom-right-radius:6px;margin:0;padding:0}
.menu ul li, .classeromen{background:#591818 url(/images/arrow2.png) no-repeat 7px 8px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;text-shadow:0 1px 0 rgba(0,0,0,0.40);margin:0 0 3px}
.menu ul li a, .classeromen{cursor:pointer;display:block;text-decoration:none;color:#fff;padding:5px 5px 4px 17px}
.menu ul li ul a{display:block;text-decoration:none;background:url(/images/sep_5.png) no-repeat 4px center;color:#fff;padding:0 0 0 18px}
.menu ul li:hover, .classeromen:hover{background:rgba(0, 0, 0, 0.7) url(/images/arrow3.png) no-repeat 7px 8px;text-decoration:none;}
.menu ul li ul a:hover{color:#ff9898}
.menu ul li ul li{width:214px;height:24px;line-height:20px;background:url(/images/hr_bg2.png) no-repeat center bottom;margin:0 auto}
.menu ul li ul li:hover{background:url(/images/hr_bg2.png) no-repeat center bottom}
.menu ul li ul li:last-child{background:none;width:214px;margin:0 auto}
.menu ul li ul li:first-child{padding:4px 0 0}
.menu ul li ul{background:rgba(0, 0, 0, 0.1);}
.ac_pl,.ac_mn{float:right;display:block;width:13px;height:13px}
.ac_pl{background:url(/images/ac_pl.png) no-repeat}
.ac_mn{background:url(/images/ac_mn.png) no-repeat}

3. Ну и наконец добавим JS код в нижнюю часть сайта в самый конец (для того чтобы ваше меню раздвигалось):
Код
<script>
$(document).ready(function() {
$(".menu").accordion({
accordion:false,
speed: 500,
closedSign: '<span class="ac_pl"></span>',
openedSign: '<span class="ac_mn"></span>'
});
});
(function($){
$.fn.extend({

//pass the options variable to the function
accordion: function(options) {
var defaults = {
accordion: 'true',
speed: 300,
closedSign: '[+]',
openedSign: '[-]'
};

// Extend our default options with those provided.
var opts = $.extend(defaults, options);
//Assign current element to variable, in this case is UL element
var $this = $(this);

//add a mark [+] to a multilevel menu
$this.find("li").each(function() {
if($(this).find("ul").size() != 0){
//add the multilevel sign next to the link
$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");

//avoid jumping to the top of the page when the href is an #
if($(this).find("a:first").attr('href') == "#"){
$(this).find("a:first").click(function(){return false;});
}
}
});

//open active level
$this.find("li.active").each(function() {
$(this).parents("ul").slideDown(opts.speed);
$(this).parents("ul").parent("li").find("span:first").html(opts.openedSign);
});

$this.find("li a").click(function() {
if($(this).parent().find("ul").size() != 0){
if(opts.accordion){

//Do nothing when the list is open
if(!$(this).parent().find("ul").is(':visible')){
parents = $(this).parent().parents("ul");
visible = $this.find("ul:visible");
visible.each(function(visibleIndex){
var close = true;
parents.each(function(parentIndex){
if(parents[parentIndex] == visible[visibleIndex]){
close = false;
return false;
}
});
if(close){
if($(this).parent().find("ul") != visible[visibleIndex]){
$(visible[visibleIndex]).slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").html(opts.closedSign);
});
}
}
});
}
}
if($(this).parent().find("ul:first").is(":visible")){
$(this).parent().find("ul:first").slideUp(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
});
}else{
$(this).parent().find("ul:first").slideDown(opts.speed, function(){
$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
});
}
}
});
}
});
})(jQuery);
</script>

4. Скачиваем архив, заливаем папку images на сервер, готово!
1694_images.zip [22.3 Kb] (Скачали 31)
Ctrl
Enter
Заметили ошЫбку
Выделите текст и нажмите Ctrl+Enter
Вернуться назад
Комментарии (3)
TOLIAXA
TOLIAXA 07.01.16, 18:05
Круто спасибо! Все работает!$RESPEKT$
0
na3uTuB4uk
na3uTuB4uk Администраторы 07.01.16, 19:55
Не за что, обращайтесь)
0
ultimatum
ultimatum 07.01.16, 21:58
Безусловно, меню очень красивое! 01
$RESPEKT$
0