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

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

ОБСУЖДЕНИЕ

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

Оригинальное горизонтальное меню
Просмотров: 1400  Скачан: 248 раз  Комментариев в теме: 0

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

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

 

HTML

<div class="oe_wrapper">
    <div id="oe_overlay" class="oe_overlay"></div>
    <ul id="oe_menu" class="oe_menu">
        <li><a href="">Collections</a>
            <div>
                <ul>
                    <li class="oe_heading">Summer 2011</li>
                    <li><a href="#">Milano</a></li>
                    <li><a href="#">Paris</a></li>
                    <li><a href="#">Special Events</a></li>
                    <li><a href="#">Runway Show</a></li>
                    <li><a href="#">Overview</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Winter 2010</li>
                    <li><a href="#">Milano</a></li>
                    <li><a href="#">New York</a></li>
                    <li><a href="#">Behind the scenes</a></li>
                    <li><a href="#">Interview</a></li>
                    <li><a href="#">Photos</a></li>
                    <li><a href="#">Download</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Categories</li>
                    <li><a href="#">Casual</a></li>
                    <li><a href="#">Business</a></li>
                    <li><a href="#">Underwear</a></li>
                    <li><a href="#">Nature Pure</a></li>
                    <li><a href="#">Swimwear</a></li>
                    <li><a href="#">Evening</a></li>
                </ul>
            </div>
        </li>
        <li><a href="">Projects</a>
            <div style="left:-111px;">
                <ul>
                    <li class="oe_heading">Fashion Shows</li>
                    <li><a href="#">Milano</a></li>
                    <li><a href="#">Paris</a></li>
                    <li><a href="#">Berlin</a></li>
                    <li><a href="#">New York</a></li>
                    <li><a href="#">London</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Events</li>
                    <li><a href="#">Fashion Party 2011</a></li>
                    <li><a href="#">Evening specials</a></li>
                    <li><a href="#">Fashion Day Milano</a></li>
                    <li><a href="#">Model Workshops</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Media</li>
                    <li><a href="#">Wallpapers</a></li>
                    <li><a href="#">Downloads</a></li>
                    <li><a href="#">Images</a></li>
                    <li><a href="#">Contest 2011</a></li>
                    <li><a href="#">Fashion Mania</a></li>
                    <li><a href="#">Green Earth Day</a></li>
                </ul>
            </div>
        </li>
        <li><a href="">Fragrances</a>
            <div style="left:-223px;">
                <ul class="oe_full">
                    <li class="oe_heading">Fashion Fragrances</li>
                    <li><a href="#">Dealure</a></li>
                    <li><a href="#">Violet Woman</a></li>
                    <li><a href="#">Deep Blue for Men</a></li>
                    <li><a href="#">New York, New York</a></li>
                    <li><a href="#">Illusion</a></li>
                </ul>
            </div>
        </li>
        <li><a href="">Events</a>
            <div style="left:-335px;">
                <ul>
                    <li class="oe_heading">Shows 2010</li>
                    <li><a href="#">Milano</a></li>
                    <li><a href="#">Paris</a></li>
                    <li><a href="#">Berlin</a></li>
                    <li><a href="#">New York</a></li>
                    <li><a href="#">London</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Shows 2011</li>
                    <li><a href="#">Milano</a></li>
                    <li><a href="#">Paris</a></li>
                    <li><a href="#">Berlin</a></li>
                    <li><a href="#">New York</a></li>
                    <li><a href="#">London</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Special Events</li>
                    <li><a href="#">Fashion Party 2011</a></li>
                    <li><a href="#">Fashion Countdown Party 2010</a></li>
                    <li><a href="#">Fashion Day Milano</a></li>
                    <li><a href="#">Model Workshops</a></li>
                </ul>
            </div>
        </li>
        <li><a href="">Stores</a>
            <div style="left:-447px;">
                <ul>
                    <li class="oe_heading">Europe</li>
                    <li><a href="#">Milano</a></li>
                    <li><a href="#">Paris</a></li>
                    <li><a href="#">Berlin</a></li>
                    <li><a href="#">London</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">Asia</li>
                    <li><a href="#">Hong Kong</a></li>
                    <li><a href="#">Tokio</a></li>
                    <li><a href="#">New Delhi</a></li>
                    <li><a href="#">Beijing</a></li>
                </ul>
                <ul>
                    <li class="oe_heading">United States</li>
                    <li><a href="#">New York</a></li>
                    <li><a href="#">Los Angeles</a></li>
                    <li><a href="#">Seattle</a></li>
                    <li><a href="#">Miami</a></li>
                </ul>
            </div>
        </li>
    </ul>
</div>

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

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript">
$(function() {
    var $oe_menu= $('#oe_menu');
    var $oe_menu_items= $oe_menu.children('li');
    var $oe_overlay= $('#oe_overlay');
    $oe_menu_items.bind('mouseenter',function(){
        var $this = $(this);
        $this.addClass('slided selected');
        $this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
            $oe_menu_items.not('.slided').children('div').hide();
            $this.removeClass('slided');
        });
    }).bind('mouseleave',function(){
        var $this = $(this);
        $this.removeClass('selected').children('div').css('z-index','1');
    });
    $oe_menu.bind('mouseenter',function(){
        var $this = $(this);
        $oe_overlay.stop(true,true).fadeTo(200, 0.6);
        $this.addClass('hovered');
    }).bind('mouseleave',function(){
        var $this = $(this);
        $this.removeClass('hovered');
        $oe_overlay.stop(true,true).fadeTo(200, 0);
        $oe_menu_items.children('div').hide();
    })
});
</script>
Материалы по теме:

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

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

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

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

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

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

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

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

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

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

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

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

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

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

Таблица тарифных плановТаблица тарифных планов

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

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

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

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

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

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

Социальная панель на css3Социальная панель на css3

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

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

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

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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