Форум

Сергей Ракипов · #11 (**permalink**) 29.10.2021, 14:21

voraa,
да все сработало. Но я не понимаю у меня есть вот такой якорь <li class="kontakt"><a href="#kontakt">Контакты</a></li>, если я его убираю в другую часть страницы все срабатывает.
Какие могут быть причины?

voraa · #12 (**permalink**) 29.10.2021, 14:51

Сообщение от Сергей Ракипов

Какие могут быть причины?

Мы тут не экстрасенсы. Не видя всей страницы, откуда и куда убираете, ничего нельзя сказать.
href="#kontakt" должен ссылаться на элемент с id="kontakt"

Сергей Ракипов · #13 (**permalink**) 29.10.2021, 16:37

voraa,
Да я понимаю, просто там код большой, ну я попробую сейчас

Сергей Ракипов · #14 (**permalink**) 29.10.2021, 16:58

Открыть навигация, ссылка вконтакте, должна опустится вниз.
Но не срабатывает.

<!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>

voraa · #15 (**permalink**) 29.10.2021, 20:52

Все что делает этот код, так при клике на
<a href="#cd-nav" class="cd-nav-trigger zakryt">Навигатция...
и
<li class="zakryt"><a href="#kontakt">Контакты</a></li>

ставит или убирает у body класс navigation-is-open.

Почему от этого что то должно опускаться вниз? И куда?
Почему эта ссылка должна куда то опускаться? Ей что то поменяли? Класс или стиль?

voraa · #16 (**permalink**) 29.10.2021, 20:58

Сообщение от Сергей Ракипов

если я его убираю в другую часть страницы все срабатывает.

Что срабатывает?

Что вообще означают <a href="#kontakt"> и <a href="#cd-nav"
На что и зачем они ссылаются?

Сергей Ракипов · #17 (**permalink**) 30.10.2021, 08:50

voraa,

Вот это ссылка <a href="#kontakt"> должна отпустится сюда.

<footer id="kontakt">
Текст
</footer>

То есть я при клике ожидаю что она закрывает навигацию и отпускается вниз к своему якорю.

voraa · #18 (**permalink**) 30.10.2021, 09:34

Сообщение от Сергей Ракипов

То есть я при клике ожидаю что она закрывает навигацию и отпускается вниз к своему якорю.

И что ее должно заставить это делать?
Что значит "опуститься"?
Переместиться только на экране? Или элемент в DOM должен переместиться в другой узел?
В любом случае сам элемент никуда опускаться не будет
При клике на ссылку с href="#..." просто происходит переход на ту часть страницы, которая начинается с элемента с соответствующим id. Ну просто страница роллингуется до этого места, если этот элемент не был виден. Но у Вас и этого не будет происходить потому, что есть
event.preventDefault();
Это отменяет стандартную реакцию на клик по ссылке.

Сергей Ракипов · #19 (**permalink**) 30.10.2021, 09:38

Сообщение от voraa

И что ее должно заставить это делать?
Но у Вас и этого не будет происходить потому, что есть
event.preventDefault();
Это отменяет стандартную реакцию на клик по ссылке.

Вот этого я не знал, а что можно сделать?

voraa · #20 (**permalink**) 30.10.2021, 09:46

Сообщение от Сергей Ракипов

а что можно сделать?

Для начала понять, что НУЖНО?

Сообщение от voraa

Что значит "опуститься"?
Переместиться только на экране? Или элемент в DOM должен переместиться в другой узел?

По любому, если у разных элементов разная реакция на клик, разные действия, то не надо для них писать ОДНУ функцию обработки. Т.е то, с чего вы начали.

Форум

Справочник

Discord чат

Курсы javascript