[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Меню сайта ucoz - Вывод разделов для uCoz
МихалычДата: Вторник, 28.05.2013, 00:15 | Сообщение # 1



Сообщений: 31

Репутация:
Статус: Не в сети
Скрин:

Меню сайта ucoz автоматически выводит разделы вашего сайта, которые вы создаете в категориях раздела/модуля. Меню легко можно переделать под свой дизайн. Сменить цвет фона или наводки на ссылку.

Установка:
1. Заходим в ПУ - Ваш модуль (В нашем случае это Каталог файлов) - Управление категориями - создаем там разделы сайта а в них категории.
2. Заходим в Информеры и создаем информер как на скриншоте:

Открываем Управление дизайном информера и ставим туда этот код:

Код
<style type="text/css">   
   .Cat$NUMBER$ {padding-bottom:5px; padding-left:3px; padding-top:2px; background:#BAD560;}   

   a.CatLink:link, a.CatLink:active, a.CatLink:visited {text-decoration:none; font-family:tahoma; font-size:11px; font-weight:bold; color:#FFFFFF;}   
   a.CatLink:hover {text-decoration:none; font-family:tahoma; font-size:11px; font-weight:bold; color:#ffffff;}   

   a.CatLink div.CatText {background:#ACCC3D; padding:3px 5px 4px 5px; text-shadow:1px 1px 0px #004f76;}   

   a.CatLink div.CatText:hover {background:#BAD560;}   

   a.CatLink img.CatImg {height:12px; width:12px; margin-top:2px; padding-right:6px; float:right;}   

   a.CatLink img.im1$CID$ {background:url('http://likeucoz.ru/scripts/img/arrows_.png') 1px 4px no-repeat;}   
   a.CatLink img.im2$CID$ {background:url('http://likeucoz.ru/scripts/img/arrows_.png') 1px -9px no-repeat;}   
   </style>   

   <a href="javascript:Catic$NUMBER$();" class="CatLink ss$NUMBER$">   
   <img class="CatImg im1$CID$" src="http://likeucoz.ru/scripts/img/1px.gif" border="0" /><div class="CatText">$CATEGORY_NAME$</div>   
   <div style="border-top:1px solid #D3E68F; border-left:0px; border-right:0px;"></div>   
   </a>   

   <script type="text/javascript">   
   function Catic$NUMBER$(){   
   $(".ss$NUMBER$").after( $(".Cat$NUMBER$").toggle() );   
   $("img.im1$CID$").toggleClass('im2$CID$'); };   
   </script>


Заходим в Управление дизайном и ваш блок с меню заменяем на этот код:

Код
<style>   
   a.catName:link, a.catName:active, a.catName:visited {text-decoration:none; font-family:tahoma; font-size:11px; color:#FFFFFF;}   
   a.catName:hover {text-decoration:none; font-family:tahoma; font-size:11px; color:#ffffff; text-shadow:1px 1px 0px #00587a;}   
   .catName {padding-left:10px; border-bottom:1px dashed #009bc4; display:block; background:url(http://likeucoz.ru/scripts/img/arrows_.png') -4px -9px no-repeat; padding-bottom:2px; line-height:16px;}   
   </style>   

   <div style="border:1px solid #D3E68F; -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;">   
   $MYINF_2$   
   <div style="display: none;" class="Cat1">   
   <a href="/" class="catName" style="padding-left:15px;">Ссылка в раздел материала</a>   
   <a href="/" class="catName" style="padding-left:15px;">Ссылка в раздел материала</a>   
   </div>   

   <div style="display: none;" class="Cat2">   
   <a href="/" class="catName" style="padding-left:15px;">Ссылка в раздел материала</a>   
   <a href="/" class="catName" style="padding-left:15px;">Ссылка в раздел материала</a>   
   </div>   

   <div style="display: none;" class="Cat3">   
   <a href="/" class="catName" style="padding-left:15px;">Ссылка в раздел материала</a>   
   <a href="/" class="catName" style="padding-left:15px;">Ссылка в раздел материала</a>   
   </div>   
   </div>   
   <div style="padding:5px"></div>



Внимание: Разделы сайта модуль выводит сам, а категории придется прописывать вручную!
Прикрепления: 6602003.png (4.5 Kb) · 5516256.png (8.7 Kb)
 
  • Страница 1 из 1
  • 1
Поиск: