22 февраля 2008 в 18:00

CSS меню для начинающих


Данное руководство поможет Вам создать CSS меню для вашего сайта, оно не будет обычным, оно будет привлекать внимание пользователей, не сомневайтесь. И так приступим…

Фон для меню


Для начала создадим background, я конечно не мастер PhotoShop'a, но вот что у меня получилось за пару минут:


Графические кнопочки


Создаем изображения которые у нас будут использовать как ссылки в меню. Для этого воспользуемся PhotoShop'ом:

  • Создаем новый файл размером этак 144x58px. (размер ссылки для первого элемента в меню)
  • Наполняем графическим содержимым сей пункт меню (у меня это лишь надпись выполненная забавным шрифтом):
  • Далее увеличим размер полотна в два раза
  • И дорисуем внешний вид элемента меню для реализации события hover

    Как сия конструкция будет работать? Да очень просто — ссылке мы явно указываем размер 144x58px, а но событие 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/

Кросспост: CSS меню в стиле Web 2.0
Антон Шевчук @AntonShevchuk
карма
490,9
рейтинг 0,0
Похожие публикации

Комментарии (28)

  • 0
    Почему "в стиле web 2.0"?
    ...сам не знаю, предложите иное название для данного топика, оно меня тоже смущает...
    • +2
      "CSS меню в стиле Web 3.0!"
    • +3
      "Стандартное меню для начинающих"?

      Я думала, хоть спрайты будут)
      • 0
        О, спасибо...
        • 0
          Ну и не «для начинающих». В оригинале само меню было всё же «advanced».

          Да кстати не в последнюю очередь оригинальная статья хорошо воспринималась за счет тамошних картинок.
  • 0
    Ужас какой-то... И от web 2.0 только название.
    • 0
      Убрал из названия, остался только "ужас" :)
  • 0
    Спасибо!
    Очень познавательно для маленьких любителей CSS (таких как я).
  • 0
    Спасибо, утащил в копилку полезностей) Ждем еще чего-то такого плана)
  • 0
    а что, это нельзя сделать, не увеличивая картинки в 2 раза, а лишь нарисовав один эллипс на прозрачном фоне?
    • 0
      тогда при наведении картинка будет подгружаться и появится не сразу...
      • 0
        сделать так, чтобы картинка загружалась сразу по открытии страницы - не так уж и сложно
        • 0
          Но надо "запариться", да и чем больше картинок - тем больше обращений к серверу и ожиданий ответа от него...
          • 0
            неужели одна лишняя картинка того же размера хуже, чем увеличение вдвое всех картинок?
            • 0
              Да. Тем более если подразумевается загрузка обоих маленьких картинок сразу.
              это как минимум один лишний запрос к серверу. Плюс вес двух маленьких картинок очень легко может стать больше веса одной, но в два раза больше.
              • 0
                вы не поняли ;)
                у нас одна картинка с бордюрчиком на все картинки без
                если у всех одинаковая ширина, то все выходит чудесно
                • 0
                  А если бордюрчики разные как в сабжевом случае, то картинка совсем не одна получается...
  • 0
    В спаны лучше бы и прописали этот текст с подсказкой.
    Хотя я бы даже использовал <small> — семантически ничего не меняется, но без css визуально отличие будет.
    Ну и раз для начинающих, то объяснили бы, что title — тоже полезный атрибут.
    <li><a href="#" class="home" title="Home">Home <small>(go to home)</small></a></li>
  • 0
    Спасибо за топик! Вы разложили всё по полочкам.
    Я долгими вечерами сидел над аналогичным скриптом с apple.com где iPod Shuffle меняет свой цвет от нажатия на картинки-кнопки, там и менюшка аналогичная была... А так как я ни в CSS, ни в JavaScript не особо силён - то очень запутался :(
    Но Вы помогли!
  • 0
    а я допустим отключу графику. И что, буду смотреть в девственно белый экран?
    • –1
      диалап форевер :)
  • +1
    Ну так и надо говорить: урок переведен с такого-то сайта:
    http://www.webdesignerwall.com/tutorials/advanced-css-menu/
    http://88.198.60.17/images/50-css-techniques/css32.png
    :gigi:
    • 0
      Полностью согласен. Статья из Smashing Magazine.
      Знаете ли, есть такой раздел блогов под названием "Переводы". Вам туда. И картинки верните оригинальные.
    • 0
      Собственно в конце статьи так и написано...
  • 0
    Бррр... Зачем absolute, relative, top, left? background-position уже не в моде? :)
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Как по мне, то, что каждое слово выделяется по-разному - раздражает. А "раздражающий" (даже в хорошем смысле слова) стиль меню уже немного в прошлом. Меню должно быть не заметным до того момента пока не нужно, и выполнять лишь одну, очевидную, задачу когда нужно. Хотя может я и сильно консервативен.
  • 0
    Полезно.

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