Страница 1 из 11
Форум » Web дизайн » HTML и CSS » Стеклянная навигация сайта (Часть вторая - код)
Стеклянная навигация сайта
Reddy Дата: Среда, 14.07.2010, 21:47 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
На основе этого урока для Фотошопа

У нас уже есть картинки нашего меню (back.png и hover.png), а значит мы можем приступить к "приготовлению" HTML кода для него. По умолчанию картинки хранятся в той же директории, что и файлы с HTML и CSS.

01. Перво наперво создадим файлик index.html - для этого откроем блокнот в Windows, и впишем туда следующие строчки:

Code
<html>
<head>
<title>Меню сайта</title>
<link  href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- Наша рабочая область -->

</body>
</html>   

Добавляем элементы меню

Code
<html>
<head>
<title>Меню сайта</title>
<link  href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<!-- Меню сайта -->
<div id="container">
<ul class="navigation">
<li id="m1"><a href="/" title="Ваш текст описания"></a></li>
<li id="m2"><a href="/" title="Ваш текст описания"></a></li>
<li id="m3"><a href="/" title="Ваш текст описания"></a></li>
<li id="m4"><a href="/" title="Ваш текст описания"></a></li>
<li id="m5"><a href="/" title="Ваш текст описания"></a></li>
</ul>
</div>   

</body>
</html>

Обратите внимание, что текст ссылок должен оставаться пустым! Сохраняем файлик, и переходим к таблице стилей.

02. Теперь в блокноте создадим файл style.css

Перво наперво добавляем стиль для body:

Code
body {
       background: #000000;
       font-family: Verdana;
       font-size: 11px;
}

Хотя Вы можете настроить её по своему вкусу :)

Далее добавляем стиль для div-а:

Code
#container {
       margin-top: 30px; /* отступ от верхнего края */
}

А теперь приступаем непосредственно к оформлению меню. Стиль для тега li :

Code
.navigation li {
       float: left; /* выравнивает элемент по левому краю, а все остальные элементы обтекают справа. Необходимо для создания горизонтального меню */
       list-style-type: none; /* убираем маркеры для списка.*/
}
.navigation li a {
       display: block; /* отображает данный элемент как блок*/
       height: 75px;  /* высота блока */
       line-height: 40px; /* параметры height и line-height , желательно, должны быть одинаковыми - так текст будет точно отцентрирован по вертикали */
       width: 100px;  /* ширина блока */
}

Всё ещё не похоже на меню? :) Следующий шаг поправит эту ситуацию

Code
#m1 {
       background: url('back.png'); /* цвет фона неактивного меню */
}
#m2 {
       background: url('back.png') 400px 0px; /* цвет фона неактивного меню */
}
#m3 {
       background: url('back.png') 300px 0px; /* цвет фона неактивного меню */
}
#m4 {
       background: url('back.png') 200px 0px; /* цвет фона неактивного меню */
}
#m5 {
       background: url('back.png') 100px 0px; /* цвет фона неактивного меню */
}

Вот, меню приобрело цивильный вид. Осталось добавить реакцию меню на наведение мышки.

Code
#m1 a:hover {
       background: url('hover.png'); /* цвет фона активного меню */
}
#m2 a:hover {
       background: url('hover.png') 400px 0px; /* цвет фона активного меню */
}
#m3 a:hover {
       background: url('hover.png') 300px 0px; /* цвет фона активного меню */
}
#m4 a:hover {
       background: url('hover.png') 200px 0px; /* цвет фона активного меню */
}
#m5 a:hover {
       background: url('hover.png') 100px 0px; /* цвет фона активного меню */
}

циферки после ссылки на картинку означают, на сколько пикселей будет смещено её начало относительно нормального положения. Первое значение - соответственно сдвиг по горизонтали, второе - по вертикали.

Если всё сделано правильно, то у Вас должно получится работоспособная навигация по сайту :)

© otherside.ws

спец по кнопачкам
 
Форум » Web дизайн » HTML и CSS » Стеклянная навигация сайта (Часть вторая - код)
Страница 1 из 11
Поиск:
Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика
Полное или частичное копирование материалов только с указанием гиперссылки на www.otherside.ws

© 2010-2017 Other Side | Хостинг от uCoz