RUB
Платежи проходят через сервис ROBOKASSA
visa/mastercard
Visa / MasterCard
qiwi
qiwi
yandex
yandex
beeline
beeline
mts
mts
tele2
tele2
alfa
alfa
sber
sber
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

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

ОБСУЖДЕНИЕ

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

Горизонтальное мульти меню
Просмотров: 1086  Скачан: 184 раз  Комментариев в теме: 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Многоуровневое фиксированное меню н...

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

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

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

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

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

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

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

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

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

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

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

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Слайдер на jQuery для сайтаСлайдер на jQuery для сайта "Estro - jQu...

Красивый слайдер на jQuery для прокрутки изображения (картинки) на вашем сайте....

Web HostingWeb Hosting

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

Rotator на css и jQueryRotator на css и jQuery

Стильный Rotator для вашего сайта, ротатор довольно информативный, имеются миниатюры, слайд-шоу, при клике по......

Room 09 v1.4.0Room 09 v1.4.0

Room 09 - это довольно популярная тема для создания интернет магазинов, которая пользуется большим спросом среди разработчиков на WordPress....

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

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

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

Красивое раскрывающиеся горизонтальное меню, реализованное на css и jquery. Меню отлично подойдёт для сайта дизайнера или фотографа....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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