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

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

ОБСУЖДЕНИЕ

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

Горизонтальное мульти меню
Просмотров: 1043  Скачан: 180 раз  Комментариев в теме: 0

Горизонтальное выпадающее мульти меню, как вариант вывода безграничного количества пунктов, если на вашем сайте есть выпадающее меню, то в скором времени оно как правило разрастается вместе с сайтом, и в один момент наступает такая ситуация когда подпункты меню уходят за край браузера, простыми словами пользователь не видит всех подпунктов, да конечно он может прокрутить колесиком мыши страницу и увидеть ушедшие за край браузера пункты, как по мне это не очень то и удобно, но вдруг у пользователя нету на мышке колесика (или ещё какая напасть случиться), то в этом случае, увидеть пользователю ушедшие за край браузера подпункты, практически невозможно. Именно в такой ситуации представленное меню и будет полезно. Пусть вас не пугает не совсем стильный вид меню, это дело каждого и без труда исправляется в css как вам угодно.

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

 

HTML

<div class="page">      
    <ul class="dropdown">
        <li><a href="#">меню 1</a>
            <ul class="sub_menu">
                <li><a href="#">Artificial Turf</a></li>
                <li><a href="#">Benches Bleachers</a></li>
                <li><a href="#">Communication Devices</a></li>
                <li><a href="#">Dugouts</a></li>
                <li><a href="#">Fencing Windscreen</a></li>
                <li><a href="#">Floor Protectors</a></li>
                <li><a href="#">Foul Poles</a></li>
                <li><a href="#">Netting</a></li>
                <li><a href="#">Outdoor Furniture  Storage</a></li>
                <li><a href="#">Outdoor Signs</a></li>
                <li><a href="#">Padding</a></li>
                <li><a href="#">Scoreboards</a></li>
                <li><a href="#">Shade Structures</a></li>
                <li><a href="#">Artificial Turf</a></li>
                <li><a href="#">Benches Bleachers</a></li>
                <li><a href="#">Communication Devices</a></li>
                <li><a href="#">Dugouts</a></li>
                <li><a href="#">Fencing Windscreen</a></li>
                <li><a href="#">Floor Protectors</a></li>
                <li><a href="#">Foul Poles</a></li>
                <li><a href="#">Netting</a></li>
                <li><a href="#">Outdoor Furniture Storage</a></li>
                <li><a href="#">Outdoor Signs</a></li>
                <li><a href="#">Padding</a></li>
                <li><a href="#">Scoreboards</a></li>
                <li><a href="#">Shade Structures</a></li>
                <li><a href="#">Artificial Turf</a></li>
                <li><a href="#">Benches Bleachers</a></li>
                <li><a href="#">Communication Devices</a></li>
                <li><a href="#">Dugouts</a></li>
                <li><a href="#">Fencing Windscreen</a></li>
                <li><a href="#">Floor Protectors</a></li>
                <li><a href="#">Foul Poles</a></li>
                <li><a href="#">Netting</a></li>
                <li><a href="#">Outdoor Furniture Storage</a></li>
                <li><a href="#">Outdoor Signs</a></li>
                <li><a href="#">Padding</a></li>
                <li><a href="#">Scoreboards</a></li>
                <li><a href="#">Shade Structures</a></li>
            </ul>
        </li>
        <li><a href="#">меню 2</a>
            <ul class="sub_menu">
                <li><a href="#">Artificial Turf</a></li>
                <li><a href="#">Benches & Bleachers</a></li>
                <li><a href="#">Communication Devices</a></li>
                <li><a href="#">Dugouts</a></li>
                <li><a href="#">Fencing & Windscreen</a></li>
                <li><a href="#">Floor Protectors</a></li>
                <li><a href="#">Foul Poles</a></li>
                <li><a href="#">Netting</a></li>
                <li><a href="#">Outdoor Furniture & Storage</a></li>
                <li><a href="#">Outdoor Signs</a></li>
                <li><a href="#">Padding</a></li>
                <li><a href="#">Scoreboards</a></li>
            </ul>
        </li>
        <li><a href="#">меню 3</a>
            <ul class="sub_menu">
                <li><a href="#">Artificial Turf</a></li>
                <li><a href="#">Benches & Bleachers</a></li>
                <li><a href="#">Communication Devices</a></li>
                <li><a href="#">Dugouts</a></li>
                <li><a href="#">Fencing & Windscreen</a></li>
            </ul>
        </li>
            <li><a href="#">Нет меню</a>
        </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-1.4.4.min.js"></script>
<script type="text/javascript">
var maxHeight = 400;
$(function(){
    $(".dropdown > li").hover(function() {    
         var $container = $(this),
             $list = $container.find("ul"),
             $anchor = $container.find("a"),
             height = $list.height() * 1.1,       // Снизу должно быть достаточно места
             multiplier = height / maxHeight;     // Для ускорения перемещения, если список очень длинный        
        // Сохраняем оригинальное значение высоты контейнера, чтобы восстановить его 
        $container.data("origHeight", $container.height());       
        $anchor.addClass("hover");        
        // Выпадающее меню появляется точно под соответствующим пунктом родительского списка
        $list
            .show()
            .css({
                paddingTop: $container.data("origHeight")
            });        
        // Не делаем никаких анимаций, если список короче максимального значения
        if (multiplier > 1) {
            $container
                .css({
                    height: maxHeight,
                    overflow: "hidden"
                })
                .mousemove(function(e) {
                    var offset = $container.offset();
                    var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                    if (relativeY > $container.data("origHeight")) {
                        $list.css("top", -relativeY + $container.data("origHeight"));
                    };
                });
        }        
    }, function() {   
        var $el = $(this);        
        // Устанавливаем оригинальные настройки
        $el
            .height($(this).data("origHeight"))
            .find("ul")
            .css({ top: 0 })
            .hide()
            .end()
            .find("a")
            .removeClass("hover");    
    });   
    // Добавляем стрелку вниз только к пунктам с подпунктами
    $(".dropdown > li:has('ul')").each(function() {
        $(this).find("a:first").append("<img src='images/down-arrow.png' />");
    });   
});
</script>
Материалы по теме:

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

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

Выпадающее меню на css3Выпадающее меню на css3

Красивое выпадающее меню с применением иконического шрифта, меню полностью на css3......

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

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

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

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

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

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

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

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

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

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

Галерея на jQueryГалерея на jQuery

В галерее используется потрясающий эффект раскрытия картинки, когда вы нажимаете на картинку, она как бы собирается по......

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

MCUBE SolutionsMCUBE Solutions

HTML шаблон MCUBE Solutions хорошо подойдёт для сайта в сфере бизнеса, в шаблоне используется flash слайдер, который......

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

Новостная карусель на css и JQureyНовостная карусель на css и JQurey

Стильная новостная карусель на css и JQurey, отлично подойдут для вывода последних новостей на сайте, карусель имеет два стиля (темный и светлый)....

Слайдер карусель с миниатюрами «Infinite Carousel 3.0.3»Слайдер карусель с миниатюрами «Infinite...

Слайдер с миниатюрами, а если быть точнее, то это плагин «Infinite Carousel» который позволяет демонстрировать любое количество изображений и видео в ...

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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