RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Горизонтальное выпадающее меню на css
Просмотров: 1426  Скачан: 241 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="example">
    <div class="menuholder">
        <ul class="menu slide">
            <li><a href="#" class="red">Home</a></li>
            <li><a href="#" class="orange">Tutorials</a>
                <div class="subs">
                    <dl>
                        <dt>Links #1</dt>
                        <dd><a href="#">HTML / CSS</a></dd>
                        <dd><a href="#">JS / jQuery</a></dd>
                        <dd><a href="#">PHP</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #2</dt>
                        <dd><a href="#">MySQL</a></dd>
                        <dd><a href="#">XSLT</a></dd>
                        <dd><a href="#">Ajax</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #3</dt>
                        <dd><a href="#">HTML / CSS</a></dd>
                        <dd><a href="#">JS / jQuery</a></dd>
                        <dd><a href="#">PHP</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #4</dt>
                        <dd><a href="#">MySQL</a></dd>
                        <dd><a href="#">XSLT</a></dd>
                        <dd><a href="#">Ajax</a></dd>
                    </dl>
                </div>
            </li>
            <li><a href="#" class="yellow">Resources</a>
                <div class="subs">
                    <dl>
                        <dt>Links #5</dt>
                        <dd><a href="#">PHP</a></dd>
                        <dd><a href="#">MySQL</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #6</dt>
                        <dd><a href="#">XSLT</a></dd>
                        <dd><a href="#">Ajax</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #7</dt>
                        <dd><a href="#">HTML / CSS</a></dd>
                        <dd><a href="#">JS / jQuery</a></dd>
                    </dl>
                    <dl>
                        <dt>Links #8</dt>
                        <dd><a href="#">MySQL</a></dd>
                        <dd><a href="#">Ajax</a></dd>
                    </dl>
                </div>
            </li>
            <li><a href="#" class="green">Other</a></li>
            <li><a href="#" class="blue">About</a></li>
            <li><a href="#" class="violet">Back</a></li>
        </ul>
        <div class="back"></div>
        <div class="shadow"></div>
    </div>
</div>

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

 

CSS

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

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню н...

Горизонтальное многоуровневое фиксированного меню в темном стиле...

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

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

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

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

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

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

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

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

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

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

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

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

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Фиксированная контактная форма на css и JQueryФиксированная контактная форма на css и ...

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому.....

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

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

Кнопка с анимацией на css3Кнопка с анимацией на css3

Красивая анимационная кнопка на css3, при наведении курсора на кнопку, с левой стороны......

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

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

HTML шаблон ImagoHTML шаблон Imago

Современный бизнес шаблон HTML с превосходным дизайном, который представлен в 16 различных шаблонах....

Portfolio SitePortfolio Site

Оригинальный одностраничный html шаблон для сайта портфолио, шаблон создан на фоне красивых морских глубин....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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