Светло красное горизонтальное меню на 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;} /* Конец стилей меню */ | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |