Древовидное меню

Иногда наше меню становится большим и нам на помощь приходит выпадающее меню. Но иногда меню становится слишком большим :) И вот тогда нам на помощь придёт древовидное меню. В принципе это довольно удобно, когда один пункт открывается вслед за другим. Понятно какая тема открыта, на какой страничке вы находитесь и т.д.

Так же несомненным плюсом является компактность древовидного меню. Его можно уменьшить вплоть до пары строчек и всё равно всё будет видно и понятно. Конечно можно уменьшить и выпадающее меню. Но там и так бардак по жизни, а если ещё и количество пунктов уменьшить за счёт увеличения количества уровней, то вообще беда будет :)


Древовидное меню можно сделать как вертикальным, так и горизонтальным. И как всегда я сперва перерыл пол интернета в поисках нормально работающей версии. И как всегда после долгих мытарств решил не изобретать велосипед :) Оказывается есть хороший плагин к программе Dreamweaver, называется он Tree Menu Magic. Правда он только на английском, но там и так всё понятно.

Устанавливается он тоже просто. Открываете меню - команды, далее управление расширениями, находите плагин Tree Menu Magic и устанавливаете. А вот для других программ на счёт аналогичных плагинов для установки древовидного меню не знаю, так как пользуюсь в основном программой Dreamweaver и блокнотом.

Если у кого беда с переводом, то вот перевод некоторых настроек. Переводил с помощью переводчика, править не стал, мало ли что. Просто давно не пользовался этим плагином. Так что если кто то пришлёт удобоваримый перевод, то большое ему спасибо :)

trigger action (провоцирующее действие) (0) allow page link on trigger (позволит страницы ссылка на триггер) (0) toggle sub menus (переключения подменю)

page load (при загрузке страницы) (0) open sub levels (открыть подуровней) open to level (открыть уровня) (0) include open all / close links (включают открыть все / тесных связей)

image swap options (варианты изображения своп) (0) rollover open state (опрокидывание открытом состоянии) (0) rollover mark state (опрокидывание знак состоянии)

current marking (текущие маркировки) (0) use current marking (использовать текущие маркировки) (0) include URL parameters in match (включать URL параметров в матче)

Перевод конечно гадость, но по крайней мене не придётся слова переписывать заново, если что :)


Кстати, если вы сделали выпадающее меню в программе Dreamweaver, то переделать его на древовидное не составит труда. Надо будет только подправить некоторые пункты. В общем работы не так много, как может показаться на первый взгляд. Это я к тому, что можете сперва выпадающее меню Spry сделать, потом если что на древовидное перейти.

Одна беда - править меню можно будет только копаясь напрямую в коде. Графического интерфейса для правки, у плагина Tree Menu Magic пока нет, да наверное и не будет. Но там тоже всё просто. По структуре почти как простое меню. Вот небольшой кусочек кода для примера:

<div id="menu_1oc" class="menu10_toggle_all">
<div class="menutoggle"><a id="menu_1oa" href="#">Открыть всё меню</a> | <a id="menu_1ca" href="#">Закрыть</a></div>
</div>
<div id="menu_1" class="menu10">
<ul class="menu">
<li><a href="#">Создание сайта</a>
<div><ul>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/hosting/hosting.php">Хостинг</a>
<div><ul>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/hosting/hosting.php">Хостинг</a></li>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/hosting/hosting/besplatnij-hosting.php">Бесплатный хостинг</a></li>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/hosting/hosting/platnij-hosting.php">Платный хостинг</a></li>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/hosting/testovij-server/testovij-server.php">Тестовый сервер</a></li>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/hosting/testovij-server/apache.php">Apache, апача, php, mysql</a></li>
</ul></div>
</li>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/osnovnoe/osnovnoe.php">Создание сайта, основное</a>
<div><ul>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/osnovnoe/osnovnoe.php">Создание сайта, основное</a></li>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/osnovnoe/tema-dlya-sajta/tema-dlya-sajta.php">Тема</a></li>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/osnovnoe/kontent-statyi/kontent-statyi.php">Контент</a></li>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/osnovnoe/kontent-statyi/razmer-kontenta-stati.php">Размер контента, статьи</a></li>
<li><a href="http://seozar.ru/sozdanie-raskrutka-sajta/osnovnoe/kontent-statyi/plagiat.php">Плагиат</a></li>
</ul></div>
</li>
</ul>

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


Ну и небольшой кусочек кода из таблицы стилей CSS, с небольшими пояснениями для новичков:

.menu10 ul {
font-size: 10px; /* первый уровень */
margin: 0;
padding: 0;
}
.menu10 ul ul {
font-size: 10px; /* второй уровень */
}
.menu10 ul ul ul {
font-size: 10px; /* четвёртый уровень */
}
.menu10 ul ul li {
padding-left: 10px; /* отступы пунктов меню */
}
.menu10 ul a:link, .menu10 ul a:visited {
color: #666; /* цвет шрифта */
display: block;
padding: 3px 8px 3px 14px;
text-decoration: none;
zoom: 1;
font-variant: small-caps;
outline: 0;
}
.menu10 ul a:hover, .menu10 ul a:focus, .menu10 ul a:active {
color: #000; /* цвет выделения шрифта */
text-decoration: underline;
}
.menu10 ul ul a.trig_closed, .menu10 ul ul a.trig_open {
font-variant: small-caps;
font-size: 10px; /* третий уровень */
}
/* открыть, закрыть меню */
.menu10_toggle_all a:link, .menu10_toggle_all a:visited {
color: #666; /* открыть, закрыть меню, цвет шрифта */
font-variant: small-caps;
outline: 0;
text-decoration: underline;
}
.menu10_toggle_all a:hover, .menu10_toggle_all a:focus, .menu10_toggle_all a:active {
color: #000; /* открыть, закрыть меню, цвет выделения шрифта */
text-decoration: underline;
}


Ну и небольшой совет напоследок. Бывает что в меню слишком много пунктов и оно вытягивается как портянка :) Сокращать количество пунктов за счёт увеличения уровней вложенности не вариант, так как и так он уже слишком большой. У меня на сайте он доходил до четырёх и честно говоря, пока откроешь всю эту гармошку пара лет уходила :) Можно конечно сделать пару кнопочек - открыть, закрыть всё меню. Но тогда это опять портянка получается.

Вот что бы посетители ваших сайтов на тратили время на бесконечное открывание и закрывание всяких подпунктов меню, можно просто спрятать древовидное меню в скроллинг. И задать ему высоту к примеру в 600 рх, или в процентном соотношении. И оно будет всегда примерно в размер вашего сайта. Достаточно прописать в таблице CSS такой код:

.menu10{
width: 235px; height: 350px; overflow: auto; overflow-x: hidden;
}

width - ширина, height - высота.

Кстати, так можно спрятать любое меню, а не только древовидное.

Немного рекламы :)

Copyright, design, ideas © Mihail. При копировании материалов, ссылка на сайт "Seozar.ru" обязательна. Контакты - admin@halych.ru
Тариф «Первый»: 2 сайта, 1 Гб, 2 MySQL, 2 FTP