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

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

ОБСУЖДЕНИЕ

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

Горизонтальное мульти меню
Просмотров: 1226  Скачан: 193 раз  Комментариев в теме: 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>
Материалы по теме:

Горизонтальное меню в виде куба «Boxes Menu»Горизонтальное меню в виде куба «Bo...

Меню в виде куба с красивым эффектом трансформации....

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

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

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

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

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

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

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

Горизонтальное меню реализованное на css, подпункты открываются при наведении курсора......

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

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

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью JQuery...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

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

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

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прогресс ...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

Horse ClubHorse Club

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

Слайдер (слайд-шоу) на css и jqueryСлайдер (слайд-шоу) на css и jquery

Довольно простой слайдер с предусмотренным слайд-шоу, если вам нужно, что-то простое, без каких либо наворотов (дополнительных панелей, кнопок и т.д)...

VLDPersonals v2.7VLDPersonals v2.7

VLDPersonals - это функциональный движок с огромным количеством возможностей, который вмещает в себе социальную сеть и сайт знакомств....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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