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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

Горизонтальное меню с выдвигающимися иконкамиГоризонтальное меню с выдвигающимис...

Неплохое горизонтальное меню с выдвигающимися иконками. Когда вы переходите по навигации, иконки......

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

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

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

Горизонтальное прокручивающиеся меню «Scrollable Menu»Горизонтальное прокручивающиеся мен...

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......

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

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

Фиксированная форма обратной связи «Contactable 1.5»Фиксированная форма обратной связи «Cont...

Стильная форма обратной связи, а если быть точнее то это jquery плагин Contactable v1.5, который работает на AJAX и имеет встроенную проверку полей на...

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

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Скроллер картинокСкроллер картинок

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

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

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

Design StudioDesign Studio

Современный html шаблон с готовым набором страниц, на главной странице расположен стильный слайдер с комментариями к изображению......

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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