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

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

ОБСУЖДЕНИЕ

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

Горизонтальное анимированное меню на css3
Просмотров: 1207  Скачан: 214 раз  Комментариев в теме: 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. Меню отлично подойдёт для сайта дизайнера или фотографа....

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

Меню в стиле Apple, созданное полностью на css3.

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

Отличное горизонтальное меню с большое количество пунктов....

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....

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

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

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

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

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

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

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

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

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro - jQu...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Аккордеон на css3 и jqueryАккордеон на css3 и jquery

Неплохой аккордеон для вашего сайта на css и jquery, в аккордеоне можно использовать текст, изображения, имеется два вида реализации аккордеона....

Аккордеон изображенийАккордеон изображений с помощью css3

Красивый горизонтальный аккордеон для вывода изображений на сайте....

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

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

Вкладки контента css3Вкладки контента css3

Красивые вкладки контента реализованные с помощью css3...
  • Текущий 1.56/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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