Простое горизонтальное меню с окном поиска.

Приветствую вас, мои дорогие друзья, читатели и гости блога. Давайте сегодня рассмотрим один из вариантов простого горизонтального меню с окном поиска. В шпаргалке 3 варианта вертикальных меню  было написано, как вообще создаётся меню. Так что, если вы пока этого не знаете, советую прочитать её.


Ну и попробуем сделать самое простое горизонтальное меню. И для пущей важности вставим еще в него окно поиска.
Вот так примерно оно будет выглядеть.

Ниже приведён код такого меню. Скопируйте его в блокнот или черновик, чтобы сделать некоторые индивидуальные настройки.

<center><table width="930" height="40" cellspacing="1" cellpadding="1">
<tr>

<td width="141"  background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><a href="####"><font size="3" color="white"><center><b>главная</b></center></font></a></td>


<td width="141"  background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><a href=" ####"><font size="3" color="white"><center><b>содержание</b></center></font></a></td>


<td width="141"  background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><div align="center"><span class="style2"><a href="####
"target="_blank"><font size="3" color="white"><center><b>форма связи</b></center></font></a></span></div></td>

<td width="141"  background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><div align="center"><span class="style2"><a href="####
"target="_blank"><font size="3" color="white"><center><b>генератор цвета</b></center></font></a></span></div></td>

<td width="141"  background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><a href="#### "><font size="3" color="white"><center><b>F.A.Q </b></center></font></a></td>

<td width="200"  background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><center>
<form action="/search" method="get" target="_blank">
<input id="form-query" name="q" placeholder="что будем искать?" value="" /> <input height="30" src="http://4.bp.blogspot.com/-0E8mG3lxork/ThDRCMmwhqI/AAAAAAAABB8/mOo0_rPITME/s1600/search+%25282%2529.png" style="padding: 0; vertical-align: bottom;" type="image" width="30" /></form><span style="font-weight:bold;"></span></center></td></tr></table></center>

Давайте разберём, что в нём можно изменить. Во-первых, значения ширины 930 и высоты 40 меню.
Выделенные красным цветом решётки-адрес страницы( её URL) меню.
Синим цветом-название страницы.
Значения <font size="3" color="white">-отвечают за размер и цвет шрифта, соответственно.

А вот в самом низу кода я синим цветом выделила участок, который отвечает за окно поиска. При желании, если оно вам не нужно, его просто можно удалить, или заменить другим кодом. Варианты такого окна можно посмотреть здесь.

Если вам понадобится добавлять вкладки меню, то просто вставляйте ещё один вот такой участок кода

<td width="141"  background ="http://1.bp.blogspot.com/-Y5I9Weee-PA/T6O0ZfPMFeI/AAAAAAAAAUw/wTmWQmTw4rw/s1600/ReoAW.jpg"><a href=" ####"><font size="3" color="white"><center><b>содержание</b></center></font></a></td>

Обратите только внимание, что придётся менять опытным путём размер блока <td width="141" во всех вкладках на меньшее или большее.

Когда ваш код готов устанавливайте его обычным способом, в гаджет HTML/JavaScript, где-нибудь в верхней части блога. Теперь у вас есть простое горизонтальное меню, которое облегчит пользователям поиск по блогу. Ну, а если вы заинтересованы в установке анимированного меню тогда этот пост для вас.

Ну вот на сегодня у меня всё. Если, что-то не так пишите. Разберёмся. До скорых встреч.

Удачи всем нам.

Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :