Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 30.10.2021, 11:25
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

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>
Ответить с цитированием
  #22 (permalink)  
Старый 31.10.2021, 09:12
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 651

Все разобрался
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создать код CSS+HTML JamesMorgan Общие вопросы Javascript 2 11.08.2015 13:50
Код ответа сервера и обновление iframe alexdemi911 Общие вопросы Javascript 6 10.08.2015 23:30
Помогите к js коду, написать html код Modrih Элементы интерфейса 8 16.06.2015 19:08
Требуется выводить код рекламного блока Adsense из файла JavaScript??? speedflow Элементы интерфейса 0 26.05.2012 15:50
Получить код js-скрипта, находящегося в файле на сервере RomanA Общие вопросы Javascript 4 04.04.2012 09:53