Раздвижное вертикальное меню "баян" для категорий сайта Ucoz

Голоса: +1

Подскажите как для функции категорий $CATEGORIES$ сделать красивое раздвижное вертикальное меню "баян".
Как в CSS сайта прописать внешний вид модуля $CATEGORIES$.

Что-то типа такого:

Адрес сайта http://kulinars.at.ua
| Автор: | Категория: Меню сайта
Редактирование | | Автор: Vladimir Sharabarin

Ответов: 1

Голоса: +1
 
Лучший ответ

Для категорий вида - $CATEGORIES$ подобное не реализовать, но можно же для каждого модуля создать информер категорий где и имеется подобная возможность к настройке и написанию новых классов в которые можно завернуть код информера и задать те стили какие вам нужно.

Для реализации информера категорий подобного вида, обратитесь на - http://upartner.pro/ где добавьте проект и выберите лучшего исполнителя для выполнения вашего заказа.

Возможно у вас появится мысль, а почему вы не поможете сделать такое, отвечу заранее, это не 5-минутное дело и чтобы подобное реализовать нужно потратить на это время не 5 и не 10 минут поэтому обращайтесь к фрилансерам.

| Автор:
Выбор ответа лучшим | | Автор: Yuri_Geruk
Извините, но та ссылка, что вы предоставили ниже это не совсем то, что вы просили и это не решит вашего вопроса.

Как можно решить я уже ответил, для этого есть информеры в которых все очень просто настраивается. Чтобы сделать категории в виде блока раздвижного меню еще и скрипт нужно писать и это не так просто как вы можете подумать.

Могу посоветовать конечно прочесть материал - http://ugarts.ru/publ/menu/vertikalnoe_vypadajushhee_menju_vybora_kategorij/2-1-0-41 но вас это не устроит конечно.
Вот это совсем другой ответ, который меня вполне удовлетворяет.
Сылка на Ваш материал - ПРОСТО ОТЛИЧНАЯ! Она меня вполне удовлетворяет.
Сейчас попробую вставить этот скрипт на сайт, а потом доработать его самостоятельно.

Я для блога себе делал меню категорий именно через информера без меню гармошки конечно, сделал немного проще, в сети нашел CSS спойлер который так же изменил под себя и завернул блок категорий именно в спойлер - http://k-94.ru/p/css-spoiler/

Плюс для блока категорий как пример вы можете взять материал - http://ugarts.ru/publ/menu/menju_v_stile_flat/2-1-0-49

Если прочесть внимательно, можно все очень легко переделать для информера.

Как пример перейдем и создадим информер категорий - http://kulinars.at.ua/panel/?a=informers создали мы информер категорий для нужного нам модуля:

Далее ниже появится созданный информер, нажмите на ссылку - шаблон информера, далее вы увидите стандартный код:

<a href="$CATEGORY_URL$" class="catName">$CATEGORY_NAME$</a> <span class="catNumData">[$NUM_DATA$]</span><?if($CATEGORY_DESCR$)?><div class="catDescr">$CATEGORY_DESCR$</div><?endif?>

который мы можем изменить под себя смотря на пример флат меню по ссылке выше, на следующий код:

<ul class="ulMenu">  
<li class="liMenu"><a href="$CATEGORY_URL$"><span class="num">$NUM_DATA$</span><span class="icon-paragraph-justify"></span>$CATEGORY_NAME$</a></li>   
</ul>

И установив стили в таблицу стилей:

 .ulMenu {background:#fff;display: block;margin: 2px 5px;border-radius:3px;box-shadow:0 1px 2px #ddd;list-style:none;overflow:hidden;padding:0;} 
 .liMenu {font:Bold 12px Helvetica,sans-serif;border-bottom:1px solid #ddd;margin: -1px -5px;} 
 .liMenu > a {color:#333;text-decoration:none;display:block;padding:18px;} 
 .liMenu > a > span[class*=icon-] {margin:0;} 
 .liMenu .num {float:right;font-size:11px;color:#fff;background:#2eb398;margin-top:1px;border-radius:50px;padding:2px 10px;} 
 .liMenu:hover {background:#e76049;} 
 .liMenu:hover > a, .liMenu.withSub.active > a {color:#fff;} 
 .liMenu:hover > a > .num, .liMenu.withSub.active .num {background:#c84029;} 
 .liMenu.active {background:#de4f37} 
 .ulSubMenu {list-style:none;background:#e76049;padding:0;border-top:1px solid #ec806d;display:none;} 
 .liSubMenu {color:#fff;font:Bold 12px Helvetica,sans-serif;} 
 .liSubMenu > a {color:#fcd9d4;text-decoration:none;display:block;padding:10px 10px 10px 25px;} 
 .liSubMenu:hover > a {color:#fff;} 

получите вполне привлекательный блок категорий.

В то место где хотите чтобы отображался информер установите код вида $MYINF_ID$ где вместо ID номер вашего информера.

И получим мы блок категорий следующего вида:

в общем, блок получился вполне хорош и его можно полностью настраивать под себя.

Огромное СПАСИБО!
Единственный минус - это то, что для каждого блока Блог, Новости, Каталог файлов, Каталог статей придется делать каждому свой информер, а потом в первой колонке шаблона делать непонятную конструкцию из целого блока

<?if($ Наименование модуля$)?> $MYINF_число$  и <?endif?>
Да, есть такой момент, но выхода другого нет, я именно так и сделал, проще так чем заказывать скрипт который будет еще более нагружать сайт и выполнять замену стилей в категориях на нужные мне.

Если вам непонятно как сделать подобное условие, отпишитесь, подскажем.
Можно от вас получить пример такого условия.
<?if($MODULE_ID$='index')?>модуль редактор страниц<?endif?>
<?if($MODULE_ID$='blog')?>модуль блог<?endif?>
<?if($MODULE_ID$='news')?>модуль новости<?endif?>
<?if($MODULE_ID$='publ')?>модуль каталог статей<?endif?>
<?if($MODULE_ID$='load')?>модуль каталог файлов<?endif?>
<?if($MODULE_ID$='dir')?>модуль каталог сайтов<?endif?>
<?if($MODULE_ID$='board')?>модуль каталог объявлений<?endif?>
<?if($MODULE_ID$='stuff')?>модуль игры<?endif?>
<?if($MODULE_ID$='video')?>видео<?endif?>
<?if($MODULE_ID$='shop')?>магазин<?endif?>

дополнительно, если нужно составить условие под себя, читаем материал - http://www.ucoz.ru/qa/index.php/11422 и смотрим айди на нужной вам страниц е и составляем по ходу.

Спасибо большое за такой подробный ответ! Теперь мне все понятно.
Вопросов у меня больше не осталось.
...