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

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

ОБСУЖДЕНИЕ

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

Горизонтальное прокручивающиеся меню «Scrollable Menu»
Просмотров: 1518  Скачан: 277 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

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

Многоуровневое фиксированное меню на cssМногоуровневое фиксированное меню н...

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

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

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

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

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

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

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

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

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

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

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

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

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

Lotus Flower v1.2Lotus Flower v1.2

Lotus Flower - это современный универсальный шаблон для WordPress с адаптивной вёрсткой и большим функционалом....

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

DecadenceDecadence

Очень красивый универсальный шаблон Decadence на историческую тему, построенный на HTML5, в шаблоне имеется выпадающее меню......

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

Design StudioDesign Studio

Современный html шаблон с готовым набором страниц, на главной странице расположен стильный слайдер с комментариями к изображению......
  • Текущий 1.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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