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

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

ОБСУЖДЕНИЕ

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

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

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

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

Полноэкранное меню на css и JQueryПолноэкранное меню на css и JQuery

Полно-экранное меню на css и Jquery с меняющимся фоном....

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

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

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

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

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu...

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

XMarket v1.1XMarket v1.1

XMarket - это премиум шаблон интернет магазина для любого вида продукции, один из самых мощных и гибких на сегодняшний день....

MinimoSity v1.1MinimoSity v1.1

Minimosity - стильная тема для wordpress, отлично подойдёт для сайта новостной и журнальной тематики....

Room 09 v1.4.0Room 09 v1.4.0

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

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

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

EbuyEbuy

Ebuy - это шаблон интернет магазина, который полюбился многим за свою простоту в использовании и надёжность....

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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