В этом уроке мы будем учиться делатьинтересное меню с использованием CSS.
Вот набор графики, который Вам понадобится для реализации меню (скачать его можно здесь http://youseller.my1.ru/images.zip ). Всего 7 изображений. Желательно их поместить в папку images. Если этого не получится, везде в коде исправьте путь до изображений.
1. Перейдем к HTML части:
Основу меню у нас будет составлять список, созданный тэгом <ul>.
Каждая ссылка формируется через тэг <a>, при этом, у каждой из ссылок должен быть уникальный класс.
Кроме этого мы должны внутри каждой ссылки оставить пустой элемент <span></span>, который нам понадобится для создания эффекта, при котором одно изображение сменяет другое при наведении мыши.
Здесь мы сбрасываем все отступы, ставим стиль списка в положение none, ставим на фон большое изображение и прописываем значение ширины и высоты элемента, которые равны размеру того самого фонового изображения.
Устанавливаем display:none чтобы по-умолчанию этот элемент был невидим. И добавляем свойство position:absolute, чтобы затем можно было точно в это место вставить новое изображение при наведении курсора мыши на ссылку.
#menu span { display: none; position: absolute; }
Стиль для элемента #menu a
Ключевая особенность здесь в свойстве text-indent. Мы специально устанавливаем значение этого свойства в отрицательном диапозоне (-900%), чтобы текст был невидим.
Когда курсор мыши наводят на ссылку, фоновое изображение меняет расположение с верхнего угла на нижний.
#menu a:hover { background-position: left bottom; }
Стиль для элемента #menu a:hover span
Когда курсор мыши наводят на ссылку элемент span получает значение display:block.
#menu a:hover span { display: block; }
Стиль для элемента #menu .home
Здесь мы задаем ширину, высоту и фоновое изображение, конкретно для первого элемента навигации. На предыдущем шаге для всех элементов <a> мы уже задали значение позиционирования в postition:absolute. Теперь же для элемента с классом .home мы можем через свойства left и top задать конкретные значения того, где этот элемент должен быть расположен.
Здесь мы задаем ширину, высоту, фон и позицию для элемента внутри ссылки с классом .home (изображение, которое замещает начальное при наведении курсора мыши).
Скопируйте свойства от элемента .home и переименуйте в .about. А теперь просто измените значения ширины (width), высоты (height), фона (background), позиции от левого края (left), и позиции от верхнего края (top) на те, которые видите ниже.
Главная 
