Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по CSS / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Красивое Rollover меню

Здравствуйте, в данном уроке мы будем учиться делать с помощью CSS красивое rollover меню. Rollover-эффекты обычно предполагают использование двух или более изображений для каждого из состояний. Для ссылок это: link – ссылка до нажатия, hover – ссылка при наведении, active – ссылка при клике по ней мышкой, visited - уже посещенная ссылка. Все картинки можно хранить в разных файлах, но у такого подхода есть один минус – это дозагрузка используемых изображений, которая может быть заметна при медленном интернет соединении. Решением данной проблемы является размещение всех изображений для всех состояний в одной картинке, что делает динамическую смену изображения быстрее. Именно так и поступим.

В этом уроке мы будем делать меню, которое будет изменяться только при наведении мышки, т.е. у нас будет два состояния: ссылка до наведения будет иметь один вид, а при наведении на нее мышкой другой. Для этого нам понадобится в Photoshop или другом графическом редакторе на одном изображении сделать один под другим практически два одинаковых рисунка. Тот, что сверху будет отображаться  до наведения мышки (более светлый фон), а нижний при наведении (фон немного темнее). У меня получилась такая картинка (640х120):

Пример
Теперь приступим к верстке. Сначала сделаем каркас для меню:

<div id="container">
    <div
id="header">
        <ul>
           <li
id="home"><a href="#">Главная</a></li>
           <li
id="guest"><a href="#">Гостевая</a></li>
           <li
id="info"><a href="#">Информация</a></li>
           <li
id="sitemap"><a href="#">Карта сайта</a></li>
           <li
id="contact"><a href="#">Контакты</a></li>
        </ul>
    </div> 
</div>

Теперь, используя стили, мы приведем его в нужный вид.

* { margin:0; padding:0; }
#container {
  width:640px;
  margin:20px auto;
}

Первым делом мы обнулили все внутренние и внешние отступы, поскольку в разных браузерах они могут отображаться по разному.  Так же мы задали ширину блока и расположили его по центру. Теперь преобразим сам список:

#header ul {
  display:block;
  float:right;
  width:640px;
  height:60px;
  background:url(images/menu.jpg) no-repeat 0 0;
  list-style:none;
}
#header ul li {
  display:block;
  float:left;
  height:60px;
  text-indent:-10000px;
}

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

#home {
  width:126px;
}
#guest {
  width:108px;
}
#info {
  width:139px;
}
#sitemap {
  width:112px;
}
#contact {
  width:146px;
}

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

#header ul li a {
  display:block;
  width:100%;
  height:100%;
}

Теперь пропишем правило, которое будет указывать, какую именно часть фоновой картинки брать при наведении на нее мышкой:

#home a:hover {
  background:url(images/menu.jpg) no-repeat 0 -60px;
}
#guest a:hover {
  background:url(images/menu.jpg) no-repeat -126px -60px;
}
#info a:hover {
  background:url(images/menu.jpg) no-repeat -234px -60px;
}
#sitemap a:hover {
  background:url(images/menu.jpg) no-repeat -373px -60px;
}
#contact a:hover {
  background:url(images/menu.jpg) no-repeat -485px -60px;
}

Ну вот собственно и все на этом я и закончу урок.

Автор: Евгений Бочкарев Урок добавлен: 9 Февраля 2011 в 17:40 Просмотров: 13616

Условия копирования материалов сайта

Все комментарии
#0 Миса 10-03-2011 в 21:57
огромное спасибо ))) у меня всё получилось ))) только я картинку сохранила в формате gif
#1 Стар 25-03-2011 в 03:15
А можно сделать так что бы надпись на кнопках не была частью изображения, а полноценным шрифтом? Просто в некоторых случаях (к примеру при включении turbobutton в Opera) такое меню будет смотреться очень неважно. Ну и при масштабировании веб страницы так же.
#2 Евгений 25-03-2011 в 15:48
Можно использовать и обычный текст, просто так труднее добиться более красивого эффекта у текста, хотя при помощи CSS3 думаю вполне возможно. Просто в стилях нужно убрать text-indent, который смещает текст так что его становится невидно и правильно выровнять по центру.
#3 Alex 10-04-2011 в 22:56
Не центрирует изображение в explorer 8.0
#4 yo-nigga 07-01-2012 в 04:39
Очень геморройно, зачем для каждой кнопки стиль прописывать? Ведь можно просто паддинг указать для каждого li. Зачем загружать из картинок? Все это делается на чистом CSS.
#5 Nastia 12-12-2012 в 16:53
Почему-то при вставке меню в строку таблицы, получаются отступы с верху и с низу, не могу никак исправить.
А так урок хороший)
#6 Nastia 12-12-2012 в 17:14
Всё разобралась))
#7 yurijshulte 08-01-2013 в 20:52
Здравствуйте, Евгений! Мне очень нравятся Ваши уроки. Я недавно начал знакомиться с Joomla. Хочу попробовать создать свой сайт с этой платформой. Но у меня вопрос,будет ли в дальнейшем мой сайт независимым.В полной ли мере он будет моим? Заранее спасибо за разъяснение.С большим уважением. Можно просто - Юрий.
#8 Евгений 09-01-2013 в 17:45
Юрий, да сайт будет полностью ваш. Joomla распространяется бесплатно и имеет открытый исходный код, который при необходимости можно редактировать. Платформа, довольно популярна и имеет огромное количество плагинов для расширения функционала, которых в большинстве случаев хватает для создания сайта.
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки