Данный пост расскажет вам о реализации красивого меню с помощью CSS. При наведении курсора на элемент меню мы будем получать интересный эффект, которого добьемся с помощью использования CSS спрайтов. О CSS спрайтах вы можете прочитать в более ранней статье Техника и преимущества использования CSS спрайтов.
Итак, приступим.
Для начала создадим изображение того, как будет выглядеть наше навигационное меню в “спокойном” состоянии:
Теперь нам необходимо создать такое же изображение, только для состояния меню, в котором как будто бы на каждый пункт наведен курсор – можно добавить подчеркивание, тень, свечение либо какой-нибудь другой эффект на ваш выбор:
Теперь нужно скомбинировать эти два изображения в одно следующим образом:
Теперь когда изображение готово, можно приступить к формированию html-разметки:
|
1 2 3 4 5 6 |
<ul id="nav-example">
<li id="nav-example-01"><a href="#"><span>Blog</span></a></li>
<li id="nav-example-02"><a href="#"><span>Portfolio</span></a></li>
<li id="nav-example-03"><a href="#"><span>Resume</span></a></li>
<li id="nav-example-04"><a href="#"><span>Contact</span></a></li>
</ul> |
У нас имеется список из 4-х элементов, каждый из которых является ссылкой на определенный раздел сайта. Текст ссылок был заключен в тег span в целях поисковой оптимизации, иначе поисковые системы будут видеть лишь наличие картинки, но никак не текста.
Теперь разобьем наше изображение с помощью CSS на кусочки, соответствующие пунктам меню:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
#nav-example {
background:url("/images/nav-final.jpg") no-repeat;
width:490px;
height:40px;
margin:0;
padding:0;
}
#nav-example span {
display: none;
}
#nav-example li, #nav-example a {
height:40px;
display:block;
}
#nav-example li {
float:left;
list-style:none;
display:inline;
}
#nav-example-01 {
width: 98px;
}
#nav-example-02 {width: 131px;}
#nav-example-03 {width: 123px;}
#nav-example-04 {width: 138px;}
#nav-example-01 a:hover {background:url("/images/nav-final.jpg") 0px -40px no-repeat; }
#nav-example-02 a:hover {background:url("/images/nav-final.jpg") -98px -40px no-repeat; }
#nav-example-03 a:hover {background:url("/images/nav-final.jpg") -229px -40px no-repeat; }
#nav-example-04 a:hover {background:url("/images/nav-final.jpg") -352px -40px no-repeat; } |
Первая часть задает размеры и фоновое изображение навигационной строки, при этом будет показана только верхняя половина изображения.
Элементы #nav-example span сделаны невидимыми, чтобы не показывался содержащийся в них текст (он будет закрывать наше изображение). Однако стоит быть внимательным, чтобы внутри таких элементов не оказалось ключевых слов, иначе вы рискуете быть забанеными поисковиками.
#nav-example li, #nav-example a {height:40px; display:block;} – это позволяет показать каждый элемент списка и каждую ссылку в виде блочного элемента высотой в 40 пикселей (благодаря данной строке мы можем быть 100% в этом уверены). Благодаря display:block мы можем менять ширину ссылки как нам нужно (а ссылки у нас все разной ширины).
#nav-example li {float:left; list-style:none; display:inline;} – с помощью этого мы расположим элементы списка в одну строку слева направо, а с помощью list-style: none мы уберем стандартные кружочки около элементов списка.
#nav-example-01 {width: 98px;} и тому подобные строки – задаем ширину каждого пункта нашего меню.
Теперь остается задать состояние a:hover (наведенный курсор мыши) для наших пунктов меню. Поскольку часть нашего спрайта, необходимая для их отображения, находится в нижней его половине, мы указываем в свойстве background y-составляющую, равную -40px. X-составляющая положения фона у нас соотносится с положением каждого пункта меню на карте.
Ну и как всегда напоследок – демо:
Спасибо все работает!