Сократить код
Есть вот такой код.
jQuery(document).ready(function($){
var isLateralNavAnimating = false;
//open/close lateral navigation
$('.cd-nav-trigger').on('click', function(event){
event.preventDefault();
//stop if nav animation is running
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;
$('body').toggleClass('navigation-is-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
});
Где при клике на cd-nav-trigger добавляется или убирается класс navigation-is-open И я вот что сделал
jQuery(document).ready(function($){
var isLateralNavAnimating = false;
//open/close lateral navigation
$('.cd-nav-trigger').on('click', function(event){
event.preventDefault();
//stop if nav animation is running
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;
$('body').toggleClass('navigation-is-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
});
jQuery(document).ready(function($){
var isLateralNavAnimating = false;
//open/close lateral navigation
$('.kontakt').on('click', function(event){
event.preventDefault();
//stop if nav animation is running
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;
$('body').toggleClass('navigation-is-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
});
так как не знаю как kontakt вписать в первую часть кода. То есть все тоже самое только мне нужно что бы два класса отвечало за эту функцию |
И я не знаю почему то когда я делаю вот так
<li class="kontakt"><a href="#kontakt">Контакты</a></li> Да все срабатывает, но не идет переход на этот якорь. Если я этот якорь убираю от этого класса все работает. |
добавьте элементу <li class="kontakt"> еще один класс "cd-nav-trigger"
document.querySelector('.kontakt').classList.add(' cd-nav-trigger') и событие $('.cd-nav-trigger').on('click', function(event)... сработает на <li class="kontakt cd-nav-trigger">
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<button class="kontakt">kontakt</button>
<button class="cd-nav-trigger">cd-nav-trigger</button>
<h3 class="text"></h3>
<script>
document.querySelector('.kontakt').classList.add('cd-nav-trigger')
$('.cd-nav-trigger').on('click', function(event){
alert(`класс "${event.target.className}"`)
})
</script>
</body>
</html>
|
od0201,
не могу добавить этот класс cd-nav-trigger |
Цитата:
|
od0201,
А не могу потому что cd-nav-trigger это класс который зафиксирует элемент в левом в верхнем углу а для kontakt мне этого не нужно |
Ну припишите этим элементом еще один класс, по которому их оба можно находить. Его даже в CSS не надо описывать. Просто имя класса.
|
Для краткости можете убрать всякие webkit, o, ms. Вы не найдете таких старых браузеров, которым это надо.
|
voraa,
не понимаю |
Цитата:
<button class="kontakt">...</button> <button class="cd-nav-trigger">...</button> Напишите <button class="kontakt xyz">...</button> <button class="cd-nav-trigger xyz">...</button> (Вместо xyz - что угодно) И потом в коде $('.xyz').on('click', function(event){ Цитата:
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ Просто $('.cd-navigation-wrapper').one('transitionend', function(){ Браузеров, которые не понимают transitionend уже не осталось. С таким же успехом тогда нужно писать код, для браузеров, которые вообще ничего не слышали про transitionend со всеми префиксами или для старого firefox, где вроде такое событие и было, но работало 1 раз из трех, и все все равно через таймер делать приходилось. |
voraa,
да все сработало. Но я не понимаю у меня есть вот такой якорь <li class="kontakt"><a href="#kontakt">Контакты</a></li>, если я его убираю в другую часть страницы все срабатывает. Какие могут быть причины? |
Цитата:
href="#kontakt" должен ссылаться на элемент с id="kontakt" |
voraa,
Да я понимаю, просто там код большой, ну я попробую сейчас |
Открыть навигация, ссылка вконтакте, должна опустится вниз.
Но не срабатывает.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
body {
overflow-x: hidden;
}
main {
height: 3000px;
}
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navigation-is-open main {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-nav-trigger {
position: fixed;
z-index: 3;
right: 5%;
top: 50px;
height: 54px;
width: 54px;
background-color: #243040;
border-radius: 50%;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.cd-nav-trigger .cd-nav-icon {
/* icon created in CSS */
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 22px;
height: 2px;
background-color: #ffffff;
}
.cd-nav-trigger .cd-nav-icon::before,
.cd-nav-trigger .cd-nav-icon:after {
/* upper and lower lines of the menu icon */
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: inherit;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s;
-moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s;
transition: transform 0.5s, width 0.5s, top 0.3s;
}
.cd-nav-trigger .cd-nav-icon::before {
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
.cd-nav-trigger .cd-nav-icon::after {
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translateY(6px);
-moz-transform: translateY(6px);
-ms-transform: translateY(6px);
-o-transform: translateY(6px);
transform: translateY(6px);
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::after {
top: 2px;
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::before {
top: -2px;
}
.cd-nav-trigger svg {
position: absolute;
top: 0;
left: 0;
}
.cd-nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #243040;
visibility: hidden;
-webkit-transition: visibility 0s 0.7s;
-moz-transition: visibility 0s 0.7s;
transition: visibility 0s 0.7s;
}
.cd-nav .cd-navigation-wrapper {
display: flex;
justify-content: space-around;
align-items: center;
/* all navigation content */
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 40px 5% 40px calc(5% + 20px);
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
-webkit-transition: -webkit-transform 0.7s;
-moz-transition: -moz-transform 0.7s;
transition: transform 0.7s;
-webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
-moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
}
.navigation-is-open .cd-nav {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.navigation-is-open .cd-nav .cd-navigation-wrapper {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
-moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
}
</style>
</head>
<body>
<main>
</main>
<footer id="kontakt">
Текст
</footer>
<a href="#cd-nav" class="cd-nav-trigger zakryt">Навигатция<span class="cd-nav-icon"></span>
<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
<circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25"
stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
</svg>
</a>
<div id="cd-nav" class="cd-nav">
<div class="cd-navigation-wrapper">
<div class="cd-half-block">
<nav>
<ul class="cd-primary-nav">
<li class="zakryt"><a href="#kontakt">Контакты</a></li>
</ul>
</nav>
</div><!-- .cd-half-block -->
</div> <!-- .cd-navigation-wrapper -->
</div> <!-- .cd-nav -->
<script>
jQuery(document).ready(function($){
var isLateralNavAnimating = false;
//open/close lateral navigation
$('.zakryt').on('click', function(event){
event.preventDefault();
//stop if nav animation is running
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;
$('body').toggleClass('navigation-is-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
});
</script>
</body>
</html>
|
Все что делает этот код, так при клике на
<a href="#cd-nav" class="cd-nav-trigger zakryt">Навигатция... и <li class="zakryt"><a href="#kontakt">Контакты</a></li> ставит или убирает у body класс navigation-is-open. Почему от этого что то должно опускаться вниз? И куда? Почему эта ссылка должна куда то опускаться? Ей что то поменяли? Класс или стиль? |
Цитата:
Что вообще означают <a href="#kontakt"> и <a href="#cd-nav" На что и зачем они ссылаются? |
voraa,
Вот это ссылка <a href="#kontakt"> должна отпустится сюда. <footer id="kontakt"> Текст </footer> То есть я при клике ожидаю что она закрывает навигацию и отпускается вниз к своему якорю. |
Цитата:
Что значит "опуститься"? Переместиться только на экране? Или элемент в DOM должен переместиться в другой узел? В любом случае сам элемент никуда опускаться не будет При клике на ссылку с href="#..." просто происходит переход на ту часть страницы, которая начинается с элемента с соответствующим id. Ну просто страница роллингуется до этого места, если этот элемент не был виден. Но у Вас и этого не будет происходить потому, что есть event.preventDefault(); Это отменяет стандартную реакцию на клик по ссылке. |
Цитата:
|
Цитата:
Цитата:
|
voraa,
Нужно что бы работало так же как и если я нажму на <a href="#kontakt_2">Спустится вниз</a> Сайт проскорлислся до <h3 id="kontakt_2">Вот сюда</h3> То есть нажать на ссылку контакты, навигацится закрылась и спустилась до якоря.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
body {
overflow-x: hidden;
}
main {
height: 3000px;
}
*,
*::after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navigation-is-open main {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
.cd-nav-trigger {
position: fixed;
z-index: 3;
right: 5%;
top: 50px;
height: 54px;
width: 54px;
background-color: #243040;
border-radius: 50%;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.cd-nav-trigger .cd-nav-icon {
/* icon created in CSS */
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 22px;
height: 2px;
background-color: #ffffff;
}
.cd-nav-trigger .cd-nav-icon::before,
.cd-nav-trigger .cd-nav-icon:after {
/* upper and lower lines of the menu icon */
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: inherit;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s;
-moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s;
transition: transform 0.5s, width 0.5s, top 0.3s;
}
.cd-nav-trigger .cd-nav-icon::before {
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
-webkit-transform: translateY(-6px);
-moz-transform: translateY(-6px);
-ms-transform: translateY(-6px);
-o-transform: translateY(-6px);
transform: translateY(-6px);
}
.cd-nav-trigger .cd-nav-icon::after {
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
-o-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: translateY(6px);
-moz-transform: translateY(6px);
-ms-transform: translateY(6px);
-o-transform: translateY(6px);
transform: translateY(6px);
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::after {
top: 2px;
}
.no-touch .cd-nav-trigger:hover .cd-nav-icon::before {
top: -2px;
}
.cd-nav-trigger svg {
position: absolute;
top: 0;
left: 0;
}
.cd-nav {
position: fixed;
z-index: 1;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #243040;
visibility: hidden;
-webkit-transition: visibility 0s 0.7s;
-moz-transition: visibility 0s 0.7s;
transition: visibility 0s 0.7s;
}
.cd-nav .cd-navigation-wrapper {
display: flex;
justify-content: space-around;
align-items: center;
/* all navigation content */
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 40px 5% 40px calc(5% + 20px);
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(50%);
-moz-transform: translateX(50%);
-ms-transform: translateX(50%);
-o-transform: translateX(50%);
transform: translateX(50%);
-webkit-transition: -webkit-transform 0.7s;
-moz-transition: -moz-transform 0.7s;
transition: transform 0.7s;
-webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
-moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
}
.navigation-is-open .cd-nav {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.navigation-is-open .cd-nav .cd-navigation-wrapper {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
-moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
}
</style>
</head>
<body>
<main>
<a href="#kontakt_2">Спустится вниз</a>
</main>
<footer id="kontakt">
<h3 id="kontakt_2">Вот сюда</h3>
Текст
</footer>
<a href="#cd-nav" class="cd-nav-trigger zakryt">Навигатция<span class="cd-nav-icon"></span>
<svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54">
<circle fill="transparent" stroke="#656e79" stroke-width="1" cx="27" cy="27" r="25"
stroke-dasharray="157 157" stroke-dashoffset="157"></circle>
</svg>
</a>
<div id="cd-nav" class="cd-nav">
<div class="cd-navigation-wrapper">
<div class="cd-half-block">
<nav>
<ul class="cd-primary-nav">
<li class="zakryt"><a href="#kontakt">Контакты</a></li>
</ul>
</nav>
</div><!-- .cd-half-block -->
</div> <!-- .cd-navigation-wrapper -->
</div> <!-- .cd-nav -->
<script>
jQuery(document).ready(function($){
var isLateralNavAnimating = false;
//open/close lateral navigation
$('.zakryt').on('click', function(event){
event.preventDefault();
//stop if nav animation is running
if( !isLateralNavAnimating ) {
if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true;
$('body').toggleClass('navigation-is-open');
$('.cd-navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
//animation is over
isLateralNavAnimating = false;
});
}
});
});
</script>
</body>
</html>
|
Все разобрался
|
| Часовой пояс GMT +3, время: 20:22. |