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

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

ОБСУЖДЕНИЕ

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

Горизонтальное прокручивающиеся меню «Scrollable Menu»
Просмотров: 2112  Скачан: 330 раз  Комментариев в теме: 0

Scrollable Menu, горизонтальное прокручивающиеся меню в виде картинок, меню фиксируется внизу страницы, при наведении курсора мыши на раздел, выпадает подменю в виде картинок, которое прокручивается вверх, вниз.

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

 

HTML

<ul class="menu" id="menu">
    <li>
        <a href="#">Brand 1</a>
        <div class="sc_menu_wrapper">
            <div class="sc_menu">
                <a href="#"><img src="images/1.jpg" alt=""/></a>
                <a href="#"><img src="images/2.jpg" alt=""/></a>
                <a href="#"><img src="images/3.jpg" alt=""/></a>
                <a href="#"><img src="images/1.jpg" alt=""/></a>
                <a href="#"><img src="images/2.jpg" alt=""/></a>
                <a href="#"><img src="images/3.jpg" alt=""/></a>
                <a href="#"><img src="images/1.jpg" alt=""/></a>
                <a href="#"><img src="images/2.jpg" alt=""/></a>
            </div>
        </div>
    </li>
    <li>
        <a href="#">Brand 2</a>
        <div class="sc_menu_wrapper">
            <div class="sc_menu">
                <a href="#"><img src="images/4.jpg" alt=""/></a>
                <a href="#"><img src="images/5.jpg" alt=""/></a>
                <a href="#"><img src="images/6.jpg" alt=""/></a>
                <a href="#"><img src="images/1.jpg" alt=""/></a>
                <a href="#"><img src="images/2.jpg" alt=""/></a>
                <a href="#"><img src="images/1.jpg" alt=""/></a>
                <a href="#"><img src="images/6.jpg" alt=""/></a>
            </div>
        </div>
    </li>
    <li>
        <a href="#">Fashion 1</a>
        <div class="sc_menu_wrapper">
            <div class="sc_menu">
                <a href="#"><img src="images/7.jpg" alt=""/></a>
                <a href="#"><img src="images/8.jpg" alt=""/></a>
                <a href="#"><img src="images/9.jpg" alt=""/></a>
                <a href="#"><img src="images/10.jpg" alt=""/></a>
                <a href="#"><img src="images/7.jpg" alt=""/></a>
                <a href="#"><img src="images/8.jpg" alt=""/></a>
                <a href="#"><img src="images/9.jpg" alt=""/></a>
                <a href="#"><img src="images/10.jpg" alt=""/></a>
                <a href="#"><img src="images/7.jpg" alt=""/></a>
                <a href="#"><img src="images/8.jpg" alt=""/></a>
                <a href="#"><img src="images/9.jpg" alt=""/></a>
                <a href="#"><img src="images/10.jpg" alt=""/></a>
            </div>
        </div>
    </li>
    <li>
        <a href="#">Fashion 2</a>
        <div class="sc_menu_wrapper">
            <div class="sc_menu">
                <a href="#"><img src="images/4.jpg" alt=""/></a>
                <a href="#"><img src="images/5.jpg" alt=""/></a>
                <a href="#"><img src="images/6.jpg" alt=""/></a>
                <a href="#"><img src="images/1.jpg" alt=""/></a>
                <a href="#"><img src="images/2.jpg" alt=""/></a>
                <a href="#"><img src="images/3.jpg" alt=""/></a>
                <a href="#"><img src="images/1.jpg" alt=""/></a>
                <a href="#"><img src="images/2.jpg" alt=""/></a>
            </div>
        </div>
    </li>
    <li class="last">
        <a href="#">Fashion 3</a>
        <div class="sc_menu_wrapper">
            <div class="sc_menu">
                <a href="#"><img src="images/4.jpg" alt=""/></a>
                <a href="#"><img src="images/5.jpg" alt=""/></a>
                <a href="#"><img src="images/6.jpg" alt=""/></a>
                <a href="#"><img src="images/1.jpg" alt=""/></a>
                <a href="#"><img src="images/2.jpg" alt=""/></a>
                <a href="#"><img src="images/3.jpg" alt=""/></a>
                <a href="#"><img src="images/4.jpg" alt=""/></a>
                <a href="#"><img src="images/5.jpg" alt=""/></a>
                <a href="#"><img src="images/6.jpg" alt=""/></a>
            </div>
        </div>
    </li>
</ul>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-2.0.1.js"></script>
<script type="text/javascript">
$(function(){
    function buildThumbs($elem){
        var $wrapper    = $elem.next();
        var $menu = $wrapper.find('.sc_menu');
        var inactiveMargin = 150;
        $wrapper.scrollTop($menu.outerHeight());
        $wrapper.bind('mousemove',function(e){
            var wrapperHeight = $wrapper.height();
            var menuHeight = $menu.outerHeight() + 2 * inactiveMargin;
            var top = (e.pageY - $wrapper.offset().top) * (menuHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
            $wrapper.scrollTop(top+10);
        });
    }                
    var stacktime;
    $('#menu li > a').bind('mouseover',function () {
        var $this = $(this);
        buildThumbs($this);
        var pos=$this.next().find('a').size();
        var f=function(){
            if(pos==0) clearTimeout(stacktime);
            $this.next().find('a:nth-child('+pos+')').css('visibility','visible');
            --pos;
        };
        stacktime = setInterval(f , 50);
    });
    $('#menu li').bind('mouseleave',function () {
        var $this = $(this);
        clearTimeout(stacktime);
        $this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden');
        $this.find('.sc_menu_wrapper').css('visibility','hidden');
    });
    $('.sc_menu a').hover(
        function () {
            var $this = $(this);
            $this.find('img')
            .stop()
            .animate({'opacity':'1.0'},400);
        },
        function () {
            var $this = $(this);
            $this.find('img')
            .stop()
            .animate({'opacity':'0.3'},400);
        }
    );
});
</script>
Материалы по теме:

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню н...

Горизонтальное меню на css3 с замечательным эффектом....

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

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

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

Меню с красивым эффектом, суть в том, когда вы перемешаете курсор мыши по навигации, ползунок будет плавно......

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

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

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

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

Оригинальное меню в виде клочка бумагиОригинальное меню в виде клочка бум...

Меню в оригинальном стиле, в виде потёртого клочка бумаги....

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

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

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Прокручивающиеся картинкиПрокручивающиеся картинки

Если вы ищите способ как плавно прокрутить картинку, или что-то в этом роде, воспользуйтесь представленным способом....

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

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

Кнопка с подтекстом на css3Кнопка с подтекстом на css3

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

Portfolio SitePortfolio Site

Оригинальный одностраничный html шаблон для сайта портфолио, шаблон создан на фоне красивых морских глубин....

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

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

Сборка кнопок #3 на css3Сборка кнопок #3 на css3

Отличная сборка кнопок №3 на css3, в сборку вошли (раскрывающиеся кнопки, градиентные кнопки, круглые кнопки, анимационные)....
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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