Spry выпадающее меню

Что делать, когда на сайте всё больше и больше страничек, а возможности вашего меню ограничены. Можно конечно сделать меню типа летописи - растянуть на пару километров. А вот что делать с горизонтальным меню - его не вытянешь :) Вот тут на помощь и приходит выпадающее меню. Я долго искал скрипт такого меню - понадёжнее, что бы во всех браузерах нормально работало. Пытался сам что то слепить. Потом как всегда на меня снизошло озарение - а зачем изобретать велосипед? Если это меню и так есть и прекрасно работает в большинстве браузеров. И называется оно выпадающее меню Spry - я тут немного сократил, но не суть. Раньше были небольшие косячки. Но в последних версиях браузеров всё отлично работает.


В принципе можно его сделать и не выпадающим. Будет просто меню, но с возможностью развития так сказать :) Spry выпадающее меню - можно сделать как вертикальным, так и горизонтальным. Что бы лишний раз ни чего не делать на сайте, просто посмотрите наверх моего сайта - это горизонтальное выпадающее меню Spry. Теперь взгляните налево - вертикальное выпадающее меню Spry.

Конечно внешний вид меню может быть разным. Он и должен быть разным - сколько админов, столько и меню. Это не касается шаблонных сайтов - там просто конвейер. Что дали, то и поставил, как говориться. Дизайн меню это отдельная и довольно обширная тема. Поговорим об этом чуть позже. А пока можете немного узнать о дизайне здесь - 2. Мелочи дизайна - меню. Не забывайте только, что главное в любом дизайне, это индивидуальность. А хороший он, или плохой, это дело второе.


Сейчас я просто напишу код моего меню, прямо с объяснениями. Так будет проще и нагляднее. Можете копировать вместе с ними, на работе меню это не отразится. Точнее код таблицы стилей. А код самого меню совсем простой, вот он:

<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="http://seozar.ru/sozdanie/osnovnoe/osnovnoe.php" class="MenuBarItemSubmenu" style="border-radius:0px 5px 0px 0px;">Создание, основное</a>
<ul>
<li><a href="http://seozar.ru/sozdanie/osnovnoe/osnovnoe.php">Создание, основное</a></li>
<li><a href="http://seozar.ru/sozdanie/osnovnoe/tema/tema.php">Тема</a></li>
<li><a href="http://seozar.ru/sozdanie/osnovnoe/kontent/kontent.php">Контент</a></li>
</ul>
</li>
<li><a href="http://seozar.ru/sozdanie/hosting/hosting.php" class="MenuBarItemSubmenu">Хостинг</a>
<ul>
<li><a href="http://seozar.ru/sozdanie/hosting/hosting.php">Хостинг</a></li>
<li><a href="http://seozar.ru/sozdanie/hosting/test/test.php">Тестовый сервер</a></li>
<li><a href="http://seozar.ru/sozdanie/hosting/test/apache.php">Apache (апача), php, mysql</a></li>
</ul>
</li>
</ul>

Это просто кусочек меню, но работающий кусочек :) Только ссылки и названия должны быть ваши. А ещё проще, прямо в программе (Adobe Dreamweaver) нажать на кнопочку вставка - панель меню Spry. Далее программа предложит выбор - горизонтальное, или вертикальное меню. Выберите какое вам надо и всё. Программа вставит меню и автоматически создаст таблицу CSS. Которую и надо будет просто настроить под собственный вкус. Что бы добавлять и убирать пункты в меню, достаточно нажать на голубенькую полосочку, которая загорается при наведении курсора на меню. После нажатия откроются свойства меню. Что бы добавить пункт нажимаем плюсик, что бы убрать - минусик. В общем и без меня разберётесь :)


А сейчас займёмся таблицей CSS, вот код моего вертикального (то что слева) меню:

@charset "UTF-8";
ul.MenuBarVertical
{
margin: 0;
padding: 0;/* Это отступы. */
list-style-type: none;
font-size: 100%;
cursor: default;
width: 200px;/* Ширина меню первого уровня */
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 200px;/* Ширина фона меню первого уровня. Да, фон и размер тут вещи разные. */
}
ul.MenuBarVertical ul
{
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 175px;/* Ширина меню второго, третьего уровня. */
left: -1000em;
top: 0;
}
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
ul.MenuBarVertical ul li
{
width: 175px;/* Ширина фона меню второго, третьего уровня. */
background-color: #F0F0F0;/* Цвет. Я понимаю, что и без меня понятно, но лишний раз напомнить не помешает. */
opacity: 0.90;/* Это прозрачность второго, третьего уровня. Сильно прозрачным делать не стоит.*/
filter: alpha(opacity=90);
}
ul.MenuBarVertical
{
border: 0px solid #EEE;/* Толщина и цвет рамок. */
}
ul.MenuBarVertical ul
{
border: 0px solid #CCC;/* Толщина и цвет рамок. Как видите у меня они равняются нолю. Просто рамки не сочетаются с фоном, пришлось убрать. */
}
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: transparent;/* Это цвет. Но я его вообще убрал. То есть даже если, другая таблица CSS укажет, что здесь должен быть фон. Этот тег аннулирует это указание. */
padding: 0.25em 0.75em;/* Отступы от текста, по вертикали и горизонтали. Смотрите, чтобы сочетались с размером фона. */
font-size: 10px;
color: #00F !important;/* Цвет. А этот цвет я сделал с повышенным приоритетом. В случае перекрёсных указаний от таблиц CSS - этот цвет имеет повышенный приоритет. Если у вас всего одна тблица стилей, не забивайте голову. */
text-decoration: none;
background-image: url(a.png);/* Фоновое изображение. */
}
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: transparent;
color: #009 !important;
}
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: transparent;
color: #009 !important;
background-image: url(b.png);/* Выделение фоном, при наведении на ссылку. */
}
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(a2.png);/* Фоновое изображение. */
background-repeat: no-repeat;
background-position: 100%;
}
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(b2.png);/* Выделение. */
background-repeat: no-repeat;
background-position: 100%;
}
ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;/* Общий фон. IE тут как всегда отличился. Когда мы отдельно указываем цвет для меню первого, второго, третьего уровня - в IE всё нормально отображается. Но стоит цвет отключить, начинаются проблемы. Все браузеры прекрасно понимают, что цвет отключен и не выпендриваются. А у IE как всегда свои тараканы - он начинает показывать общий фон. Если делаете полупрозрачный фон, лучше вообще убрать эту строчку, да и так лучше убрать, что бы где то этот фон опять не вылез. */
}
}


Это пример вертикального меню. Но это не важно, главное знать - какие теги, за что отвечают. В горизонтальном, всё тоже самое. Я тут объяснил самое основное. Если возникнут вопросы, обращайтесь, всегда рад помочь :)

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

Уборка после ремонта коттеджей

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