Добро пожаловать на форум!
Новые сообщения Участники Правила форума Поиск RSS
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные пользователи Новые участники
Болт (3758)
XemorDio (2726)
Skyline (2698)
Strelok41 (2177)
apaman [23.10.2017]
mogikan [23.10.2017]
MoDoStRoY [22.10.2017]
Lenin32422 [20.10.2017]
FLashstar169 [18.10.2017]
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Навигационное меню как на AP-PRO
Навигационное меню как на AP-PRO
XemorDio Дата: Суббота, 10.09.2016, 17:22 | Сообщение # 1
「 Рипер, техник сайта 」
Группа: Модераторы
Сообщений: 2726
Награды: 13 Репутация: 295
Статус: Offline

Установка: верхнюю часть сайта в любое место:
Код
<div id="ap-menu_v"></div>
<div class="b-menu">
<ul>
     
<li class="ap-menu_p" style="visibility: visible;">
<a href="/" class="ap-menu_l"><span class="ap-menu_tx" style="padding: 0 15px;">ГЛАВНАЯ</span></a>   
</li>
     
<li class="ap-menu_p" style="visibility: visible;">
<a href="/forum" class="ap-menu_l"><span class="ap-menu_tx" style="padding: 0 60px;">ФОРУМ</span></a>   
     
     
</li>
     
     
     
<li class="ap-menu_p" style="visibility: visible;">
<a href="/publ" class="ap-menu_l"><span class="ap-menu_tx" style="padding: 0 15px;">СТАТЬИ</span></a>   
</li>   
     
<li class="ap-menu_p" style="visibility: visible;">
<a href="/stuff" class="ap-menu_l"><span class="ap-menu_tx" style="padding: 0 40px;">МОДЫ</span></a>   

<div class="ap-menu_on ap-menu_dp"><ul>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/stuff/ten_chernobylja/1"><span class="ap-menu_dp_tx">Тень Чернобыля</span></a>
</li>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/stuff/chistoe_nebo/2"><span class="ap-menu_dp_tx">Чистое небо</span></a>
</li>

<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/stuff/zov_pripjati/3"><span class="ap-menu_dp_tx">Зов Припяти</span></a>
</li>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/stuff/ce/4"><span class="ap-menu_dp_tx">Cry Engine</span></a>
</li>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/stuff/drugie_platformy/5"><span class="ap-menu_dp_tx">Другие</span></a>
</li>   
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/index/stalker_top_mod_all/0-144"><span class="ap-menu_dp_tx">TOP</span></a>
</li>   
     
</ul></div>
</li>
     

<li class="ap-menu_p" style="visibility: visible;">
<a href="/blog" class="ap-menu_l"><span class="ap-menu_tx" style="padding: 0 15px;">БЛОГ</span></a>   
</li>   
     

     
<li class="ap-menu_p" style="visibility: visible;">
<a class="ap-menu_l"><span class="ap-menu_tx" style="padding: 0 20px;">СЕРВИСЫ САЙТА</span></a>   

<div class="ap-menu_on ap-menu_dp"><ul>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/news"><span class="ap-menu_dp_tx">Новости</span></a>
</li>   
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/blog/katalog_obzorov_ot_ap_pro/2014-10-03-770"><span class="ap-menu_dp_tx">Каталог обзоров</span></a>
</li>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/blog/kalendar_relizov/2013-02-11-454"><span class="ap-menu_dp_tx">Календарь релизов</span></a>
</li>

<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/blog/golosovanie_mod_mesjaca/2014-04-24-674"><span class="ap-menu_dp_tx">Мод месяца</span></a>
</li>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/blog/10_modov_v_kotorye_stoit_poigrat/2013-05-23-493"><span class="ap-menu_dp_tx">Наш выбор</span></a>
</li>   
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/blog/kalendar_stalkera/2014-10-04-771"><span class="ap-menu_dp_tx">Календарь Сталкера </span></a>
</li>   
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/index/top/0-99"><span class="ap-menu_dp_tx">Популярное</span></a>
</li>   
     
</ul></div>
</li>   

<li class="ap-menu_p" style="visibility: visible;">
<a href="/load/" class="ap-menu_l"><span class="ap-menu_tx" style="padding: 0 20px;">ФАЙЛЫ</span></a>   

<div class="ap-menu_on ap-menu_dp"><ul>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/load/teni_chernobylja/7"><span class="ap-menu_dp_tx">ТЧ</span></a>
</li>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/load/chistoe_nebo/11"><span class="ap-menu_dp_tx">ЧН</span></a>
</li>

<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/load/zov_pipjati/15"><span class="ap-menu_dp_tx">ЗП</span></a>
</li>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/load/book/20"><span class="ap-menu_dp_tx">Книги</span></a>
</li>   
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/load/raznoe/19"><span class="ap-menu_dp_tx">Другое</span></a>
</li>   
     
</ul></div>
</li>   
     
<li class="ap-menu_p" style="visibility: visible;">
<a href="javascript://" class="ap-menu_l"><span class="ap-menu_tx" style="padding: 0 35px;">ЕЩЕ</span></a>   

<div class="ap-menu_on ap-menu_dp"><ul>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/dir"><span class="ap-menu_dp_tx">ТОП сайтов</span></a>
</li>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/photo"><span class="ap-menu_dp_tx">Галерея</span></a>
</li>

<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/video"><span class="ap-menu_dp_tx">Видео</span></a>
</li>
     
   <li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/forum/5-10843-1"><span class="ap-menu_dp_tx">Ваш контент</span></a>
