Представляю вашему вниманию красивое, горизонтальное меню, красного цвета, выполненное на Css, которое отлично подойдёт для сайтов с различной тематикой.
Прописываем этот код в место, где вы хотите видеть меню, обычно это:
Панель управления ---> Управление дизайном ---> Глобальные блоки ---> верхняя часть сайта , код вставляем в самый низ:
Quote
<table class="hor_menu" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="hormenulink1"><a class="link1" href="Ссылка 1">Пунккт 1</a></td>
<td class="menuwrapper"></td>
<td class="hormenulink2"><a class="link2" href="Ссылка 2">Пунккт 2</a></td>
<td class="menuwrapper"></td>
<td class="hormenulink3"><a class="link2" href="Ссылка 3">Пунккт 3</a></td>
<td class="menuwrapper"></td>
<td class="hormenulink4"><a class="link2" href="Ссылка 4">Пунккт 4</a></td>
<td class="menuwrapper"></td>
<td class="hormenulink5"><a class="link2" href="Ссылка 5">Пунккт 5</a></td>
<td class="menuwrapper"></td>
<td class="hormenulink6"><a class="link3" href="Ссылка 6">Пунккт 6</a></td>
</tr>
</table>
Ссылка 1 - меняем на свои ссылки
Пунккт 1 - на своё название пунктов
Открываем:
Панель управления ---> Управление дизайном ---> Общие шаблоны ---> Таблица стилей (CSS), в самый вверх прописываем код:
Code
/* Начало стилей меню */
.hor_menu {padding: 0; width: 989px; height: 60px; background: url(http://fotki.ucoz.ua/script/Forum/hormenu_bg.png) no-repeat center;}
.menuwrapper {width: 1px; height: 50px; background: url(http://fotki.ucoz.ua/script/Forum/menu_wrapper.png) no-repeat center;}
.hormenulink1, .hormenulink2, .hormenulink3, .hormenulink4, .hormenulink5,.hormenulink6 {width: 164px; text-align: center;}
a.link1, a.link2, a.link3 {display: block; width: 164px; padding: 15px 0px 15px 0px; font: 18px Arial, Helvetica, sans-serif; color: #535353; text-shadow: #c4c4c4 1px 1px 1px; text-decoration: none;}
a.link1:hover, a.link1pressed {display: block; font: 18px Arial, Helvetica, sans-serif; background: url(http://fotki.ucoz.ua/script/Forum/hor_menu_hovering_left.png) no-repeat right; width: 164px; padding: 17px 0px 18px 0px; color: #fff; text-shadow: #4f110e 1px 1px 1px;}
a.link2:hover, a.link2pressed { display: block; font: 18px Arial, Helvetica, sans-serif; background: url(http://fotki.ucoz.ua/script/Forum/hor_menu_hovering.png) repeat-x center; width: 164px; padding: 17px 0px 18px 0px; color: #fff; text-shadow: #4f110e 1px 1px 1px;}
a.link3:hover, a.link3pressed {display: block; font: 18px Arial, Helvetica, sans-serif; background: url(http://fotki.ucoz.ua/script/Forum/hor_menu_hovering_right.png) no-repeat left; width: 164px; padding: 17px 0px 18px 0px; color: #fff; text-shadow: #4f110e 1px 1px 1px;}
/* Конец стилей меню */
Источник: http://fotki.ucoz.ua