Данное руководство поможет Вам создать CSS меню для вашего сайта, оно не будет обычным, оно будет привлекать внимание пользователей, не сомневайтесь. И так приступим…
Фон для меню
Для начала создадим background, я конечно не мастер PhotoShop’a, но вот что у меня получилось за пару минут:
Графические кнопочки
Создаем изображения которые у нас будут использовать как ссылки в меню. Для этого воспользуемся PhotoShop’ом:
- Создаем новый файл размером этак 144×58px. (размер ссылки для первого элемента в меню)
- Наполняем графическим содержимым сей пункт меню (у меня это лишь надпись выполненная забавным шрифтом):
- Далее увеличим размер полотна (canvas size) в два раза:
-
И дорисуем внешний вид элемента меню для реализации события hover
Как сия конструкция будет работать? Да очень просто – ссылке мы явно указываем размер 144×58px, а но событие mouseover перемещаем фоновое изображение вверх:
- Создадим новый файл с произвольным размером и текстом – это будет наша подсказка к ссылке
- Повторим все предыдущие пункты для создания всех пунктов меню, в результате анаших манипуляций у нас должен получиться вот такой набор изображений:
HTML код
Закончили строить из себя дизайнеров, пора начинать кодить – создадим не нумерованный список – <ul>:
- элементу <ul> присвоеим id=”menu”
- каждой ссылке <a> присвоим уникальное имя класса
- Внутрь тэга <a> закинем пустой тэг <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
Для начала убираем padding и margin у меню, list-style выставляем в none, position указываем как relative . Указываем высоту и ширину меню (см. размеры menu-bg.jpg). Добавляем фоновое изображение.
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 774px;
height: 210px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}
#menu span
Для элементов 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
Теперь мы хотим сдвинуть картинку на линке по событию mouseover, для этого добавим в CSS следующий код:
#menu a:hover {
background-position: left bottom;
}
#menu a:hover span
Так же по событию mouseover необходимо отобразить подсказку
#menu a:hover span {
display: block;
}
#menu .home
Теперь нам необходимо правильно расставить элементы меню. Для начала укажем размер элемента и фоновое изображение, а затем займемся позиционированием, будем изменять параметры left и top пока не почувствуем морального удовлетворения от внешнего вида меню:
#menu .home {
width: 144px;
height: 58px;
background: url(images/home.gif) no-repeat;
left: 96px;
top: 96px;
}
#menu .home span
Теперь проведем подобную операцию для всплывающей подсказки
#menu .home span {
width: 86px;
height: 14px;
background: url(images/home-over.gif) no-repeat;
left: 28px;
top: -20px;
}
#menu .about
Копируем всё что мы сделали для элемента .home и переименовываем в .about. Подгоняем размер и расположение, так же заменяем фон.
#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;
}
Это всё, протестировать меню можете тут, а скачать пример тут.
Вольный перевод : http://www.webdesignerwall.com/tutorials/advanced-css-menu/
This entry was posted
on Friday, February 22nd, 2008 at 15:04 and is filed under HTML and CSS.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
неплохо бы добавить еще объединение всех картинок в одну
и смещать ее с помощью CSS
надо приучать людей правильным азам
[...] руководство поможет Вам создать CSS меню для вашего сайта, оно не будет обычным, оно будет [...]
[...] CSS меню для начинающих [...]
[...] Данное руководство поможет Вам создать CSS меню для вашего сайта, оно не будет обычным, оно будет [...]
Еще бы хотелось чтобы это меню было видно при отключенных картинках
Здравствуйте!
Скажите, пожалуйста, а как сделан блокнотик с закладками, справа на Вашем сайте?
Спасибо.
to Владислав:
Данный “блокнот” использует JavaScript для переключения между закладками, т.е. каждый лист блокнота – отдельный див, по нажатию на закладку, див привязанный к ней (см. id элементов в сорцах страницы) отображается, все остальные скрываются…
Закладка представляется из себя див с фоновой картинкой, к примеру этой, при активации закладки – фон смещается (аналогично как в данной статье)…
как то некрасиво что картинки выехали из бокса
to max:
Из какого бокса?
Симпатично, но картинки действительно лучше было в виде одного спрайта сделать, а фон зациклить просто кусок – тоже чтобы уменьшить размер 8-)
[...] CSS меню для начинающих [...]
А при помощи не судьба сделать? я всю жизнь делал на div и не парился
А как сделать посередине такую страницу белую как у вас с помощю ссs. Подскажите пожалуйста
@Girder:
Вам лучше всего будет взглянуть на примеры версток страниц по адресу http://blog.html.it/layoutgala/
Спасибо!
Нашол баг в ie … тэги span не отображаються
при отображении в IE6 появляется неприятное свойство. картинки меняются не бысто, а как-то в замедленном темпе что-ли. наводишь на пункт меню, картинка пропадает на полсекунды, и потом появляется ее вторая часть. Отводишь мышку и картинка опять пропадает на пол секунды и потом появляется первая часть. Вот даже не знаю из-за чего. А в варианте http://www.webdesignerwall.com/tutorials/advanced-css-menu/ такого бага нет, хотя код тот-же.
Ой что-то мудреное, я бы сделал проще, задал бы для <a href свойства
a {
display:block
width:по ширине картинки
height:по высоте
background: картинка 1
}
а при наведении на ссылку подменил бы бекграунд
a:hover {
background: картинка 2
}
+ позиционирование в стилях, марафет )) и все
Это я видел на уроках Евгения Попова, это его урок. А менюшка действительно классная.
@Alex:
Ну данная статья является лишь переводом, кстати можете скинуть ссылку на урок?
to ilya
Задержка происходит из-за того что картинка подгружается. Чем больше картинка, тем дольше она и будет грузиться.
На этом сайте при первом наведении на элемент навигации картинка с подсказкой появляется через 1-2сек. (подгружается), в последующие разы – отображается нормально, т.к. находится уже в кэше.
Для быстрого отображения сразу, такого рода изображения нужно подгружать предварительно перед загрузкой самой страницы.
Можно сделать при помощи JavaScript.
Ну, а при помощи CSS, точно не знаю, но в принципе тоже как то можно, например подгрузить нужное изображение поместив его в нижний слой под какойнить элемент страницы (Z-index: -1).
а сам Div в коде страницы разместить перед навигацией.
ilya, зачем подгружать? Если использовать метод смещения, то картинка загружается сразу, а потом только смещается, тоесть никакой задержки
В IE6 как всегда глюки :) Подсказки появляются, но не убираются.
разобрался как исправить??
Прикольно
Респект
Кстати в одну картинку все сливать не обязательно
:)
тк если поменять один пункт меню нужно менять все
и css тоже
——————————
форум верстальщиков http://html-css.com.ua
[...] CSS меню для начинающих – 16 953 [...]
Спасибо огромное за этот урок!!!
благодаря нему я смог сделать себе нормальную менюшку на сайте))… ну, разумеется я там много всего поменял…
У меня вообще была проблема с отступом в эксплорере из-за Списков… не умел делать так что бы отступа не было)… теперь умею, спасибо!!
…проблема с отступом в эксплорере из-за Списков… у меня тоже. Как убрать?
[...] Временно можете добавить border – дабы было удобнее позиционировать. Так же я добавил всплывающую подсказку для каждого элемента (как? – читайте в статье CSS меню для начинающих). [...]
А как сдлать чтобы при наведение менялась сама картинка линка, я пробывал но все равно оставалась изначальная картинка а новая появлялась поверх нее.
Нужно сделать две картинки в одной,тогда с помощью background-position: bottom при наведении будет меняться картинка. Скачай готовый пример и всё поймёшь.
Спасибо! Полезный урок.
Посмотрите как выглядит єтот сайт в IE 6, и вы сильно удевитусь. И этот пареню учит CSS! :)
IE6 – это что?
Лично для тебя Internet Explorer 6. Знаеш есть такой браузер, которым пользуеть 60% людей во всем мире.
Вы прикалываетесь или действительно так считаете? О_о
Конешно же шучу.
Да, в IE6 кнопки с отступом бОльшим чем в других броузерах. А я делал меню шаблона по этому уроку, прийдется разбираться.
Здравствуйте я пишу сайт и у меня есть один вопрос в каком формате сохранять рисунки(просто gif-ухудшает немного качество и вместо плавного перехода одного цвета в другой получается переход построчный, bmp-тоже ухудшает, а мне надо прозрачные фоны очень часто, а jpg-не сохраняет прозрачности и делает фон белым? (заранее спасибо)
используй gif, он единственный работает в IE, png работает в нормальных браузерах, но в IE не работает с прозрачностью
у меня все работает… И .ПНГ в ИЕ тоже. Лучше использовать .ПНГ, он и полупрозрачности поддерживает и качества не портит… хотя, ГИФ тож полезен