Вертикальное раздвижное меню на Ucoz

Вертикальное раздвижное меню на Ucoz Эта статья посвящена тому, как сделать меню, такое же как на этом сайте. Эта тема неоднократно поднималась на форуме. Но, почему-то у всех она вызывает массу вопросов. Поэтому разберем ее еще раз по полочкам. Итак, первое с чем Вам надо разобраться, это со структурой своего меню, а соответственно и всего сайта. Например, раздел Дети и в нем категории  Здоровье, Воспитание и так далее.
Тогда код меню будет выглядеть следующим образом:<script language=»JavaScript»> 
 function hide(obj) { 
 if(document.getElementById(obj).style.display == »)
 {document.getElementById(obj).style.display = ‘none’; 
 }
 else
 {document.getElementById(obj).style.display = »; 
 }
 } 
 </script> 
 
 
<a href=»/» class=»menu2″> Главная</a><br> 
<a onclick=»hide(‘sub1’)» class=»menu2″ > Дети</a><br> 
 
 <span id=»sub1″ style=»display: none; «>  
 <a href=»http://otlichnica.ucoz.ru/publ/12″ class=»menu2sub»> Здоровье ребенка</a><br>  <a href=»http://otlichnica.ucoz.ru/publ/11″ class=»menu2sub»> Воспитание детей</a><br> 
 <a href=»http://otlichnica.ucoz.ru/publ/10″ class=»menu2sub»> Развитие ребенка</a><br> 
 <a href=»http://otlichnica.ucoz.ru/publ/19″ class=»menu2sub»> Няня для ребенка</a><br> 
 </span> 
Теперь поясню на пальцах, что делает этот код.Сначала идет Ява-скрипт, который определяет, если задано свойство не показывать элемент display: none;  и вызывается скрипт, то у этого элемента это свойство сбрасывается и он показывается.А теперь давайте посмотрим само меню. Сейчас оно у нас состоит из 2 пунктов: Главная и Дети. Для главной стоит ссылка на главную страницу сайта href=»/» , а у Дети ссылки как таковой нет, потому что при нажатии на нее, мы хотим получить выпадающий список подпунктов. Для того, что список выпадал именно при нажатии мы прописали функцию onclick=»hide(‘sub1’)»Она срабатывает  при нажатии и как раз передает скрипту, что у элемента sub1 надо изменить свойство видимости. А элемент sub1 у нас это как раз категории раздела:<span id=»sub1″ style=»display: none; «>  
 <a href=»http://otlichnica.ucoz.ru/publ/12″ class=»menu2sub»> Здоровье ребенка</a><br>  сколько угодно подпунктов
 <a href=»http://otlichnica.ucoz.ru/publ/19″ class=»menu2sub»> Няня для ребенка</a><br> 
 </span> Первоначально, как видите (style=»display: none;) он у нас невидим, а при нажатии станет виден он и все его содержимое, еще при одном нажатии, он опять скроется.И таких элементов у нас может быть сколько угодно, главное, у каждого должен быть свой идентификатор. Т.е. если мы захотим добавить еще один пункт, то будет так<a onclick=»hide(‘sub2’)» class=»menu2″ > Еще один пункт</a><br> 
 
 <span id=»sub2″ style=»display: none; «>  
 <a href=»ссылка» class=»menu2sub»> Подпункт 1</a><br>  ….
 <a href=»ссылка» class=»menu2sub»> Подпункт 2</a><br> 
 </span> 
Со структурой мы разобрались. Теперь вопрос, куда весь этот код вставить? Вариантов два. Все зависит от того, куда Вы хотите вставить свое меню. Если меню будет выводиться в глобальном блоке, например Левый контейнер, то просто вставьте этот код вместо Вашего имеющегося меню. А если меню выводится прямо в шаблонах Страницы сайта, Каталог статей и т.д. То Вы можете создать новый глобальный блок, назвать его MY_MENU и вставить код туда, а потом уже на страницах шаблона в нужное место вставить код глобального блока.
Теперь по поводу внешнего вида. Каждый задает свои стили и универсальных тут я не укажу. Я укажу те стили, которые используются на этом сайте, а Вы уже их сможете изменить под свой дизайн. Итак, Вам необходимо в таблице css добавить следующие строки:
 .menu2 {float:left;padding:5px;height:17px;width:166px; background:#fff; color:#39435D;cursor:pointer; } 
 a.menu2:link {text-decoration:none; color:#39435D} 
 a.menu2:active {text-decoration:underline; color:#38435D} 
 a.menu2:visited {text-decoration:none; color:#39435D} 
 a.menu2:hover {text-decoration:none; color:#FF9900;} 

 .menu2sub {background: #EEE;border: 1px dotted #CCC;float: left;margin:2px;padding:5px;width: 167px;}
 a.menu2sub:link {text-decoration:none; color:#39435D} 
 a.menu2sub:active {text-decoration:underline; color:#39435D} 
 a.menu2sub:visited {text-decoration:none; color:#39435D} 
 a.menu2sub:hover {text-decoration:none; color:#A1B144} 
menu2 — это стили пунктовmenu2sub — это стили подпунктовИх Вы можете менять, как Вам угодно.И остался еще один момент. Как сделать так, чтобы при переходе по вложенным подпунктам  они оставались открыты, а не сворачивались назад и активный подпункт выделялся. Об этом я расскажу в следующей статье, дабы не создавать в Вашей голове кашу. Как только Вы получите рабочее меню с удовлетворяющим Вас дизайном, можете переходить к следующей статье.
P.S.: статья была написана уже более года назад, но ее популярность не ослабевает до сих пор. И в меню вносятся все новые и новые усовершенствования. И сейчас я хочу добавить еще одно:если код предложенного выше меню у Вас на сайте не работает, попробуйте поменять функцию hideнаo_hideЭто порекомендовал сделать наш специалист по Ява-скриптам KorniloFF , аргументировав это тем, что слово hide иногда конфликтует с зарезервированными словами

Комментарии на Facebook