Пример простого меню из картинок с CSS анимацией

Меню из картинок на CSSПродолжая изучать свойства анимации CSS3, решил применить полученные знания на практике - сделать какое-нибудь простенькое анимированное меню. В итоге получилось довольно симпатичное и очень простое меню с использованием иконок. Смысл его в том, что при наведении курсора картинка и тест плавно увеличиваются, как бы приближаясь к посетителю, анимация выполнена с помощью CSS3.
  Сразу смотрим:
DEMO
  Для реализации данного меню у себя на сайте или в блоге не нужно ничего дополнительно подключать, достаточно лишь добавить не большой HTML и короткий CSS коды. В Blogger-блоге можно использовать для этих целей стандартный гаджет HTML/JavaScript.
  Итак, по кодам. HTML для меню выглядит так:
<div class="macmenu">
 <div class="button">
  <a href="#"><img src=".../image/home.png">Главная</a>
  <a href="#"><img src=".../image/news.png">Новости</a>
  <a href="#"><img src=".../image/photo.png">Фотографии</a>
  <a href="#"><img src=".../image/music.png">Музыка</a>
  <a href="#"><img src=".../image/docs.png">Документы</a>
  <a href="#"><img src=".../image/fav.png">Избранное</a>
 </div>
</div>
И стили CSS:
.macmenu {
 height: 128px; /*высота общего блока*/
}
.button {
 margin: 0 auto; /*выравнивание блока по центру*/
 width: 720px; /*ширина всего блока с меню*/
}
.button a img,
.button a {
 display: block;
 float: left;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 height: 70px;
 width: 70px;
}
.button a {
 margin: 5px 15px;
 text-align: center;
 color: #fff;
 font: normal normal 10px Verdana;
 text-decoration: none;
 word-wrap: normal; /*запрещает автоматически разрывать слова на перенос*/
}
.macmenu a:hover img {
 margin-left: -30%; /*смещает картинку левее, выравнивая ее по центру*/
 height: 128px;
 width: 128px;
}
.button a:hover {
 font: normal bold 14px Verdana;
}
Если меню нужно расположить вертикально, то CSS будет таким:
.macmenu {
 height: 720px; /*высота всего блока*/
}
.button {
 text-align: center;
 margin: 0 10px; /*внешние отступы*/
}
.button a img,
.button a {
 display: block;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 height: 70px;
 width: 70px;
}
.button a {
 margin: 15px 5px;
 text-align: center;
 color: #000;
 font: normal normal 10px Verdana;
 text-decoration: none;
 word-wrap: normal;
}
.macmenu a:hover img {
 margin-left: -30%;
 height: 128px;
 width: 128px;
}
.button a:hover {
 font: normal bold 14px Verdana;
 height: 128px; /*высота ссылки при наведении курсора*/
}

 Вот и все, размещаем и радуемся. Благодарю за внимание.

18 комментариев:

  1. Подскажите пожалуйста, а куда прописываются сами ссылки - на главную, новости и т.д.

    ОтветитьУдалить
  2. Photographer19.03.2013, 14:01

    .....разобрался: вместо #.
    Спасибо за классную плюшку.

    ОтветитьУдалить
  3. Анонимный29.10.2013, 00:06

    Спасибки))) Классное меню))

    ОтветитьУдалить
  4. Симпатичная штука, надо будет присобачить куда-нибудь на свой сайт :D

    ОтветитьУдалить
  5. да меню супер только никак не разберусь как стили вставить(((
    Буду УЖАСНО благодарен если подскажете

    ОтветитьУдалить
  6. не ну не бомба? Оставил комент попросил о помощи и за 5 минут сам решил проблему!
    Вот блого-бог все видит и за просто так ничего стырить не даст! Так что подпишусь я на Ваш блог! и + оставлю... корече буду благодарным и обязанным. Спасибо огромное!

    ОтветитьУдалить
  7. За это меню Вам отдельное спасибо!
    Теперь вопрос или скорее просьба! Можно ли на блогспоте джава скриптом или CSS реализовать фрейм или как бы это правильно назвать… всплывающее окно, которое, появляясь, будет иметь красивый вид (типа лайтбокса) но в содержимом активный другой сайт который полностью функционирует (переходы на страницы, заполняемые формы…).
    Могу указать на пример такой функции, правда, не блогспот.
    Пример применения: на вашем сайте размещен скрипт, скопировав его, вызываю окошко онлайн ХТМЛ редактор и, вставив туда код, редактирую под свои нужды.

    ОтветитьУдалить
    Ответы
    1. Собственно на Блогспоте, с помощью JS, можно сделать практически все что и на других ресурсах. Красивый вид - это оформление, все остальное функционирование если "другой сайт который полностью функционирует", то это фрейм, а если "окошко онлайн ХТМЛ редактор", то это можно попробовать на JS

      Удалить
    2. Ну буду надеяться что когда то у Вас дойдут руки и до подобной темы. Сам мудохался но ничего кроме нового всплывающего окна браузера не смог сделать.

      Удалить
    3. Это хорошая идея, как будет сводное время обязательно займусь ее реализацией, но пока что увы.

      Удалить
  8. Возникла проблема при использовании с wordpress woocommerceпри наведении смещается влево изображение. посмотреть можно на сайте wise.com.ua
    в футере в категориях - страницы woocommerce

    ОтветитьУдалить
  9. У меня тоже что то подобное было. Правда уже не помню как именно исправил(( Пересмотрите код CSS вроде там чего то менял.
    Попробуйте вот тут
    "margin-left: -30%; /*смещает картинку левее, выравнивая ее по центру*/"
    поковыряться.

    ОтветитьУдалить
  10. Меню очень интересное, но как изменить картинки, мне не нужна музыка и фото, а нужны другие разделы, можно ли это сделать?

    ОтветитьУдалить
    Ответы
    1. Конечно можно просто измените названия и соответствующие изображения для разделов в коде.

      Удалить
  11. Анонимный07.02.2015, 00:22

    Подскажите плиз, а как сделать, чтобы картинки увеличивались смещаясь вверх, а не вниз?

    ОтветитьУдалить
  12. Анонимный12.03.2015, 20:03

    Здравствуйте.Спасибо вам за меню.Но у меня почему-то не увеличиваются картинки при наведении мыши.Текст увеличивается а картинки мертво стоят...Не знаете из за чего так?
    Я вас очень прощу ответьте мне если можно.

    ОтветитьУдалить
  13. Не знают как вставлять правельно в css файл а ещё за сайт берутся))) css учи для начало линки минки там что для чего)))

    ОтветитьУдалить

Следующее Предыдущее

BestProject