Для верхнего горизонтального меню мы создали отдельную область, которая находится в ячейке таблицы. Но пока у нас имеется только фон для пунктов меню (см. рис.8.12):
Рис. 8.12
Перейдем в среду разработки Eclipseдля PHP, откроем файл index.php. Найдем в коде блок, при помощи которого создан фон для меню (см. рис. 8.12). Найдем тегdiv:
<div id="vmenu">
</div>
Теги формирования меню будут находиться внутри него. Запишем следующие теги:
<div id="vmenu">
<ul>
<li>Главная</li>
<li>Товары</li>
<li>Заказать</li>
<li>Контакты</li>
</ul>
</div>
Тег ul–это тег для меню, а тег li –это один из пунктов меню. Мы добавили четыре пункта меню с нужными нам названиями. Посмотрим на получившийся в браузере результат (см. рис.8.13):
Рис. 8.13
Пункты меню появились,но расположены они явно не так как должны быть – слева от названий пунктов меню имеются круглые точки, пункты меню расположены вертикально, нет возможности нажать на пункт меню, как на ссылку. Исправим результат –приведем его к нужному виду (как на рис. 8.1).
Во-первых, сделаем пункты меню ссылками. Для этого преобразуем код –добавим тег a, позволяющий добавить ссылку.
Атрибут target="_self" указывает, что ссылка будет открываться в этом же окне.Атрибут href содержит адрес перехода по ссылке.Пункт меню Главная –это домашняя страница, которой соответствует ссылкаindex.php. Для других пунктов меню в конце добавленGET-запрос с одним параметром id. По значению этого параметра при помощи PHP мы будем определять выбранный пункт меню.Подобным образом мы уже работали с параметрами GET-запроса.
Чтобы вместо текста пунктами меню были картинки –необходимо внутрь тега a (вместо имеющегося сейчас текста) поместить картинку при помощи тега img.
Скопируем все семь подготовленных файлов картинок в папкуimgнашего проекта.
Перейдем в Eclipseдля PHP. Кликнем мышью на папку img нашего проекта и вставим изображения (<Ctrl+V>). Изображения попадут в папку проекта (см.рис. 8.14):
Рис. 8.14
При использовании изображений в HTML и CSS требуются их размеры. Напомним, что при наведении курсора мыши на файл изображения (хранящегося на компьютере)появится подсветка с размерами картинки.
Изображения в файлах:menu1.png, menu2.png, menu3.png, menu4.png– предназначены для пунктов меню. Их размеры одинаковые - 150x30.
Добавим вместо текста в пункты меню –изображения. Программный код примет следующий вид:
Посмотрим на результат в браузере. Пока он имеет следующий вид(см. рис. 8.15):
Рис. 8.15
С тегом imgи его атрибутами мы уже работали, когда добавляли изображенияшапки и подвала сайта. Теперь текст заменился на изображения, которые стали ссылками. Но пункты пока еще расположены вертикально, а слева осталась маркировка. Исправим это с помощью CSS. Для этогоперейдем в файл puh.css. В самом низу добавим строки:
#vmenu ul
{
list-style: none;
}
Тег ulвложен в тег divс идентификатором: vmenu. Чтобы обратиться к вложенному тегу –нужно указать его название после селектора по идентификатору #vmenu через пробел.Свойство list-style: none; отключает маркировку списка. Еще ниже добавим:
#vmenu li
{
float: left;
padding-top: 5px;
padding-left: 70px;
}
Эти три свойства подключены к тегам li, которые находятся внутри тега с идентификатором vmenu. Свойство float: left; выстраивает пункты горизонтально,обтекание слева. Свойство padding-top: 5px; задает отступ сверху в виде полей. Свойство padding-left: 70px;задает отступ слева в виде полей. Благодаря последним двум свойствам, пункты меню будут находиться со смещением сверху и друг от друга. Посмотрим в браузере. Должно получиться следующее (см. рис.8.16):
Рис. 8.16
Теперь главное меню выглядит так, как нам нужно!
Попробуем понажимать на пункты меню. При нажатии на пункт: Товары в адресной строке браузера появляется ссылка http://puh/index.php?id=1.
При нажатии на пунктКонтакты в адресной строке браузера появляется ссылка http://puh/index.php?id=3 (см. рис. 8.17):
Рис. 8.17
В дополнение к меню выполним сразу еще одну важную вещь –в самом верху файлаpuh.css, под строкой указания кодировки UTF-8 добавим:
body, table, tr, td, div, ul, li, img, a, h1
{
margin: 0px;
padding: 0px;
}
Так мы обнулили отступы и поля для всех тегов, которые есть на странице. Если перечислить теги через запятую, то список свойств применится сразу ко всему списку. Некоторые браузеры используют для определенных тегов ненулевые свойства отступов и полей. Могут появляться отступы и смещения, которые не нужны. Поэтому лучше обнулить эти свойства для всех тегов и задавать их по мере необходимости. В двух местах мы указывали подобную настройку –теперь это можно удалить из CSS (см. рис. 8.18):
