qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

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

Горизонтальное анимированное меню на css3
Просмотров: 1162  Скачан: 213 раз  Комментариев в теме: 0

Отличное горизонтальное анимированное меню на css3 с замечательным эффектом. Идея заключается в анимации и трансформации иконок, текста, при наведении курсора мыши. Меню прекрасно впишется в современный дизайн, к примеру отлично подойдёт к портфолио.

Шаг 1 - создание разметки

 

HTML

<ul class="ca-menu">
    <li>
        <a href="#">
            <span class="ca-icon">A</span>
            <div class="ca-content">
                <h2 class="ca-main">Exceptional Service</h2>
                <h3 class="ca-sub">Personalized to your needs</h3>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ca-icon">I</span>
            <div class="ca-content">
                <h2 class="ca-main">Creative Storytelling</h2>
                <h3 class="ca-sub">Advanced use of technology</h3>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ca-icon">C</span>
            <div class="ca-content">
                <h2 class="ca-main">Infographical Education</h2>
                <h3 class="ca-sub">Understanding visually</h3>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ca-icon">S</span>
            <div class="ca-content">
                <h2 class="ca-main">Sophisticated Team</h2>
                <h3 class="ca-sub">Professionals in action</h3>
            </div>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="ca-icon">d</span>
            <div class="ca-content">
                <h2 class="ca-main">Unconditional Support</h2>
                <h3 class="ca-sub">24/7 for you needs</h3>
            </div>
        </a>
    </li>
</ul>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style1.css" type="text/css" />
Материалы по теме:

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фо...

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся мен...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

Выпадающее меню на css3Выпадающее меню на css3

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu...

Стильное горизонтальное меню с выдвижными иконками

Фиксированная панель с навигацией на css3Фиксированная панель с навигацией н...

Панель фиксируется внизу страницы и имеет не большую навигацию, что очень удобно если вам нужно вывести какие то важные ссылки или информацию....

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню ...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню н...

Горизонтальное меню на css3 с замечательным эффектом....
Интересные публикации:

Magic BoxMagic Box

Лёгкий html шаблон в тёмных тонах сделанный в виде блога, в шапке встроенный довольно привлекательный слайдер......

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью JQuery...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

Меню с прокруткой, реализованое с помощью jquery, главная особенность такого меню......

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

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

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

Раскрывающиеся горизонтальное меню на css и JQueryРаскрывающиеся горизонтальное меню на cs...

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....
  • Текущий 1.56/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.6/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить