Sozdaiblog.ru
Назад

Как украсить горизонтальное меню с помощью CSS?

Опубликовано: 07.02.2013
Время на чтение: 5 мин
26
5

Здравствуйте, дорогие читатели – Sozdaiblog.ru!

Сегодня мы рассмотрим, как украсить с помощью CSS горизонтальное меню Вашего сайта.

Мы создадим своеобразный эффект скольжения картинки при наведении курсора мыши на один из пунктов меню.

Как и что мы будем делать.

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

Затем, всё это дело разместим в любое необходимое место на Вашем сайте, желательно между тегами <body></body>:

 

<ul class="mh-menu">

<li><a href="Ссылка"><span>Art Director</span> <span>Henry James</span></a><img alt="image01" src="Путь к фото" /></li>

<li><a href="Ссылка"><span>Production Coordinator</span> <span>Francis Morgan</span></a><img alt="image02" src="Путь к фото" /></li>

<li><a href="Ссылка"><span>Sound</span> <span>Kevin Schneider</span></a><img alt="image03" src="Путь к фото" /></li>

<li><a href="Ссылка"><span>Casting</span> <span>Benjamin Zakalis</span></a><img alt="image04" src="Путь к фото" /></li>

</ul>

 

Далее скачиваем архив  с исходными файлами, копируем CSS стили наиболее понравившегося эффекта (style1, style, или style3) и добавляем их в основной файл стилей Вашего ресурса.

Чтобы CSS меню красиво вписалось в дизайн Вашего сайта, отредактируйте необходимые атрибуты скопированных стилей, изменив размер, цвет и шрифт на свой вкус.

 

CSS эффект для Горизонтального меню

ДЕМО СКАЧАТЬ

Теперь у Вас есть замечательный выдвижной эффект. Надеюсь, что он Вам понравился. В ближайшее время Вас ждут новые необычные эффекты, которыми мне не терпится поделиться.

Ну, а на сегодня это всё. До новых статей…

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Валерий
    Опубликовано: 07.02.2013 Ответить на сообщение

    Классный эффект! Взял на заметку, может пригодится потом

    • Денис Черников
      Опубликовано: 07.02.2013 Ответить на сообщение

      Пожалуйста, Валерий!

  • Татьяна
    Опубликовано: 07.02.2013 Ответить на сообщение

    Классная штуковина! Благодарю и жду новых.

    • Денис Черников
      Опубликовано: 07.02.2013 Ответить на сообщение

      Пожалуйста, Татьяна! Они скоро будут.

  • Татьяна
    Опубликовано: 07.02.2013 Ответить на сообщение

    Ищу красивое вертикальное выдвижное меню. И чует мое сердце, что у Вас где то в запасе такая статейка имеется))) Так что «держу руку на пульсе» Вашего блога!

    • Денис Черников
      Опубликовано: 07.02.2013 Ответить на сообщение

      Может, это подойдёт — sozdaiblog.ru/dizayn-blog...shtee-menyu.html

      • Татьяна
        Опубликовано: 07.02.2013 Ответить на сообщение

        Нет, хочу чтобы в рубриках выезжали названия под рубрик с картинками.

        • Денис Черников
          Опубликовано: 07.02.2013 Ответить на сообщение

          Покажите пример, Татьяна!

  • Сергей Медведев
    Опубликовано: 07.02.2013 Ответить на сообщение

    Денис, ты наверное хотел сказать — вертикальное меню?
    Да, для сайтов отлично подойдет... А для блога только если страницу отдельную сделать с таким меню...
    Кстати, даже на 404 можно попробовать поставить!

    • Денис Черников
      Опубликовано: 07.02.2013 Ответить на сообщение

      Почему, вертикальное? Изображения выезжают горизонтально!) Прилепить можно в любое место, здесь нужно включить фантазию.

      • Сергей Медведев
        Опубликовано: 07.02.2013 Ответить на сообщение

        Ну просто обычно горизонтальным меню называют то, которое стоит горизонтально! То есть это когда кнопки такого расположения...

        • Денис Черников
          Опубликовано: 07.02.2013 Ответить на сообщение

          Ну это смотря в какой перспективе посмотреть!)))

          • Татьяна
            Опубликовано: 07.02.2013 Ответить на сообщение

            А вот насчет «впихнуть в страницу 404» — это идея! Нужно обмозговать!

  • Татьяна
    Опубликовано: 07.02.2013 Ответить на сообщение

    Денис, я Вас не поняла, показать пример чего? Я много летаю по сети и иногда встречаю красивое меню( для женских сайтов) с выдвижным эффектом. Загляденье.

    • Денис Черников
      Опубликовано: 07.02.2013 Ответить на сообщение

      Вот и покажите пример такого сайта! Я посмотрю, что там у них за меню такое.

      • Татьяна
        Опубликовано: 07.02.2013 Ответить на сообщение

        Оки! Как встречу — покажу.

  • Gosha_trade
    Опубликовано: 08.02.2013 Ответить на сообщение

    Ден как всегда ПРАКТИЧЕН, за что и РЕСПЕКТ.
    Приятно читать.
    Такое себе пока не планирую, но в заметку поставлю.

  • Gosha_trade
    Опубликовано: 08.02.2013 Ответить на сообщение

    А меню это все-таки вертикальное (согласен с Сергеем)

  • Александр
    Опубликовано: 15.02.2013 Ответить на сообщение

    Очень интересно! у меня уже есть задумка под эту красоту. Спасибо

    • Денис Черников
      Опубликовано: 15.02.2013 Ответить на сообщение

      Всегда пожалуйста! Приходите ещё!

  • Валентин Предлог-Добровольский
    Опубликовано: 23.03.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 23.03.2013 Ответить на сообщение

      Спасибо, за ссылку! Заходите ещё!

  • Роман
    Опубликовано: 08.04.2013 Ответить на сообщение

    Денис ты голова! С помощью CSS создаешь удивительные вещи. Я вот смотрю на твою работу и понимаю что мне еще многому надо научиться.Хотя я могу переделать все под себя но самому написать все это мне пока рановато. Спасибо

    • Денис Черников
      Опубликовано: 09.04.2013 Ответить на сообщение

      Пожалуйста, Роман!Но я тоже с ноля всё не создаю. Я заимствую идеи у забугорных программистов, потом всё это перерабатываю, перевёрстываю и делюсь с читателями. Написать с пустого места многие вещи очень сложно и мне тоже не всё под силу.

  • Руслан
    Опубликовано: 23.06.2013 Ответить на сообщение

    Применил данный эфект у себя на сайте
    Огромное спасибо !!!
    http: //www.nastroyka-pc.com.ua/index/kontakty/0-3

    • Денис Черников
      Опубликовано: 23.06.2013 Ответить на сообщение

      Отлично, Руслан! Попробуйте сделать, чтобы изображения выезжали влево, а не наезжали на окно информации.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.