Главная
О проекте
ИТ-профессии
Сертификация
Удаленная работа
 

Создание динамического навигационного меню с помощью CSS

Автор: Admin  


Для создания динамического навигационного меню нужно использовать анкерные псевдо-классы:

  1. a:link {} - задаёт параметры не посещённой ссылки;
  2. a:visited {} - задаёт параметры посещённой ссылки;
  3. a:hover {} - задаёт параметры ссылки при наведении курсора;
  4. a:active {} - задаёт параметры выбранной ссылки.

Для начала необходимо подключить каскадную таблицу стилей. Есть три способа как это сделать:

  1. подключение внешней таблицы стилей;
  2. подключение внутренней таблицы стилей;
  3. использование встроенных стилей.

Рассмотрим создание динамического навигационного меню с помощью внутренней таблицы стилей. В html документе внутри контейнера делаем запись. Вместе с контейнером она будет выглядеть:
<head>
<style type="text/css">


</style>
</head>

Таким образом, осуществляется подключение внутренней таблицы стилей. Далее задаём параметры картинки при не наведённом на неё курсоре мыши:
a.buttom {
background: url('Picture.gif'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: N px; /* Ширина рисунка */
height: M px; /* Высота рисунка */
border: 0px solid #000; /* Рамка вокруг картинки */
}

После селектора a через точку указывается класс buttom (название может быть произвольным). Он необходим для определения к какой ссылке будут принадлежать данные параметры. Ведь ссылок на станице может быть несколько. Свойство background означает, что картинка Picture.gif будет отображаться как фон. Width и height задают размеры картинки как блока в пикселях. Вместо N и M нужно указать реальные размеры картинки. Далее задаём параметры картинки при наведённом на неё курсоре мыши:
a.buttom:hover {
background: url('NewPicture.gif'); /* Путь к файлу с заменяемым рисунком */
display: block; /* Рисунок как блочный элемент */
width: N px; /* Ширина рисунка */
height: M px; /* Высота рисунка */
border: 0px solid #000; /* Рамка вокруг картинки */
}

В данном случае при наведении курсора мыши картинка будет другая - NewPicture.gif. При этом необходимо задать размеры новой картинки если они другие. В результате общая запись будет:
<head>
<style type="text/css">
a.buttom {
background: url('Picture.gif'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: N px; /* Ширина рисунка */
height: M px; /* Высота рисунка */
border: 0px solid #000; /* Рамка вокруг картинки */
}
a.buttom:hover {
background: url('NewPicture.gif'); /* Путь к файлу с заменяемым рисунком */
display: block; /* Рисунок как блочный элемент */
width: N px; /* Ширина рисунка */
height: M px; /* Высота рисунка */
border: 0px solid #000; /* Рамка вокруг картинки */
}
</style>
</head>

Вставляем нашу ссылку <a href="MySite.html" class="buttom"></a>. При создание динамического навигационного меню с помощью css есть одна особенность. Если пользователь в настройках браузера отключит отображение рисунков, то ссылка вообще перестанет видна. Решить эту проблему можно двумя способами:

  1. Написать текст внутри ссылки <a href="MySite.html" class="buttom">Текст ссылки</a>. Но тогда этот текст отобразится поверх картинки.
  2. Создать пустую (белый прямоугольник) картинку в CorelDraw или PhotoShop с такими же размерами как и исходная. Сохранить с расширением gif так чтобы она была прозрачная. Далее вставить её в ссылку <a href="MySite.html" class="buttom"><img src="NoPicture.gif" alt="текст ссылки" border="0"></a>.

В начало


|   предыдущая   |   каталог статей   |   следующая   |
|  1   |   2   |   3   |

    




Главная
О проекте
ИТ-профессии
Сертификация
Удаленная работа
Каталог статей
Контакт
 
Компания "ПРОИнфоСистем"   2009
Rambler's Top100