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

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

ОБСУЖДЕНИЕ

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

Горизонтальное анимированное меню на css3
Просмотров: 1058  Скачан: 193 раз  Комментариев в теме: 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Горизонтальное выпадающее меню на c...

Выпадающее меню в темном стиле, реализованное полностью на css...

Горизонтальное меню с ползункомГоризонтальное меню с ползунком

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

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

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

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

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

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

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

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

Красивое горизонтальное меню в оригинальном стиле, в меню используется большое количество позиций......
Интересные публикации:

Magic BoxMagic Box

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

Карусель (плагин Circular Content)Карусель (плагин Circular Content)

На данной странице представлена карусель бесконечной прокрутки контента «плагин Circular Content», идея заключается в том, что бы вращать......

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Pack кнопок #3 на CSS3Pack кнопок #3 на CSS3

Pack кнопок №3 на css3, в пак вошло около 70 кнопок разного размера, цвета (круглые, прямоугольные, градиентные)....

Контактная форма (дизайн)Контактная форма (дизайн)

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

Portfolio SitePortfolio Site

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

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....
  • Текущий 1.38/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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