А мы снова возвращаемся к системе Ucoz, я подготовил для Вас пошаговый урок как создать «Горизонтальное меню на сайте Ucoz«, а также подготовил JavaScript меню которые вы можете легко установить к себе на сайт, на самом деле такое меню можно использовать на любом сайте, все зависит от Ваших пожеланий, и так начнем….

Простое горизонтальное меню, с помощью CSS

Открываем файл header.php по другому это глобальный блок (Верхняя часть сайта) и вставляем код который указан ниже.
[sourcecode language=’php’]

[/sourcecode]

На данный момент это самое простое меню , далее открываем таблицу стилей (CSS) и вставляем код указанный ниже:

[sourcecode language=’php’]div#menunav {
float: center;
border-top: 1px solid #FFCC99;
border-bottom: 1px solid #FFCC99;
font-size: 16px;
background-color: #FFCC99;
padding: 0 0 0 25px;
margin: 5px 0;
}
div#menunav ul {
margin: 0px;
padding: 0px;
}
* html div#menunav ul {
float: left;
border-left: 1px solid #000000;
margin-left: 15px;
}
* html div#menunav a {
display: block;
}
div#menunav li {
float: left;
list-style-type: none;
background-color: #FFCC99;
border-right: 1px solid #FFCC99;
}
div#menunav li:first-child {
border-left: 1px solid #CCCCCC;
}
div#menunav a {
text-decoration: none;
padding: 0px 10px;
color: #660000;
}
div#menunav a:hover {
color: #ffffff;
}
div#menunav li:hover {
background-color: #660000;
}[/sourcecode]

где:

border-top — граница сверху,
border-bottom — граница снизу,
font-size — размер шрифта,
background-color — заливка,
padding — отступ,
border-left — левая граница,
list-style-type — маркеры,
text-decoration — подчеркивание ссылок,
width: 100% — ширина меню,
Далее вставляете свои ссылки и меню готова для использования.

Горизонтальное меню с помощью JavaScript

Выглядеть оно будет так:

Установка горизонтального меню с помощью javaScript происходит впринцепи таким же образом как  и с помощью CSS. Открываем файл header.php по другому это глобальный блок (Верхняя часть сайта) и вставляем код который указан ниже.

[sourcecode language=’php’]

• Home
• Contact
• Downloads
• Search

[/sourcecode]

Далее Вам нужно скачать Архив с PSD исходники, которые легко настраиваются.

Архив находиться здесь: СКАЧАТЬ

Ну Вот и все, здесь нет ни чего сложного, небольшое знание CSS это то что Вам нужно. Если будут появляться вопросы задавайте вместе решим.

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

Участвую в конкурсе Seocafestateinost