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

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

ОБСУЖДЕНИЕ

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

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

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

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

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

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

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

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Me...

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......

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

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

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

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

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

Выпадающее мульти меню, как вариант вывода безграничного количества пунктов....
Интересные публикации:

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

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

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

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

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

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

Hope CenterHope Center

Универсальный шаблон Hope Center на HTML5, был разработан для благотворительного сайта, в шаблоне используется красивый слайдер......

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

Меню с прокруткой, реализованое с помощью jquery, главная особенность такого меню......

Форма регистрации html с валидациейФорма регистрации html с валидацией

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

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

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

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


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