Скриншот
источник: сеоша.рф
В этом уроке мы будем учиться делать интересное меню с использованием CSS.
Набор графики, который понадобится для реализации меню - скачать 7 изображений. Желательно их поместить в папку images. Если иначе, исправьте в коде пути к файлам изображений.
Не буду останавливаться подробно, как создать сами картинки для меню, это больше урок фотошопа, а не html и css, рассмотрим создание красивого меню на уже готовых изображениях.
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>
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;
}
Сам принцип можно использовать для создания подобных меню с любыми изображениями.
