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

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

ОБСУЖДЕНИЕ

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

Горизонтальное анимированное меню на css3
Просмотров: 1011  Скачан: 186 раз  Комментариев в теме: 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" />
Материалы по теме:

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

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

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

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

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

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

Jquery меню горизонтальноеJquery меню горизонтальное с анимир...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

Горизонтальное выпадающее меню с помощью jqueryГоризонтальное выпадающее меню с по...

Горизонтальное меню в темном стиле с выпадающими пунктами....

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

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

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Free MusicFree Music

Отличный html шаблон музыкального портала, сделанный по современным стандартам, в шаблоне уже встроенный проигрыватель аудио и видео файлов......

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Hope CenterHope Center

Универсальный шаблон Hope Center на HTML5, был разработан для благотворительного сайта, в шаблоне используется красивый слайдер......
  • Текущий 1.43/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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