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

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

ОБСУЖДЕНИЕ

Выпадающее меню для сайта

Выпадающее меню на css3
Просмотров: 1117  Скачан: 217 раз  Комментариев в теме: 0

Красивое горизонтальное выпадающее меню для сайта с применением иконического шрифта. Меню полностью на css3 и хорошо подойдёт для светлого дизайна. Порой нужно что-то красочное, что-то приятное для глаз, например для разгрузки сайта от излишнего тёмного цвета, или просто немножко разнообразить дизайн сайта, думаю представленное меню внесет в ваш дизайн немножко приятного цвета.

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

 

HTML

<div id="colorNav">
    <ul>
        <li class="green">
            <a href="#" class="icon-home"></a>
            <ul>
                <li><a href="#">Главная</a></li>
                <li><a href="#">О нас</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </li>
        <li class="red">
            <a href="#" class="icon-cogs"></a>
            <ul>
                <li><a href="#">Настройки</a></li>
                <li><a href="#">Профиль</a></li>
                <li><a href="#">Опции</a></li>
                <li><a href="#">Еще..</a></li>
            </ul>
        </li>
        <li class="blue">
            <a href="#" class="icon-twitter"></a>
            <ul>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Вконтакте</a></li>
            </ul>
        </li>
        <li class="yellow">
            <a href="#" class="icon-beaker"></a>
            <ul>
                <li><a href="#" target="_blank">Уроки</a></li>
                <li><a href="#" target="_blank">Иконки</a></li>
                <li><a href="#" target="_blank">Скрипты</a></li>
                <li><a href="#" target="_blank">Еще..</a></li>
            </ul>
        </li>
        <li class="purple">
            <a href="#" class="icon-envelope"></a>
            <ul>
                <li><a href="#">Написать</a></li>
            </ul>
        </li>
    </ul>
</div>

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

 

CSS

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

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

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

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

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

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

Меню с выпадающими пунктами на css

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

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

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

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

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

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

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

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

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Valenti v1.1.8Valenti v1.1.8

Многофункциональная журнальная тема с полной адаптивной вёрсткой для WordPress....

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

Cлайдер КарусельCлайдер Карусель

Слайдер картинок, с бесконечной прокруткой, в слайдере имеется красивый эффект......

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat Forms ...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню на cs...

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

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

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

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


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