Новая версия сайта
 
Seozar
Новая версия сайта
 
 
 
 
 
 

Выпадающее меню

Выпадающее меню можно сделать как вертикальным, так и горизонтальным. Перед тем как сделать выпадающее меню я как всегда опползал пол интернета. Везде какие то косяки всплывали. В результате своих поползновений пришёл к выводу, что не надо быть слишком умным, а просто взять и сделать меню в программе Adobe Dreamweaver CS3. Как говориться дёшево и сердито :)


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

После этого в программе Adobe Dreamweaver CS3 нажимаем в верхнем меню Вставка. Затем Spry, далее Панель меню Spry. Всплывёт окошко выбора вида меню. Выберите какое вам нужно - вертикальное, или горизонтальное. Какой именно программой пользоваться без разницы, можно Adobe Dreamweaver CS3 или CS5, не важно.


Всё, меню вставлено. Нажмите на голубенькую полосочку над меню. Внизу программы откроется куча настроек. Разобраться там не сложно. Просто прописываете названия страничек и ссылки на них.

После вышеописанных действий ставите на каждой страничке вашего сайта код:

<? include("../../menu.php"); ?>

Точки - путь к вашему меню (menu).

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


Одновременно с созданием меню у вас должна была автоматически появиться папка SpryAssets. В ней находятся настройки. Находим в этой папке документ SpryMenuBarVertical.css. Это таблица стилей для вашего меню. Сейчас я расскажу как настроить. Конечно если есть желание. Может быть меню вас устраивает такое, какое есть. Тогда лучше там не ковыряться :)


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

Открываем SpryMenuBarVertical.css и начинаем менять. Иногда я буду повторять надписи - это параметры для второго и третьего уровня.


@charset "UTF-8";
ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 194px;
- ширина границ основного меню
}
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: 194px;
- ширина заливки (фона) основного меню
}
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: 11em;
- ширина границы меню, второго, третьего уровня
left: -1000em;
top: 0;
}
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}
ul.MenuBarVertical ul li
{
width: 11em;
- ширина заливки (фона) меню, второго, третьего уровня
}
ul.MenuBarVertical
{
border: 1px solid #CCC;
- толщина и цвет рамок
}
ul.MenuBarVertical ul
{
border: 1px solid #999;
- толщина и цвет рамок
}
ul.MenuBarVertical a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
- величина отступов от текста по вертикали и горизонтали
color: #00F;
- цвет шрифта
text-decoration: none;
font-size: 11px;
- размер шрифта
font-weight: bold;
- жирный шрифт, что бы сделать простой - удалите эту строку
background: url(a.jpg);
- фоновое изображение, если хотите просто фон - удалите эту строчку
}
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
background-color: #33C;
color: #FFF;
- цвет шрифта при наведении курсора
}
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
background-color: #CCC;
color: #FFF;
- цвет шрифта при наведении курсора
background: url(b.jpg);
- фоновое изображение при наведении курсора, если хотите просто фон - удалите эту строчку
}
ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
font-size: 11px;
- размер шрифта
font-weight: bold;
- жирный шрифт, что бы сделать простой - удалите эту строку
background: url(a.jpg);
- фоновое изображение, если хотите просто фон - удалите эту строчку
}
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
background: url(b.jpg);
- фоновое изображение при наведении курсора, если хотите просто фон - удалите эту строчку
}
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;
}
}


Меню создали, теперь надо сделать, что бы оно отображалось на каждой вашей страничке подробнее...

Внимание. Прописывайте адреса страничек относительно внешнего пути к файлу. То есть в начале должно быть ваше доменное имя и ссылка должна иметь такой вид - http://seozar.ru/zarabotok/zarabotok.php. Где http://seozar.ru/ - ваше доменное имя. zarabotok/zarabotok.php - путь к страничке относительно корневой папки вашего сайта.


Вот и всё. Теперь вы знаете, как поменять размер шрифта, фоновое изображение, и размер меню. Не забудьте создать карту сайта подробнее... Удачи :)


Главная Создание сайта, хостинг Тема, контент Программы Начало Структура Фон Первая страничка Таблица CSS Завершение Простое меню Выпадающее меню Движок для сайта Карта сайта - Sitemap