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

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

ОБСУЖДЕНИЕ

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

Оригинальное горизонтальное меню
Просмотров: 1520  Скачан: 257 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

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

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

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

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

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

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

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

Стильное горизонтальное меню с выдвижными иконками
Интересные публикации:

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

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

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....

Web StoreWeb Store

Шаблон интернет магазина Web Store, в шаблоне имеется готовое решение для корзины, детального просмотра товара и каталога,...

Шаблон Desire Night ClubШаблон Desire Night Club

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

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

Обратная связь на PHP и JQuery «LightForm»Обратная связь на PHP и JQuery «LightFor...

Стильная обратная связь ( LightForm) на PHP, Ajax и JQuery. Форма использует FormCheck2 для проверки полей , NiceForms для стилей текстовых полей и.....

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

Стильное горизонтальное меню с ползунком, который следует за курсором мыши....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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