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

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

ОБСУЖДЕНИЕ

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

Оригинальное горизонтальное меню
Просмотров: 1567  Скачан: 260 раз  Комментариев в теме: 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Горизонтальное анимированное меню н...

Горизонтальное меню на css3 с замечательным эффектом....

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

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

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

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

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

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

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

Меню в стиле Apple, созданное полностью на css3.
Интересные публикации:

Компактный новостной Rotator на jqueryКомпактный новостной Rotator на jquery

Если вам нужно вывести новости на вашем сайте, и вы хотите что бы это было привлекательно и в тоже время компактно......

Mazaya v1.0Mazaya v1.0

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

JQuery плагин с навигацией в виде слайдераJQuery плагин с навигацией в виде слайде...

JQuery плагин «Easy Paginate» созданный для удобного оформления контента на сайте, он очень прост в установке....

Форма обратной связи на PHP, AJAX, JSФорма обратной связи на PHP, AJAX, JS

Красивая форма обратной связи для вашего сайта на php, ajax и js. Форма может похвастаться капчей, проверкой полей формы на валидность и сообщениях об...

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

KroftKroft

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

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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