ГлавнаяCSS, JQuery, JavaScript › Как украсить горизонтальное меню с помощью CSS?


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


Горизонтальное меню CSS

Здравствуйте, дорогие читатели – 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 эффект для Горизонтального меню

Меню CSS

ДЕМО СКАЧАТЬ

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

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

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




26 комментариевА что думаете Вы?

  1. Валерий

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  2. Татьяна

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Татьяна

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Татьяна ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  4. Сергей Медведев

    Денис, ты наверное хотел сказать — вертикальное меню? :)

    Да, для сайтов отлично подойдет... А для блога только если страницу отдельную сделать с таким меню...

    Кстати, даже на 404 можно попробовать поставить! :)

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Сергей Медведев ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Татьяна ответил:

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

    [Ответить]

  5. Татьяна

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Татьяна ответил:

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

    [Ответить]

  6. Gosha_trade

    Ден как всегда ПРАКТИЧЕН, за что и РЕСПЕКТ.

    Приятно читать.

    Такое себе пока не планирую, но в заметку поставлю.

    [Ответить]

  7. Gosha_trade

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

    [Ответить]

  8. Александр

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. Валентин Предлог-Добровольский

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  10. Роман

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  11. Руслан

    Применил данный эфект у себя на сайте

    Огромное спасибо !!!

    http: //www.nastroyka-pc.com.ua/index/kontakty/0-3

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

Оставить комментарий!

Вверх