» »

Раздвижное меню ucoz под шаблон World of tanks


Меню для сайта uCoz. Меню сайта под шаблон сайта для ucoz World of tanks. Меню в темно желтых тенях по дизайну. Если его устанавливать на другой шаблон надо будит в файловый менеджер в название папки поменять в который он залит в корень сайта. А если под шаблон World of tanks то делаем так.
Установка:
1.Качаем файлы и загружаем в ФМ-> В путь:-> /images/menu_vot/
2.Идем в таблицу стилей, и кидаем код в самый низ:
Код
.side-navigation{width:195px;background:url('/images/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('/images/menu_vot/submenu-btn.png') no-repeat;background-position:180px 7px}  
  .zp-links a.w-sub:hover{background:url('/images/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('/images/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="Главная" href="http://zornet.ru/">Главная</a>  
  <a title="Форум игрока" href="http://zornet.ru/forum/">На форум</a>  
  <a title="Новости" href="http://zornet.ru/news/">Новости</a>  
  <a title="Музыка" href="http://zornet.ru/blog/">Музыка</a>  
  <a title="Статьи" href="http://zornet.ru/publ/">Статьи</a>  
  <a title="ФотоZал" href="/photo/" >ФотоZал</a>  
  <a title="КиноZал" href="/stuff/" >Wot menu</a>  
  <a title="Обзор Игр" href="/board" >Wot menu</a>  
  <a title="Файловый архив" href="/load" >Файловый архив</a>  
  <a title="Мониторинг серверов" href="/dir" >Мониторинг серверов</a>  
  <a rel="soft-menu" class="w-sub" href="javascript://">uCoz</a>  
  <div class="s-level" id="soft-menu" style="display: none">  
  <a title="Шаблоны для Ucoz" href="/load/13" >Шаблоны</a>  
  <a title="Скрипты для Ucoz" href="/load/14" >Скрипты</a>  
  <a title="Шапки для Ucoz" href="/load/15" >Шапки</a>  
  <a title="Смайлы и Иконки для Ucoz" href="/load/16" >Смайлы и Иконки</a>  
  <a title="PSD Баннера 468x60 и 88x31" href="/load/47" >PSD Баннера</a>  
  <a title="Часы для Ucoz" href="/load/48" >Часы</a>  
  <a title="Иконки групп для Ucoz" href="/load/50" >Иконки групп </a>  

  </div>  
  <a rel="games-menu" class="w-sub" href="javascript://">Шкурки для wot</a>  
  <div class="s-level" id="games-menu" style="display: none">  
  <a title="Консольные команды для Counter strike 1.6" href="/load/19" >Зимние</a></a>  
  <a title="Готовые Сервера для Counter strike 1.6" href="/load/20" >Летние </a>  
  <a title="Модели Игроков для Counter strike 1.6" href="/load/21" >Модели Игроков </a>  
  <a title="Модели Оружия для Counter strike 1.6" href="/load/22" >Модели Оружия</a>  
  <a title="Анти-читы для Counter strike 1.6" href="/load/23" >Анти-читы </a>  
  <a title="Плагины для Counter strike 1.6" href="/load/24" >Плагины </a>  
  <a title="Карты для Counter strike 1.6" href="/load/25" >Карты </a>  
  <a title="Читы для Counter strike 1.6" href="/load/26" >Читы </a>  
  <a title="Боты для Counter strike 1.6" href="/load/44" >Боты</a>  
  <a title="Звуки для Counter strike 1.6" href="/load/45" >Звуки</a>  
  <a title="Моды для Counter strike 1.6" href="/load/46" >Моды</a>  
  <a title="Config.cfg Конфиги для Counter strike 1.6" href="/load/51" >Config.cfg Конфиги</a>  
  </div>  
  <a rel="kino-menu" class="w-sub" href="javascript://">Counter-Strike: Source</a>  
  <div class="s-level" id="kino-menu" style="display: none">  
  <a title="Скачать Counter-Strike:Source" href="/load/29">Counter-Strike:Source</a>  
  <a title="Скачать Counter-Strike:Source" href="/load/30">Программы</a>  
  <a title="Скачать Counter-Strike:Source" href="/load/32">Плагины</a>  
  <a title="Скачать Counter-Strike:Source" href="/load/33">Античиты</a>  
  <a title="Скачать Counter-Strike:Source" href="/load/34">Карты</a>  
  <a title="Скачать Counter-Strike:Source" href="/load/35">Модели игроков</a>  
  <a title="Скачать Counter-Strike:Source" href="/load/36">Модели оружия</a>  
  <a title="Скачать Counter-Strike:Source" href="/load/56">Готовые сервера</a>  
  </div>  

  <a rel="pers-menu" class="w-sub" href="javascript://">MINECRAFT</a>  
  <div class="s-level" id="pers-menu" style="display: none">  
  <a title="Моды для minecraft" href="/load/38">Моды</a>  
  <a title="Клиенты для minecraft" href="/load/39">Клиенты</a>  
  <a title="Текстуры для minecraft" href="/load/42">Текстуры</a>  
  <a title="Карты для minecraft" href="/load/43">Карты</a>  
  <a title="Софт для minecraft" href="/load/40">Софт</a>  
  <a title="Разное для minecraft" href="/load/41">Разное</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="/images/menu_vot/m_color.js"></script>

Шаблон World of tanks переделанный и доработанный вы можете скачать на нашем сайте.
11.03.2013 Загрузок: 42 Просмотров: 3683 Комментарий: (19)

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

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

Комментарий: 17
Диона
Диона 01.03.2014 18:301
0
Помогите пожалуйста. Поставила данное меню. Но мне маловато раздвижных пунктов, как можно их увеличить?
Kosten
Kosten 01.03.2014 20:592
0
Увеличить в габаритах или в разделах?
Диона
Диона 02.03.2014 10:413
0
Не, это не то. Это я и сама умею делать. Мне нужны дополнительные блоки с подменю. Их в этом меню 4 а мне надо еще бы три. Вот я нажимаю например на название в меню и оно открывается и там несколько подпунктов. Вот что мне надо. Как это сделать?
Диона
Диона 02.03.2014 13:374
0
Вот спасибо сейчас попробую.
Диона
Диона 02.03.2014 13:445
0
Ой, спасибо получилось. Вот еще маленький вопросик я не найду где удалить несуществующую картинку у меня там просто квадратик а здесь стрелочки и у меня их нет.
๖ۣۜInspire
๖ۣۜInspire 02.03.2014 13:506
0
нужно скачать архив и залить его содержимое в папку /images/menu_vot/, в архиве эта стрелочка есть и она называтся submenu-btn.png
ну а если она совсем не нужна то найдите вот это
Код
.zp-links a.w-sub{background:url('/images/menu_vot/submenu-btn.png') no-repeat;background-position:180px 7px}
.zp-links a.w-sub:hover{background:url('/images/menu_vot/submenu-btn.png') no-repeat rgba(0,0,0,0.2);background-position:185px 7px}
и замените на это
.zp-links a.w-sub{background-position:180px 7px}
.zp-links a.w-sub:hover{background-position:185px 7px}
Диона
Диона 02.03.2014 14:137
0
Огромное спасибо. Справилась со всеми проблемами. Аж два лишних блока поставила раздвижных. СПАСИБО!!!!
Kosten
Kosten 02.03.2014 14:178
0
это меню можно под сайт сделать по дизайну.
Диона
Диона 02.03.2014 14:379
0
А как можно фон меню поменять? Вообще я балдею от этого меню. Наконец-то нашла что искала. Вот только фон немного другой. http://olgalrblog.com/ вот фон моего сайта. Как можно подогнать?
๖ۣۜInspire
๖ۣۜInspire 02.03.2014 15:5210
0
.zp-links a, .s-level {
background: #ccc;
}
фон пунктов меню, там где подчёркнуто - цвет фона
если нужен фон картинкой
.zp-links a, .s-level {
background: url("ссылка");
}
-------------
.zp-links a:hover, .s-level:hover{
background:#цвет
}
это назначается фон при наведении
1 2 »
avatar