ZorNet.Ru — сайт для вебмастера » Меню для сайта » Светло красное горизонтальное меню на CSS

Светло красное горизонтальное меню на CSS

Светло красное горизонтальное меню на CSS
Красивое светло красное горизонтальное меню на CSS. Меню по своему дизайну подойдет ко многим сайтам по их дизайн сайта. При наведение на раздел, то он становиться красным цветом. Что подчеркивает css работает отлично.
Установка:
Копируем код и заходим в ПУ- верх сайта и прописываем в самый низ этого модуля.
Код
<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>

Этот стиль мы прописываем в CSS. Желательно его разместить в самом верху.
Код
/* Начало стилей меню */  
.hor_menu {padding: 0; width: 989px; height: 60px; background: url(http://zornet.ru/ZORNET/hormenu_bg.png) no-repeat center;}  
.menuwrapper {width: 1px; height: 50px; background: url(http://zornet.ru/ZORNET/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://zornet.ru/ZORNET/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://zornet.ru/ZORNET/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://zornet.ru/ZORNET/hor_menu_hovering_right.png) no-repeat left; width: 164px; padding: 17px 0px 18px 0px; color: #fff; text-shadow: #4f110e 1px 1px 1px;}  
/* Конец стилей меню */
14 Февраля 2013 Просмотров: 4059 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar