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
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 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
                                  Полезно.

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