Archie Goodwin

Предыстория

Еще давным давно нашел вертикальное раскрывающееся меню, которое было написано на чистом JavaScript. Стилизировал меню "под себя" и успешно использовал не менее двух лет еще на своих самых ранних проектах.

Основную идею этого скрипта я позже использовал для других меню, которые писал и переписывал самостоятельно, в том числе, оно послужило основой и для меню, которое выступает здесь навигатором среди рубрик блога. Старый скрипт у меня сохранился, но не использовался потому что он устарел.

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

Особенности меню:

• Независимость сворачивающихся элементов меню первого уровня друг от друга
• Меняющаяся иконка Плюс/Минус в зависимости от свернутого или развернутого статуса элемента меню первого уровня
• Нет ограничения для количества элементов списка в меню
• Можно самому задать с помощью класса open или close состояние по умолчанию списка первого уровня - развернутый или свернутый.
• Небольшой вес скрипта и всего три картинки-иконки
• Простота скрипта ограничивает глубину вложения меню до элементов списка второго уровня.

HTML код по своей структуре не содержит чего-либо необычного и состоит из списка ul с двумя уровнями:

<ul class="xpandermenu">
 <li class="subtitleli open"><span class="subtitle minus">SubTitle 1</span>
 <ul>
 <li><a href="http://archie-goodwin.net/">Link 1</a></li>
 <li><a href="http://archie-goodwin.net/">Link 2</a></li>
 <li><a href="http://archie-goodwin.net/">Link 3</a></li>
 <li><a href="http://archie-goodwin.net/">Link 4</a></li>
 <li><a href="http://archie-goodwin.net/">Link 5</a></li>
 </ul>
 </li>
 <li class="subtitleli close"><span class="subtitle plus">SubTitle 2</span>
 <ul>
 <li><a href="http://archie-goodwin.net/">Link 1</a></li>
 <li><a href="http://archie-goodwin.net/">Link 2</a></li>
 <li><a href="http://archie-goodwin.net/">Link 3</a></li>
 <li><a href="http://archie-goodwin.net/">Link 4</a></li>
 <li><a href="http://archie-goodwin.net/">Link 5</a></li>
 </ul>
 </li>
 <li class="subtitleli close"><span class="subtitle plus">SubTitle 3</span>
 <ul>
 <li><a href="http://archie-goodwin.net/">Link 1</a></li>
 <li><a href="http://archie-goodwin.net/">Link 2</a></li>
 <li><a href="http://archie-goodwin.net/">Link 3</a></li>
 <li><a href="http://archie-goodwin.net/">Link 4</a></li>
 <li><a href="http://archie-goodwin.net/">Link 5</a></li>
 </ul>
 </li>
</ul>

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

<style>
.xpandermenu .close ul {
 display:none;
}
.xpandermenu .open ul {
 display:block;
}
.xpandermenu li, .xpandermenu li span {
 cursor:pointer;
 list-style:none;
}
.xpandermenu li .subtitle {
 padding-left:15px;
color:#004fef;
font-size: 12pt;
}

.xpandermenu li .subtitle:hover {
color:#ec00ef;
}
.xpandermenu li .plus {
 background: url(http://archie-goodwin.net/img/toggle-small-expand.png) left 3px no-repeat;
}
.xpandermenu li .minus {
 background: url(http://archie-goodwin.net/img/toggle-small.png) left 3px no-repeat;
}

.xpandermenu .subtitleli ul li {
 background: url(http://archie-goodwin.net/img/bullet.gif) left 1px no-repeat;
 padding-left:20px;
 margin-left:-25px;
 font-size:10pt;
}

.xpandermenu .subtitleli ul li a {
 color:#1d1d1d;
 text-decoration:none;
}

.xpandermenu .subtitleli ul li a:hover {
 color:#ff6c00;
}
</style>

Электричеством, которое оживит наше меню словно Франкенштейна, послужит этот код:

<script type="text/javascript">
$(document).ready(function() {
 $(".subtitle").click(function() {
 $(this).parent().children("ul").slideToggle('fast');
 if ($(this).hasClass("minus")) $(this).removeClass("minus").addClass("plus");
 else $(this).removeClass("plus").addClass("minus");
 })
});
</script>

Напомню, что HTML код нужно ставить в любое место в пределах тегов BODY, желательно все же там, где вы хотите чтобы меню отображалось. Код CSS стилей можно прописать как в пределах тегов BODY так и HEAD. Код JavaScript прописывать лучше всего перед закрывающимся тегом BODY, то есть почти в самом низу страницы. Так как скрипт написан на jQuery, то для работоспособности скрипта необходима подключенная на сайте библиотека jQuery версии не менее чем 1.7.2. Также, рекомендуется загрузить использующиеся картинки к себе на сайт и заменить ссылки прописанные в CSS.