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

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

ОБСУЖДЕНИЕ

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

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

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

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

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бум...

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

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

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

Горизонтальное меню с меняющимся фономГоризонтальное меню с меняющимся фо...

Красивое меню, с меняющимся фоном, когда вы переходите по категориям, фон автоматически......

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

Меню с выпадающими пунктами на css

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

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

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

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

DecadenceDecadence

Очень красивый универсальный шаблон Decadence на историческую тему, построенный на HTML5, в шаблоне имеется выпадающее меню......

Набор градиентных кнопок на css3Набор градиентных кнопок на css3

Неплохой набор кнопок, в нем вы найдёте кнопки разного цвета, (округлённые, прямоугольные, маленькие)....

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

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

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

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

Horse ClubHorse Club

Лёгкий html шаблон в тёмных тонах, посвящённый верховой езде и всему что с этим связано. В шаблоне имеется красивый слайдер и галерея......

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

DeTube v1.3DeTube v1.3

DeTube - отличная wordpress тема для тех кто хочет сделать видео-портал, блог или журнал видео новостей....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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