Четверг, 23.11.2017, 06:54
Скрипты для Ucoz
Карта сайта
Главная | Красивое горизонтальное меню на CSS красного цвета - Скрипты для Ucoz



Книги для вебмастера
Новые сообщения Участники Правила форума Поиск Лента новостей
Страница 1 из 11
Скрипты для Ucoz » Всё для Ucoz » Скрипты для Ucoz » Красивое горизонтальное меню на CSS красного цвета
Красивое горизонтальное меню на CSS красного цвета
bandjukДата: Вторник, 31.07.2012, 22:00 | Сообщение # 1
Генерал-лейтенант
Группа: Администраторы
Пол:
Награды: 22
Репутация: 22
Сообщений: 615
Бог сайта и форума За дизайнерские умения За уважение народа За хорошую посещаемость на форуме за 100 постов
Представляю вашему вниманию красивое, горизонтальное меню, красного цвета, выполненное на 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
 
Скрипты для Ucoz » Всё для Ucoz » Скрипты для Ucoz » Красивое горизонтальное меню на CSS красного цвета
Страница 1 из 11
Поиск:

Яндекс.Метрика
Copyright Глюк Рекордс © 2017

Создать бесплатный сайт с uCoz