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

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

ОБСУЖДЕНИЕ

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

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

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

Красивое горизонтальное меню, используется изображения и анимация текста....

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

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

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

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

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

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

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

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

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

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

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

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilyslider...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

Black and WhiteBlack and White

Black and White - современная премиум тема для wordpress в стиле минимализм и мощным функционалом....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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