Форум For-Gamers

Создание красивого CSS меню

Александр

Дата: Пятница, 29.03.2013, 16:17 | Сообщение # 1

Совесть форума

Ранг:

Сообщений: 24

Статус: Не в сети

Создание красивого CSS меню

Желаю успехов!

Александр

Дата: Пятница, 29.03.2013, 21:58 | Сообщение # 2

Совесть форума

Ранг:

Сообщений: 24

Статус: Не в сети

Здравствуйте, в этом уроке я решил разобрать создание очень красивого меню изображенного ниже, используя CSS:

Для начала создадим блок main_menu, в котором будет находиться наше меню, а затем поместим в него список необходимых элементом меню, ниже можно посмотреть исходный код вышеизложенного:
[add]<div class="main_menu">
<ul class="menu">
<li class="selected"><a href="http://for-gamers.do.am">Главная</a></li></h3>
<li><a href="#">Уроки</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Магазин</a></li>
<li><a href="#">Партфолио</a></li>
<li><a href="#">Контакты</a></li>
<li class="rss"><a href="#">RSS</a></li>
</ul>
</div>[/add]

На изображении ниже можно проследить расположение блоком, с классами rss и selected:

А теперь необходимо оформить наше меню для его более красивого отображения, для этого пропишем CSS стили:

[add]/* Глобальные стили */
* {
margin: 0;
padding: 0;
}
/* Стили главного, внешнего блока меню */
.main_menu {
width: 100%;
height: 239px;
background: url(img/menu_bg.gif) repeat-x;
}
/* Слити внутреннего блока меню */
.menu {
margin-left: 20px;
list-style-type: none;
float: right;
}
.menu li {
display: inline-block;
}
/* Слити внутренних блоков меню */
.menu a, .selected a, .rss a{
width: 77px;
height: 30px;
display: block;
padding: 50px 0 0 0;
background: url(img/link/link.png) no-repeat;
font: 11px Verdana, Geneva, sans-serif;
text-decoration: none;
text-align: center;
color: #FFF;
}
.menu a:hover {
background: url(img/link/link_hover.png) no-repeat;
color: #CCC;
}
.rss a {
width: 55px;
display: block;
margin: 0 20px 0 0;
background: url(img/rss/rss.png) no-repeat;
}
.rss a:hover {
background: url(img/rss/rss_hover.png) no-repeat;
}
.selected a,.selected a:hover {
background: url(img/link/link_selected.png) no-repeat;
}[/add]
[extra]Скачать Исходники[/extra]

[info]Источник урока: www.webtyz.ru[/info]