Вертикальное многоуровневое меню для UCOZ
При наличии на сайте большого количества материалов может потребоваться многоуровневое меню (пример см. "Меню статей" слева). На просторах интернета можно найти массу различных вариантов дизайна, но установка большинства из них требует достаточно глубоких знаний в редактировании шаблонов. Предлагаемое меню хорошо тем, что может быть легко установлено даже начинающим и разобраться в его настройках не составит труда. Меню рассчитано на установку в первый контейнер глобальных блоков (левая колонка сайта). Для его установки достаточно просто скопировать его код в контейнер. Зайдите в панель управления сайтом - Дизайн - управление дизайном (шаблоны) - в глобальных блоках выберите "Первый контейнер", перед вами откроется HTML содержимое контейнера, представляющее из себя описание входящих в контейнер блоков. Начало и конец блока определяются тегами <!--<*****>--> и <!--</****>-->, где **** - название блока (конец от начала отличается наличием символа "/" перед названием блока). Сделайте резервную копию контейнера, перенеся все его содержимое обычным копированием в Word или в Блокнот, если что-то пойдет не так, восстановите контейнер из резервной копии и пробуйте заново. Определитесь, между какими блоками вы хотите вставить меню (можете посмотреть внешний вид контейнера нажав кнопку WYSIWYG (визуальный редактор)). Вставьте пару пустых строк между нужными вам блоками, чтобы лучше видеть куда будет вставляться меню. Скопируйте код меню, приведенный ниже, поставьте курсор на любую из созданных ранее пустых строк и вставьте код.
Код меню:
<!--<Menu my>-->
<style>
.menu {font-family:arial,sans-serif; width:200px; height:250px; position:relative; margin:0; font-size:11px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#E2F909; width:200px; height:40px; text-align:center; border:1px solid #fff; border-width:2px 0px 0 0; background:#3A87FB; line-height:19px; font-size:18px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#fff; background:#b3afff;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:201px; width:200px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:200px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#3A87FB; color:#E2F909; width:200px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
</style>
<div class="menu">
<ul>
<li><a class="hide" href="#">CSS3</a>
<ul>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a class="hide" href="#" title="Описание">Пункт\Подпункт</a>
<ul>
<li><a href="#" title="Описание">Подпункт меню</a></li>
<li><a href="#" title="Описание">Подпункт меню</a></li>
</ul>
</li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="http://kompas.ucoz.org/publ/remont_sborka_proshivka/3">Железо</a>
<ul>
<li><a href="http://kompas.ucoz.org/publ/remont_sborka_proshivka/sistemnyj_blok/6" title="Описание">Системный блок</a></li>
<li><a href="http://kompas.ucoz.org/publ/remont_sborka_proshivka/printery_mfu/8" title="Описание">Принтеры, МФУ</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="http://kompas.ucoz.org/publ/programnoe_obespechenie/2">Программное обеспечение</a>
<ul>
<li><a href="http://kompas.ucoz.org/publ/programnoe_obespechenie/rabota_s_sajtom/4" title="Описание">Работа с сайтом</a></li>
<li><a href="http://kompas.ucoz.org/publ/programnoe_obespechenie/sborka_sistemnogo_bloka/5" title="Описание">Сборка системного блока</a></li>
<li><a href="http://kompas.ucoz.org/publ/programnoe_obespechenie/vosstanovlenie_sistemy/7" title="Описание">Восстановление и настройка системы</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="#">Скрипты</a>
<ul>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="#">Ресурсы</a>
<ul>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="#">Видеоуроки </a>
<ul>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
<li><a class="hide" href="#">Форум</a>
<ul>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
<li><a href="#" title="Описание">Пункт меню</a></li>
</ul>
</li>
</ul>
</div>
<!--</Menu my>-->
После вставки кода нажмите кнопку "Сохранить" и можете посмотреть результат, обновив страницу вашего сайта. Дальнейшую настройку меню осуществляете в зависимости от ваших потребностей. Весь код разбит на две части "Стиль", между тегами <style> и </style> (внешний вид), и само меню - все остальное. По внешнему виду: width:200px - ширина меню (параметр встречается в блоке несколько раз, меняйте цифру сразу везде, иначе получатся блоки разной ширины); left:201px - начало следующего столбца блоков (следите чтобы было не меньше ширины предыдущего иначе будет наложение); height:40px - высота блока; height:250px - высота всего меню (взята с запасом на несколько строк, но если ваше меню все-таки не будет помещаться, можете увеличить); font-size:18px - размер шрифта; background:#3A87FB; и color:#E2F909; - цвета блока и текста соответственно (меняется шестизначное значение между # и ;), значение меняется от 000000 до FFFFFF в соответствии со стандартом записи цветов в шестнадцатиричной системе (можете просто ставить любые цифры и буквы ABCDEF). По меню: вместо "Пункт меню" - вставляете название вашего пункта, вместо "#" - вставляете ссылку на нужную страницу (чтобы узнать ссылку страницы зайдите на неё и посмотрите ее адрес в верхней строке браузера)( для примера несколько строк меню заполнено). Для названия меню можете использовать верхний блок (введите название, а ссылку не ставьте и в поле будет просто текст). Для удаления или добавления строк в меню исправьте код добавлением или удалением соответствующих строк кода. Чтобы посмотреть сделанные изменения надо нажать "Сохранить" и обновить страницу вашего сайта.
| 