</li>
     
   <li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/forum/5-296-1"><span class="ap-menu_dp_tx">Вакансии</span></a>
</li>
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" href="/index/ap_production_team/0-47"><span class="ap-menu_dp_tx">О нас</span></a>
</li>   
     
</ul></div>
</li>   
     
<li class="ap-menu_p" style="visibility: visible;">
<a href="javascript://" class="ap-menu_l"><span class="ap-menu_tx" style="padding: 0 20px;">Спецпроекты</span></a>   

<div class="ap-menu_on ap-menu_dp"><ul>
     
   <noindex><li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" rel="nofollow" target="_blank" href="//youtube.com/user/TheWolfstalker"><span class="ap-menu_dp_tx">Youtube 1</span></a>
</li></noindex>
     
   <noindex><li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" rel="nofollow" target="_blank" href="//youtube.com/user/TheWolfstalker2"><span class="ap-menu_dp_tx">Youtube 2</span></a>
</li></noindex>
     
<noindex><li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" rel="nofollow" target="_blank" href="//vk.com/approduction"><span class="ap-menu_dp_tx">Группа Вконткте</span></a>
</li></noindex>   
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" target="_blank" href="//kino.ap-pro.ru/"><span class="ap-menu_dp_tx">Stalker-Film</span></a>
</li>   
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" target="_blank" href="//lost-alpha.com/"><span class="ap-menu_dp_tx">Lost Alpha Fan Site</span></a>
</li>   
     
<noindex><li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" rel="nofollow" target="_blank" href="//vk.com/gscgame"><span class="ap-menu_dp_tx">STALKER-2 News</span></a>
</li></noindex>   
     
<noindex><li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" rel="nofollow" target="_blank" href="//vk.com/projects_ap"><span class="ap-menu_dp_tx">Left to Die - News</span></a>
</li></noindex>   
     
<li class="ap-menu_dp_p">
<a class="ap-menu_dp_l" target="_blank" href="/index/twitter/0-136"><span class="ap-menu_dp_tx">Твиттер</span></a>
</li>   
     
</ul></div>
</li>   
     
</ul>
</div>

Это вставляем в ксс:
Код
/* Меню */
.ap-menu_p:hover .ap-menu_on{display: inline;}   

.b-menu {
   height: 39px;
   margin-top: -52px;
   padding-bottom: 9px;
   padding-left: 25px;
   position: relative;
   z-index: 600;
}
.ap-menu_p{
background: url("http://i.imgur.com/pPzxz0f.jpg") no-repeat scroll rgba(0, 0, 0, 0);
float: left;
position: relative;
visibility: hidden;
}

.ap-menu_p:hover .ap-menu_tx {background-position: left 0;}
     
@font-face{
font-family:'WarHeliosCondC';
font-style: normal;
font-weight: normal;
src: url("/css/warhelioscondc-webfont.eot?#iefix") format("embedded-opentype"), url("http://passagestalker.3dn.ru/design/warhelioscondc-webfont.woff") format("woff");   
}

.ap-menu_l {
   color: #d2d9d9;
   float: right;
   font-family: "WarHeliosCondC","Arial Narrow",Arial,sans-serif;
   font-size: 17px;
   font-stretch: condensed;
   height: 39px;
   line-height: 39px;
   padding: 0 0 0 1px;
   text-shadow: 1px -1px 0 #000000;
   text-transform: uppercase;
}

.ap-menu_tx {
   background: url("http://i.imgur.com/NP0HCMN.jpg") repeat-x scroll left 3000px rgba(0, 0, 0, 0);
   cursor: pointer;
   float: left;
   padding: 0 5px;
   white-space: nowrap;
}

.ap-menu_dp {
   background: #181717;
   border-color: #000 #000;
   border-image: none;
   border-style: none solid solid;
   border-width: medium 1px 1px;
   box-shadow: 0 15px 20px #000;
   left: -1px;
   min-width: 100%;
   position: absolute;
   right: -2px;
   top: 100%;
   z-index: 999;
}
.ap-menu_dp_p {
   background: url("http://i.imgur.com/0g7cbun.gif") no-repeat scroll left 3000px rgba(0, 0, 0, 0);
   border-color: #303030 #303030 #0d0d0d;
   border-style: solid;
   border-width: 1px;
}
.ap-menu_dp_p:last-child {
   border-bottom: 1px solid #303030;
}
.ap-menu_dp_p:hover {
   background-position: left top;
   background-repeat: repeat;
   border-color: #2c4b48 #2c4b48 #2c4b48;
   border-style: solid;
   border-width: 1px;
}
.ap-menu_dp_l {
   color: #919191;
   display: block;
   font-size: 13px;
   height: 30px;
   line-height: 30px;
   padding: 0;
   text-decoration: none;
   white-space: nowrap;
   width: 100%;
}
.ap-menu_dp_l:hover {color: #fff;text-decoration: none;}
.ap-menu_dp_tx {padding: 0 8px;}
a .ap-menu_dp_tx {cursor: pointer;}
.ap-menu_on {display: none;}
#ap-menu_v{background:url('http://i.imgur.com/562tLq8.jpg'); height: 65px; }
Форум » Web-раздел » Скрипты uCoz » Навигационное меню как на AP-PRO
Страница 1 из 11
Поиск:
20:54
Обновить

Хостинг от uCoz | Design by XemorDio | MODSTALKER © 2009-2017