Опрос сайта
Что вас интересует ?
Последние комментарии
Avatar User
Написал N_O_O_B в 11:36
Avatar User
Написал na3uTuB4uk в 16:58
Avatar User
Написал na3uTuB4uk в 16:53
Avatar User
Написал N_O_O_B в 17:46
Уголок общения
Статистика
Онлайн всего: 2
Гостей: 2
Пользователей: 0


Онлайн ни кого =(

Скрипт раздвижное меню в стиле wot

Меню сделано под шаблон Скачать шаблон под тематику world of tanks для uCoz которые можете скачать с этого сайта.

Установка:
1.) Скачиваем архив и заливаем в корень сайта.
2.) В таблицу стилей в самый низ прописываем следующее:
Код
.side-navigation{width:195px;background:url('/menu_vot/76832.png') #291C16;box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.5);border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin-bottom:10px;color:#fff}
.side-navigation .block-head{color:#fff;font-size:18px;font-family:arial,tahoma;padding:4px 8px;border-bottom:1px solid #000}
.side-navigation .block-inner{padding-bottom:2px}
.side-block .block-inner{padding:5px;}
.side-block .block-inner.nopadding{padding:0px !important;}

.zp-links a{display:block;color:#fff;padding:4px 8px;border-bottom:1px solid #000;border-top:1px solid #3B2D2A;text-shadow:0px 1px 0px #000;-moz-transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;font-weight:bold;outline:none;text-decoration:none;}
.zp-links a:hover{color:#FFB32E;padding-left:14px;background:rgba(0,0,0,0.2)}
.zp-links a.w-sub{background:url('/menu_vot/submenu-btn.png') no-repeat;background-position:180px 7px}
.zp-links a.w-sub:hover{background:url('/menu_vot/submenu-btn.png') no-repeat rgba(0,0,0,0.2);background-position:185px 7px}
.zp-links .s-level a.w-sub{font-weight:bold;background-position:182px 7px}
.zp-links .s-level a.w-sub:hover{background-position:190px 7px}
.zp-links .s-level{padding-left:22px; background:url('/menu_vot/123-08.png');}
.zp-links .s-level a{border-left:2px solid #272727;font-weight:normal}
.zp-links .s-level a:hover{padding-left:8px;margin-left:-8px}

3.) А вот это прописываем в блок там где будет это меню:
Код
<div class="side-navigation">
<div class="block-inner">
<div class="zp-links">
<a title="Title" href="#">Ссылка в меню #1</a>
<a title="Title" href="#">Ссылка в меню #2</a>
<a title="Title" href="#">Ссылка в меню #3</a>
<a title="Title" href="#">Ссылка в меню #4</a>
<a title="Title" href="#">Ссылка в меню #5</a>  

<a rel="soft-menu" class="w-sub" href="javascript://">Выпадающее меню №1</a>
<div class="s-level" id="soft-menu" style="display: none">
<a title="Title" href="#">Подпункт №1</a>
<a title="Title" href="#">Подпункт №2</a>
<a title="Title" href="#">Подпункт №3</a>
<a title="Title" href="#">Подпункт №4</a>
<a title="Title" href="#">Подпункт №5</a>
<a title="Title" href="#">Подпункт №6</a>  
</div>

<a rel="games-menu" class="w-sub" href="javascript://">Выпадающее меню №2</a>
<div class="s-level" id="games-menu" style="display: none">
<a title="Title" href="#">Подпункт №1</a>
<a title="Title" href="#">Подпункт №2</a>
<a title="Title" href="#">Подпункт №3</a>
<a title="Title" href="#">Подпункт №4</a>
<a title="Title" href="#">Подпункт №5</a>
<a title="Title" href="#">Подпункт №6</a>  
</div>

<a rel="kino-menu" class="w-sub" href="javascript://">Выпадающее меню №3</a>
<div class="s-level" id="kino-menu" style="display: none">
<a title="Title" href="#">Подпункт №1</a>
<a title="Title" href="#">Подпункт №2</a>
<a title="Title" href="#">Подпункт №3</a>
<a title="Title" href="#">Подпункт №4</a>
<a title="Title" href="#">Подпункт №5</a>
<a title="Title" href="#">Подпункт №6</a>
</div>  

<a rel="pers-menu" class="w-sub" href="javascript://">Выпадающее меню №4</a>
<div class="s-level" id="pers-menu" style="display: none">
<a title="Title" href="#">Подпункт №1</a>
<a title="Title" href="#">Подпункт №2</a>
<a title="Title" href="#">Подпункт №3</a>
<a title="Title" href="#">Подпункт №4</a>
<a title="Title" href="#">Подпункт №5</a>
<a title="Title" href="#">Подпункт №6</a>  
</div>

</div>  
</div>
</div>

<script type="text/javascript">
$(function(){
$(".s-level").hide();
$(".zp-links a.w-sub").click(function(){
var submenu = $(this).attr('rel');
$("#"+submenu+"").toggle('fast');
});
});
</script>
<script type="text/javascript" src="/menu_vot/m_color.js"></script>

Всего комментариев: 2
№ 1 Написал: Kosten Дата: 08.10.2013 Время: 12:48
Avatar user
Отличное меню.. давно его проверял полностью рабочие.
№ 2 Написал: N_O_O_B Дата: 08.10.2013 Время: 17:46
Avatar user
Мне оно тоже понравилось...Если в светло зеленое его покрасить еще будет красивей...