Рекомендую сразу посмотреть демо. Сегодня я пошагово расскажу, как можно сделать красивое CSS меню самому. Для начала нам нужно нарисовать фон. Для этого используем программу Photoshop.
Вот, что из этого получилось:
Затем нам нужно нарисовать кнопочки для меню:
После кнопочек делаем подпись к ним:
Теперь проделываем все тоже самое для двух оставшихся кнопочек и вы должны получить набор рисунков, которые будут выглядеть примерно так:
И как же все это будет работать?! На самом деле все проще, чем кажется. Наши кнопки будут смещаться, тем самым создавая иллюзию подмены рисунка. На самом деле рисунок будет один и тот же, только показан будет разная часть кнопки:
На этом наши художества заканчиваются, теперь приступаем к программированию:
Код HTML:
Code
<ul id="menu">
<li><a href="#" class="home">Home <span></span></a></li>
<li><a href="#" class="about">About <span></span></a></li>
<li><a href="#" class="rss">RSS <span></span></a></li>
</ul>
Это вставляем в CSS файл:
Code
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span {
display: none;
position: absolute;
}
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span {
display: block;
}
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about {
width: 131px;
height: 51px;
background: url(images/about.gif) no-repeat;
left: 338px;
top: 97px;
}
#menu .about span {
width: 40px;
height: 12px;
background: url(images/about-over.gif) no-repeat;
left: 44px;
top: 54px;
}
#menu .rss {
width: 112px;
height: 47px;
background: url(images/rss.gif) no-repeat;
left: 588px;
top: 94px;
}
#menu .rss span {
width: 92px;
height: 20px;
background: url(images/rss-over.gif) no-repeat;
left: 26px;
top: -20px;
}
Вот, что у нас получилось. Красиво, не правда ли? По образцу и подобию Вы сами сможете создать себе какое-нибудь оригинальное меню для Вашего сайта.
