1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Закрытие меню

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем DISASTER, 3 фев 2018.

  1. DISASTER

    DISASTER

    Регистрация:
    3 фев 2018
    Сообщения:
    11
    Симпатии:
    0
    Доброго времени суток, дорогие эксперты не могли бы вы кое что подсказать ? Как сделать возврат меню на сайте. При нажатии допустим фотогалерея что бы меню закрывалось и перелистывало до блока. test.appleres.ru/test/
     
  2. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    В меню жс в конец функции инит добавь клик на контейнер врапера.
     
  3. DISASTER

    DISASTER

    Регистрация:
    3 фев 2018
    Сообщения:
    11
    Симпатии:
    0
    Можете для чайников объяснить по подробнее ?
     
  4. DISASTER

    DISASTER

    Регистрация:
    3 фев 2018
    Сообщения:
    11
    Симпатии:
    0
    Помогите кто нибудь, как это сделать ?:Help:
     
  5. DISASTER

    DISASTER

    Регистрация:
    3 фев 2018
    Сообщения:
    11
    Симпатии:
    0
    На форуме есть команда кодеров "проверенные" или что то типо того ?
     
  6. DISASTER

    DISASTER

    Регистрация:
    3 фев 2018
    Сообщения:
    11
    Симпатии:
    0
    Может это бесполезно сюда писать, но я попытаю удачу. Закрытие меню сделано.
    Теперь проблема такая: не правильная анимация закрытия идет. Работает правильно если убрать "classie.remove( perspectivewrapper1, 'modalview' );" но тогда сайт не листается.


    Код:
    var vertical = document.querySelectorAll('.outer-nav a');
            
            
            for (var i = 0; i < vertical.length; i++) {
                
            vertical[i].addEventListener(clickevent, function( ev ) {
            if( classie.has( perspectivewrapper1, 'animate') ) {           
                ev.stopPropagation();
                ev.preventDefault();
                contentwrapper1.style.top = '0px';
                document.body.scrollTop = document.documentElement.scrollTop = docscroll;
                classie.remove( perspectivewrapper1, 'modalview' );
                classie.remove( perspectivewrapper1, 'animate' );
                var linker = this;
                setTimeout( function() { document.location.href = linker.href; }, 25 );
            }
            });
            }
     
  7. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    А какая должна быть правильная?
     
  8. DISASTER

    DISASTER

    Регистрация:
    3 фев 2018
    Сообщения:
    11
    Симпатии:
    0
    Откройте меню и нажмите не на пункт а на сайт, вот такая должна быть анимация
     
  9. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    В таком случае вы неправильно формулируете проблему. Там дело не в анимации, а в неправильном алгоритме.
    Надо разбить процесс перехода на 2 этапа. То есть, после клика на пункт меню сначала срабатывает событие возврата основного контента в нормальную плоскость, а затем происходит переход к выбранному в меню блоку.

    У вас, кстати, сейчас на ссылки в меню навешены сразу два обработчика: один отвечает за скролл к нужному блоку, а второй - тот, который вы выше выложили. Обработчик должен быть один.
     
  10. DISASTER

    DISASTER

    Регистрация:
    3 фев 2018
    Сообщения:
    11
    Симпатии:
    0
    Да хоть 10 их будет главное что бы работало, не чего нового или полезного я не услышал.
    Если есть желание помочь, помогите с кодом, а дискутировать по этому поводу как что сделано не хочется, как нашел сделать так и сделал, других вариантов не было, на форумах все молчат.
     
  11. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    С таким же успехом вы могли бы сказать, что "какая разница кирпичи класть на цемент или на дерьмо?".
    Если вы не понимаете, что нельзя вешать несколько обработчиков клика на один элемент, потому что они будут конфликтовать, то вам бессмысленно что-то подсказывать!

    Это не дискуссия, а именно помощь. Если вы этого не понимаете, то помогать вам бессмысленно.
     
  12. DISASTER

    DISASTER

    Регистрация:
    3 фев 2018
    Сообщения:
    11
    Симпатии:
    0
    Dotrox, Ну если я не прав, объясните как сделать правильно и почему нельзя ?
    пример конечно странный "какая разница кирпичи класть на цемент или на дерьмо?" если действительно так, то это большая проблема.
     
  13. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Я же написал почему нельзя:
    Разжую ещё подробней: у вас есть ссылка и два обработчика клика по ней. Как вы гарантируете, что первым сработает именно тот обработчик, который вы хотите, чтоб сработал первым? И что более важно: как вы гарантируете, что анимация, которую вызывает второй обработчик выполнится только после анимации первого, а не параллельно с ней?
    setTimeout не предлагайте, он сделает всё ещё хуже, ибо работает асинхронно.

    У вас должен быть один обработчик, который получив событие клика сначала запустит анимацию возврата контента в нормальную плоскость, а после получения события завершения этой анимации запустит уже скролл до выбранного блока.

    Для отслеживания завершения анимации используйте событие transitionend. Вот есть пример: https://jsfiddle.net/5FnwY/38/
     
    $iD нравится это.
  14. DISASTER

    DISASTER

    Регистрация:
    3 фев 2018
    Сообщения:
    11
    Симпатии:
    0
    Вообще не могу понять как это сделать
     
  15. DISASTER

    DISASTER

    Регистрация:
    3 фев 2018
    Сообщения:
    11
    Симпатии:
    0
    Если кто то сможет поправить ситуацию за деньги, пишите.