Горизонтальное меню по типу кнопок

FOREVER

Дата: Четверг, 25.02.2010, 16:14 | Сообщение # 1

Сообщений: 970

[ 100 ]

Offline

Вообще сделать меню из кнопок к примеру как у нас на форуме достаточно гимаройно, сейчас расскажу как сделать типо того но гораздо проще и легче.
Идея пришла когда увидел меню на форуме studioad, подумал как там сделано и придумал такой способ.
Мы делаем фон (прямоугольник с закруглёнными углами) на нём размещаем меню, между ссылок ставим картинку как бы пробел для кнопок, эта картинка конец одной кнопки и начало второй. Всё просто, приступим к реализации.

В фотошопе я нарисовал такую заготовку:

Далее с помощью инструмента "Раскройка" порезал картинку. Нам нужны 4 части, зачёркнутое выкидываем.

Теперь это наше меню:

Code

<div class="l"></div>
<div class="p"></div>
<div class='c'>

<a href="/">Главная</a> <img src="images/x.jpg" alt="">
<a href="/">Форум</a> <img src="images/x.jpg" alt="">
<a href="/">Последние сообщения</a> <img src="images/x.jpg" alt="">
<a href="/">Пользователи</a> <img src="images/x.jpg" alt="">
<a href="/">Пользователи</a> <img src="images/x.jpg" alt="">
<a href="/">rss - ленты</a>

</div>

А эти классы нужно вписать в CSS:

Code

.l {background:url(images/l.jpg) no-repeat /*не растягивающийся бекгроунд*/;
height:40px /*высота*/;
width:24px /*ширина*/;
float:left /*сам элемент с лева всё обтекание с права*/;}/*левая часть*/

.p {background:url(images/p.jpg) no-repeat;height:40px;width:30px;float:right;}/*правая часть*/
.c {background:url(images/c.jpg) repeat-x;height:40px;width:100%;} /*фон*/

.c a, .c img {float:left;} /*ставим обтекание картинкам и ссылкам, для того чтобы всё было в ряд*/
.c a {margin:13px 6px 0 5px;} /*выравниваем ссылки*/

Bсё что в /**/ можно убрать

Demo
[p.s.]Источник 7ucoz.com[/p.s.]

Прикрепления: 4759028.gif(21Kb) · 1864031.jpg(16Kb) · 2909043.jpg(22Kb)

Награды: 36