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

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

ОБСУЖДЕНИЕ

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

Оригинальное горизонтальное меню
Просмотров: 1432  Скачан: 253 раз  Комментариев в теме: 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Фиксированная панель с навигацией н...

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

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

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

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

Стильное горизонтальное меню с выдвижными иконками

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

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

Многоуровневое горизонтальное меню на css3Многоуровневое горизонтальное меню ...

Отличное горизонтальное выпадающее многоуровневое меню на css3....

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

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....

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

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

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

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

Отличное горизонтальное меню с большое количество пунктов....

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

Exterior DesignExterior Design

Неплохой html шаблон с готовым набором страниц, на главной странице расположено два слайдера, имеется портфолио, контактная форма......

Mazaya v1.0Mazaya v1.0

Mazaya - это современная универсальная новостная тема с оригинальным дизайном и предусмотренным тёмным и светлым стилем....

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

Прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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