Интересное 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 {

    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;

    }

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

    }