Интересное CSS меню

В этом уроке мы будем учиться делать интересное меню с использованием CSS.

Вот набор графики, который Вам понадобится для реализации меню (скачать его можно здесь). Всего 7 изображений. Желательно их поместить в папку images. Если этого не получится, везде в коде исправьте пути к файлам изображений.

1. Перейдем к HTML части:

Основу меню у нас будет составлять список, созданный тэгом <ul>.

Каждая ссылка формируется через тэг <a>, при этом, у каждой из ссылок должен быть уникальный класс.

Кроме этого мы должны внутри каждой ссылки оставить пустой элемент <span></span>, который нам понадобится для создания эффекта, при котором одно изображение сменяет другое при наведении мыши.

<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>

2. Теперь перейдем к CSS стилям

Стиль для элемента #menu

Здесь мы сбрасываем все отступы, ставим стиль списка в положение none, ставим на фон большое изображение и прописываем значение ширины и высоты элемента, которые равны размеру того самого фонового изображения.

#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 span {
display: none;
position: absolute;
}

Стиль для элемента #menu a

Ключевая особенность здесь в свойстве text-indent. Мы специально устанавливаем значение этого свойства в отрицательном диапозоне (-900%), чтобы текст был невидим.

#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}

Стиль для элемента #menu a:hover

Когда курсор мыши наводят на ссылку, фоновое изображение меняет расположение с верхнего угла на нижний.

#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 задать конкретные значения того, где этот элемент должен быть расположен.

#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 73px;
}

Стиль для элемента #menu .home span

Здесь мы задаем ширину, высоту, фон и позицию для элемента внутри ссылки с классом .home (изображение, которое замещает начальное при наведении курсора мыши).

#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}

Стиль для элемента #menu .about

Скопируйте свойства от элемента .home и переименуйте в .about. А теперь просто измените значения ширины (width), высоты (height), фона (background), позиции от левого края (left), и позиции от верхнего края (top) на те, которые видите ниже.

#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

Тоже самое проделываем для свойства элемента меню с классом .rss

#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;
}

В итоге стили, которые отвечают за работоспособность меню у Вас будут выглядеть так:

#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;
}

Пример того, что получилось у меня Вы можете посмотреть на этой странице.

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

 

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.webdesignerwall.com/tutorials/advanced-css-menu/
Перевел: Евгений Попов
Урок создан: 14 Мая 2008
Просмотров: 74075
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^