Интернет магазин шабонов
Форма входа

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

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

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

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

Фиксированная навигация будет реализована с помощью 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
01.12.2016 - 22:13
ничего не работает
Добавлять комментарии могут только зарегистрированные пользователи.