Форма входа

    Бесплатный раздел

    Вы здесь: Главная страница » Файлы » Переключатели / Навигация
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

    Уважаемые пользователи!
    Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
    Подобные просьбы и вопросы - будут игнорироваться!

    Фиксированное вертикальное меню для сайта ucoz

    Дата добавления: 03.06.2015 - 03:56
    Добавил: Buger
    Количество просмотров: 4.5k
    Количество комментариев: 1
    Рейтинг материала: 4.2 / 5
    Фиксированное вертикальное меню для сайта ucoz
    БЕСПЛАТНО
    рейтинг 4.2
    /
    голосов 5
    Фиксированная навигация весьма удобная вещь на сайте, где много информации и посетителю необходимо быстро ориентироваться на сайте, при этом с возможностью быстрого перемещения. В данном уроке мы рассмотрим именно такое меню, по умолчанию меню находится внизу страницы, но при прокрутке страницы навигация трансформируется, превращаясь в верхнюю панель навигации, нажатием на пункты меню, вы будете легко перемещаться к нужной информации, при этом будет все это обрабатываться плавной анимацией.

    Фиксированная навигация будет реализована с помощью jQuery powered scroll. Ничего особенного здесь нет, но это удобный фрагмент для создания данной навигации, чтобы быстро путешествовать по содержимому страницы. Мы часто встречаем подобный эффект на сайтах, по этому такой пример будет полезный разработчикам, которые планируют его реализовать.

    Шаг 1. HTML
    Мы создали раздел section#cd-intro , чтобы обернуть наше фоновое изображение, а также название и кнопку в центре. Так как у нас будет навигация которая трансформируется во вторичное меню, то нам необходим неупорядоченный список, который вставляется в .cd-secondary-nav элемент. Все оставшееся содержимое было помещено в .cd-main-content элемент.

    Код
    <section id="cd-intro">
    <div id="cd-intro-tagline">
    <a href="#0" class="cd-btn"></a>
    </div>
    </section>

    <div class="cd-secondary-nav">
    <a href="#0" class="cd-secondary-nav-trigger">Меню<span></span></a>
    <nav>
    <ul>
    <li>
    <a href="#cd-placeholder-1">
    <b>Сервис</b>
    <span></span><!-- icon -->
    </a>
    </li>
    </ul>
    </nav>
    </div>
    <main class="cd-main-content">
    <section id="cd-placeholder-1" class="cd-section cd-container">
    </section>
    <section id="cd-placeholder-2" class="cd-section cd-container">
    </section>
    </main>


    Шаг 2. CSS
    У нас будет адаптивное меню, это позволит добиться лучшего отображения на различном разрешении. Когда пользователь прокручивает больше значения высоты, чем указано в разделе section#cd-intro, мы присваиваем .is-fixed класс в .cd-secondary-nav, изменяя его положение с относительного значения на фиксированное:
    Код
    .cd-secondary-nav ul {
    position: fixed;
    right: 5%;
    bottom: 20px;
    visibility: hidden;
    transform: scale(0);
    transform-origin: 100% 100%;
    transition: transform 0.3s, visibility 0s 0.3s;
    }
    .cd-secondary-nav ul.is-visible {
    visibility: visible;
    transform: scale(1);
    transition: transform 0.3s, visibility 0s 0s;
    }

    @media only screen and (min-width: 1170px) {
    .cd-secondary-nav ul {
    position: static;
    width: auto;
    max-width: 100%;
    visibility: visible;
    transform: scale(1);
    }
    }

    .cd-secondary-nav-trigger {
    position: fixed;
    bottom: 20px;
    right: 5%;
    width: 44px;
    height: 44px;
    }
    @media only screen and (min-width: 1170px) {
    .cd-secondary-nav-trigger {
    display: none;
    }
    }


    Шаг 3. JS
    Код
    var secondaryNav = $('.cd-secondary-nav'),
    secondaryNavTopPosition = secondaryNav.offset().top;
    $(window).on('scroll', function(){
    if($(window).scrollTop() > secondaryNavTopPosition ) {
    secondaryNav.addClass('is-fixed');
    setTimeout(function() {
    secondaryNav.addClass('animate-children');
    $('#cd-logo').addClass('slide-in');
    $('.cd-btn').addClass('slide-in');
    }, 50);
    } else {
    secondaryNav.removeClass('is-fixed');
    setTimeout(function() {
    secondaryNav.removeClass('animate-children');
    $('#cd-logo').removeClass('slide-in');
    $('.cd-btn').removeClass('slide-in');
    }, 50);
    }
    });

    Вот и все. Готово!
    tvkanali
    ничего не работает
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: