Полезные сервисы
Поделись с друзьями
Помощник для тех, кто хочет научиться создавать сайты.
Вам понадобятся терпение и желание.
Всего за пять уроков Вы сможете сделать сайт-визитку, а освоив следующие уроки - сделаете первый шаг к профессионализму
Меню
Открыв практически любой сайт Вы обнаружите там наличие меню. Это слова (далее пункты), при наведении на которые мышкой они выделяются (смена цвета, рамки, шрифта и.т.д.). Меню используется для направления пользователя на другие страницы сайта, в зависимости от выбранного пункта.
Меню бывают горизонтального и вертикального размещения. В расширенном варианте пункт меню может открывать дополнительные подпункты. В этом случае меню называется выпадающее или раскрывающееся.
Существует множество приемов создания меню, есть и специальные программы. Наша задача научиться это делать самому с четким пониманием процесса. Хотя, для того чтобы отослать пользователя на другую страничку, вовсе не обязательно создавать меню. Например, в конце этой странички после текста "Этот урок закончен, можете переходить на закладку Java_PHP" текст Java_PHP выделен и подчеркнут. При наведении на него мышкой курсор принимает вид руки, а при нажатии - открывается соответствующая страничка.
Это так называемая гиперотсылка.
Гиперотсылка
Для создания гиперотсылки используется тег <a> Это может выглядеть так:
<a href='http://tajna.16mb.com'>Онлайн тату-пирсинг редактор</a>
Или так:
<a href='http://cikavo.hol.es/'><img src='rek.jpg'></a>
Или так:
<a href="?tema=tur"><img src="images/kartinka.jpg">Куда идти</a>
Как видите, достаточно написать ГЛАВНАЯ КОНТАКТЫ О СЕБЕ, обрамить каждое слово тегом <a> с отсылкой на страницы, например, index.htm, kontakt.htm, o_sebe.htm - и меню готово.
В большинсте случаев, на сайте визитке особо и некуда еще отсылать пользователя.
Если же все-таки хотите иметь более красивое меню, то читаем дальше.
Меню бывает горизонтальное и вертикальное. Если при наведении курсором на пункт меню появляются дополнительные пункты (до этого скрытые) меню называют выпадающим.
В горизонтальном меню пункты расположены горизонтально, а в вертикальном - вертикально.
Горизонтальное выпадающее меню
Я покажу как я создаю горизонтальное, выпадающее меню.
В файл стилей добавим следующее:
/* внутри этого блока разместим меню */
#men {
background: #886655;
height: 28px; /* для горизонтального меню*/
/* width:150px; для вертикального меню*/
}
.menu_g
{
margin:0px;
}
/***** блоки основного меню ******/
.menu_g div
{
position:relative;
float:left; /* для горизонтального, для вертикального заремить */
}
.menu_g a {
position:relative;
color: #cccccc;
margin: 0px;
padding:7px;
border-left: 1px solid #cccccc;
text-decoration:none;
font: 14px/22px "Trebuchet MS", Arial, Tahoma;
/*background: #799766;*/
/*background: url("images/zalivka.jpg"); */
display:block;
line-height:100%;
}
/*** выделенный пункт ***/
.menu_g a:hover {
cursor:pointer; /* курсор в виде руки*/
color: #ffff11;
background: #aa9966;
}
/******** выпадающее меню привязано к table.
Поэтому, если выпадающего блока нет,
то и эти вставки с table можно выбросить
т.е. все, что ниже *********/
/******** выпадающее меню *********/
.menu_g table
{
position:absolute;
left:0px; /*смещение для горизонтального меню*/
top:28px; /*смещение для горизонтального меню*/
/*left:140px; смещение для вертикального меню*/
/*top:0px; смещение для вертикального меню*/
display:none; /*блок невидимый*/
border: 1px solid #ffffff;
border-collapse: collapse; /*сжать границу выпавшего блока*/
width:215px;
}
/******** пункты выпавшего меню *******/
.menu_g table a
{
color: #ffffff;
background: #995599;
border-bottom: 1px solid #cccccc; /*разделение пунктов меню*/
width:200px;
}
/*********** выделенный пункт выпадающее меню ***********/
/* если это выбросить, то выделение будет как в основном меню */
.menu_g table a:hover
{
background:#337733;
color: #ffff00;
}
/* выпадающий блок первоначально скрыт а тут открывается*/
.menu_g div:hover table { display:block; }
Необходимые комментарии я дал прямо в тексте. Они выделяют основные блоки, чтобы при необходимости изменить цвет меню их было легче найти.
Однако здесь мы впервые встретились с такими описаниями как:
.menu_g div или .menu_g a.
Поэтому все свойства, заданные в .menu_g div действуют на ту часть html страницы, где есть:
<div class="menu_g"> и далее
<div....
В html-заготовку, в любое место, где должно быть меню вставляем следующее:
<div class="menu_g">
<div> <a href="index.htm">Главная</a></div>
<div><a> О себе </a>
<table><tr><td>
<a href="kontakt.htm">Контакты</a>
<a href="kontakt.htm">Фотогалерея</a>
</td></tr></table>
</div>
</div> <br>
</div>
Здесь красным цветом выделена строка создающее пункт "Главная", который не имеет выпадающих (дополнительных) пунктов. Зеленым цветом - строка, которая создает выпадающий блок.
Если нужно добавить еще пункты меню, то просто вставляете аналогичный фрагмент в нужное место. Например, чтобы добавить невыпадающий пункт "Друзья", скопируйте красную строку, и добавьте ее ниже красной или по окончании зеленого блока. При этом измените слово "Главная" на "Друзья" и отсылку на другую страницу, например, friends.htm
Для добавления выпадающего пункта делайте по аналогии с зеленым блоком.
Обратите внимание на то, как мало места занимает само меню и как много занимает его описание. Вот вам почему стили лучше выносить в отдельный файл.
Если все правильно сделали, то получим такое меню:
Обратите внимание,что блоки выпадающего пункта меню сделаны при помощи тега table. Если Вам достаточно сделать меню без выпадающего списка (как на этом сайте вверху), то строк с тегом table не будет, а значит и все, что касается table в файле стилей тоже можно будет выбросить (в стилях он выделен красным цветом).
Для пунктов основного горизонтального меню (блок menu_g a) я не использовал заливку цветом (заливка /*background: #799766; и /*background: url("images/zalivka.jpg"); - заремлены), поэтому они такого же цвета как и блок #men, в который помещено все меню.
Я не буду подробно описывать каждый стиль, большинство из них Вы уже знаете.
Посмотреть пример такого меню с картинками и переливом можно на моем сайте Это интересно
Вертикальное выпадающее меню
Для превращения нашего меню в вертикальное достаточно в файле стилей заремить (добавить /* до и */ после стиля) строки, где написано "для горизонтального меню" и разремить строки (т.е. удалить две косые /* ... */), где написано "для вертикального меню".
В результате получим следующее:
Заливку можно сделать градиентной используя изображение, например, такое
тогда фон задается как background: url("images/zalivka.jpg"); что я и сделал разремив эту строку
в файле стилей.
Вместо изображения можно использовать градиентные переливы. Для их подбора можно использовать онлайн сервис gradients.glrzad.com (см. на панели слева - "Полезные сервисы").
Для копирования результата нажать кнопку copy, после чего сделать вставку в файл стилей, в описание нужного блока (добавятся стили для всех браузеров).
Меню с картинками
Для того, чтобы в меню добавилась картинка нужно ее вставить перед текстом конкретного меню
Однако все будет нормально, только если у Вас картинка маленькая и находиться слева.
При этом текст разместится по нижнему краю картинки.
Если же картинка такая как у меня, да еще и справа, да еще хотите сделать красивый отступ для текста - тогда нужно сделать так:
<img alt="иконка" src="images/menu_k.png" style="float:right;" >
<span style="margin-top: 8px;">Контакты</span>
</a>
Некоторые пояснения
Вы уже знаете, что если картинку вставить в ячейку таблицы (а наше меню это таблица), то ячейка сама растянется по высоте картинки. Однако, если картинке задать стиль float (слева, справа), то большая картинка обрежется.
который и добавляем в описание стиля для меню
#menu_g table a
{
color: #ffffff; background: #995599;
border-bottom: 1px solid #cccccc; /*разделение пунктов меню*/
width:200px;
overflow:hidden;
}
Для выравнивания текста используется стиль margin, который вставляем в тег <p...
<span style="margin-top: 8px;">Контакты</span>
В меню "Фотогалерея" для картинки использован стиль float:left; и отступ справа margin-right:10px; (фактически отодвинет текст)
<img alt="иконка" src="images/menu_f.png" style="float:left; margin-right:10px;" >
<span style="margin-top: 8px;">Фотогалерея</span>
</a>
Если Вы захотите использовать на страничке и горизонтальное и вертикальное меню с разными стилями, то обозвав их menu_g и menu_v соответсвенно нужно и в файле стилей все сдублировать два раза (в первом блоке оставить menu_g, а во втором это исправить на menu_v). Конечно файл стилей увеличится.
Но, если цветовую гамму для горизонтального и вертикального меню не менять (т.е. цвет основных и выпадающих пунктов в обеих меню одинаковый), то файл стилей можно значительно сократить.
Так, описание класса .menu_g a и .menu_v a одинаковые, поэтому их можно описать в файле стилей один раз, объединив оба класса (через запятую) вот так:
.menu_g a, .menu_v a {
color: #cccccc;
margin: 0px;
...
}
Вы можете использовать мой опыт при создании своего меню, но можно скопировать любой понравившийся сайт и взять оттуда меню. Правда при этом придется самому разбираться в файле стилей и коде странички.
Впрочем, именно так я и учился.
Проблемы с выпадающим меню
Однако у данного меню, как впрочем и у любого другого выпадающего меню, есть небольшой недостаток. Такое меню не будет работать на планшете с ОС МАС. Т.к. при нажатии пальцем на пункт меню не сработает hover и выпадающее меню не появится.
Для устранения этого недостатка я сделал следующее:
1. Добавил событие onclick в строке <a> О себе </a>
<a onclick="javascript:meny(1)"> О себе </a>
2. В table добавил id
<table id="men1">
3. Добавил функцию
function meny(n)
{ var b,w,xxx=0;
b=document.getElementById('men'+n);
if(b.style.display=='none' || b.style.display=='') xxx=1;
for(var x=1;x<6;x++)
{ w=document.getElementById('men'+x);
w.style.display='none';
}
if (xxx==1) b.style.display='block';
}
Здесь x<6 для случая, если у вас будет пять пунктов с выпадающим меню, как например, на этом сайте.
Понятно, что если выпадающих блоков пять, то в каждый блок нужно добавлять onclick="javascript:meny(2)", увеличивая число в скобках и также table id="men2" и т.д.
Такое меню будет работать на любой платформе, как с мышкой, так и без нее.
При наведении мышкой на пункт меню все будет как обычно, а при нажатии на пункт меню пальцем (на планшете) будет срабатывать функция meny() на javascript, которая будет открывать выпадающие пункты.
При повторном нажатии или при выборе другого пункта - выпадающее меню закроется.
Более подробно о функциях - в следующем уроке.
Подведем итоги
Итак меню создается только при наличии большого количества страничек.
Если их мало достаточно настроить переходы с использованием гиперотсылок.
При большом количестве переходов, можно использовать как горизонтальное, так и вертикальное меню.
При необходимости создания подпункта меню - делается выпадающий список.
Для создания меню можно скачать специальные программы и даже использовать флеш анимацию.
Этот урок закончен, можете переходить на закладку Javascr
Мысли вслух
- Программист - это не тот, кто пишет программы, а тот, чьи программы работают
- Для программиста монитор - это реальный рабочий стол, системный блок - журнальный, а клавиатура - обеденный
- Конфеты программиста: 'Мишка на сервере'
- А знаете ли Вы, что в 1 килобайте не 1000 байт, а 1024 (2 в степени 10)
Если хотите убрать подчеркивание, то в тег <a>, нужно добавить стиль:
<a href=... style="text-decoration: none;">
После фразы href= размещается адрес той страницы (сайта) куда должен перейти пользователь при нажатии на текст (картинку). В первом и втором примере - это отсылки на другие мои сайты. В третьем примере нет адреса, но есть "?tema=tur". Это значит, что при нажатии на эту ссылку загрузится текущая страница (та на которой находится эта ссылка). Произойдет как бы перезагрузка страницы, но уже с передачей параметров. Подробнее об этом - на следующем (Java_PHP) уроке.