Как правильно сделать мобильную версию?

Ссылка скопирована
JavaScript Браузеры Веб-разработка
2 ответов

Здравствуйте, Проблема с меню возникла, гуглил кучу вариантов только ломаю скрипт.
Есть сайт, есть мобильная версия. На меню мобильной версии при переходе по ссылке(ведущей на анкор), мобильная версия не закрывается. Только на блок открытия закрытия мобильного меню.

Просьба помочь разобраться.

<header class="header header--home">   <div class="header__wrapper">     <a href="/" class="header__logo">       <img loading="lazy" src="/assets/img/svg/logo.png">            </a>      <div class="header__content">       <nav class="header__nav">      <ul class="header__nav-list">      <li class="header__nav-item"><a class="header__nav-link" href="#neispravnost">Неисправности</a></li>     <li class="header__nav-item"><a class="header__nav-link" href="#usloviarabot">Условия работы</a></li>     <li class="header__nav-item"><a class="header__nav-link" href="#stepworks">Этапы</a></li>   </ul>                 </nav>       <div class="header__info">     <a class="header__tel" href="tel:+799999999">+79999999999</a>     <a class="home-first__link btn is-phone" data-remodal-target="secondModal" data-title1="Заявка" data-title2="с кнопки меню">Позвоните мне</a> </div>     </div>     <span class="header__menu-open" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="true" aria-label="Toggle navigation"> <span></span> </span>    </div>  </header>

<header class="header header--home"> <div class="header__wrapper"> <a href="/" class="header__logo"> <img loading="lazy" src="/assets/img/svg/logo.png"> </a> <div class="header__content"> <nav class="header__nav"> <ul class="header__nav-list"> <li class="header__nav-item"><a class="header__nav-link" href="#neispravnost">Неисправности</a></li> <li class="header__nav-item"><a class="header__nav-link" href="#usloviarabot">Условия работы</a></li> <li class="header__nav-item"><a class="header__nav-link" href="#stepworks">Этапы</a></li> </ul> </nav> <div class="header__info"> <a class="header__tel" href="tel:+799999999">+79999999999</a> <a class="home-first__link btn is-phone" data-remodal-target="secondModal" data-title1="Заявка" data-title2="с кнопки меню">Позвоните мне</a> </div> </div> <span class="header__menu-open" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="true" aria-label="Toggle navigation"> <span></span> </span> </div> </header>

скрипт

btnMenu = document.querySelector('.header__menu-open');             var menu = document.querySelector('.header__content');             var body = document.querySelector('body');              var clickHandler = function clickHandler() {               menu.classList.toggle('active');               btnMenu.classList.toggle('active');               body.classList.toggle('scroll-lock');               };               body.addEventListener('click', clickHandler);

btnMenu = document.querySelector('.header__menu-open'); var menu = document.querySelector('.header__content'); var body = document.querySelector('body'); var clickHandler = function clickHandler() { menu.classList.toggle('active'); btnMenu.classList.toggle('active'); body.classList.toggle('scroll-lock'); }; body.addEventListener('click', clickHandler);

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

Дополнительно:

мобильная версия не закрывается.

Эээ... что не закрывается? Что за мобильная версия?

  • Мобильная версия меню, не закрывается при клике на ссылку анкор. Только на предусмотренный блок открытия закрытия работает.
  • DmitriyLeo, а можно полный код оформить в codepen или других подобных песочницах.
    чтобы я мог лично посмотреть на проблему.

    И что за ссылка анкор?
    Назовите конкретный класс данной ссылки.

  • DmitriyLeo, ссылкам можно убрать действие по умолчанию https://developer.mozilla.org/en-US/docs/Web/API/E... и потом сотворить функцию с двумя действиями: закрыть меню и перейти по ссылке.
  • User 4550, Добрый день. https://codepen.io/leonovnn/pen/JjZMNNr Буду благодарен за помощь) Единственное не забыть экран под разрешение шириной 500-800 чтобы было. Через панель разработчика можно адаптировать под какое либо устройство мобильное.
  • ThunderCat, Добрый день. https://codepen.io/leonovnn/pen/JjZMNNr - вот здесь можно посмотреть
  • Ankhena, нельзя ссылкам убирать действия. нужно какой-то обработчик клика по ссылкам в определенном блоке, чтобы он закрывал блок как и клик по бургеру(крестику). В коде выставлял 
    btnMenu = document.querySelector('.header__menu-open');             var menu = document.querySelector('.header__content');             var body = document.querySelector('body');              var clickHandler = function clickHandler() {               menu.classList.toggle('active');               btnMenu.classList.toggle('active');               };               btn.addEventListener('click', clickHandler);

    btnMenu = document.querySelector('.header__menu-open'); var menu = document.querySelector('.header__content'); var body = document.querySelector('body'); var clickHandler = function clickHandler() { menu.classList.toggle('active'); btnMenu.classList.toggle('active'); }; btn.addEventListener('click', clickHandler);

    - вот так открывает и закрывает по бургеру и крестику (блок с классом "header__menu-open")

    а если делаешь так 

    btnMenu = document.querySelector('.header__menu-open');             var menu = document.querySelector('.header__content');             var body = document.querySelector('body');              var clickHandler = function clickHandler() {               menu.classList.toggle('active');               btnMenu.classList.toggle('active');               };               body.addEventListener('click', clickHandler);

    btnMenu = document.querySelector('.header__menu-open'); var menu = document.querySelector('.header__content'); var body = document.querySelector('body'); var clickHandler = function clickHandler() { menu.classList.toggle('active'); btnMenu.classList.toggle('active'); }; body.addEventListener('click', clickHandler);

    То при клике в любом месте открывает и закрывает мобильное меню. (при соответствующем разрешении).

    Задача у меня стоит чтобы меню открывалось и закрывалось при клике на блок открытия закрытия (класс блока header__menu-open), и при ссылках в блоке header__content но обязательно если есть второй класс в этом блоке active.

    Уже четвертый день бьюсь и никак не могу сделать.

    Заранее спасибо если покажете примером.

  • DmitriyLeo,

    нельзя ссылкам убирать действия

    По какой причине?

  • Ankhena, так как это может сработать и на пк версии. Или я ошибаюсь?
    Честно не понимаю алгоритм. Если скрипт выключает действия у всех ссылок, то допустим кнопка открывающая модальное окно - тоже вырубится?
  • Ankhena,

    Натыкался на такое решение 

    $('header .nav-list ul a').click(function() {     $('body').removeClass('active-menu');     $(this).removeClass('active');     $('header .navigation').removeClass('active');     $('#OpenMobMenu').removeClass('active'); });

    $('header .nav-list ul a').click(function() { $('body').removeClass('active-menu'); $(this).removeClass('active'); $('header .navigation').removeClass('active'); $('#OpenMobMenu').removeClass('active'); });

    Но как его к своему скрипту на открытие и закрытие по кнопке присобачить - не могу понять..

  • DmitriyLeo,

    так как это может сработать и на пк версии. Или я ошибаюсь?

    Если не напишете условие, то, конечно, будет.
    Но вы же напишете..

    Если скрипт выключает действия у всех ссылок, то допустим кнопка открывающая модальное окно - тоже вырубится?

    Вообще, ссылки и кнопки это разные элементы и, наверное, у них разные классы.
    И у кнопки с типом button по умолчанию вообще нет никаких действий, там нечего вырубать.
    Вы же можете написать селектор так, чтобы выбрались только нужные элементы.

    Натыкался на такое решение

    Знать бы, какое это имеет отношение к вашей проблеме...
    Этот скрипт меняет классы у body, тыкнутого элемента, навигации и ещё какой-то странно сделанной навигации (видимо, в коде дублируется меню для мобилок и десктопов).

    Вам нужно при клике на ссылку убрать её действие по умолчанию и добавить две функции.
    На переход по указанному в href урлу.
    На закрытие меню.

    https://yandex.ru/search/?clid=9582&text=javascrip...

  • Ankhena, у меня такая же система. К меню добавляется класс active и открывается мобильное. При нажатии на закрытие удаляется класс active. Так суть вопроса такая, чтобы при наличии класса актив при клике на ссылки меню он убирался из блоков с классами .header__content и .header__menu-open

    Полный скрипт примера 

    $('#OpenMobMenu').click(function() {     $('body').toggleClass('active-menu');     $(this).toggleClass('active');     $('header .navigation').toggleClass('active'); });  $('header .nav-list ul a').click(function() {     $('body').removeClass('active-menu');     $(this).removeClass('active');     $('header .navigation').removeClass('active');     $('#OpenMobMenu').removeClass('active'); });

    $('#OpenMobMenu').click(function() { $('body').toggleClass('active-menu'); $(this).toggleClass('active'); $('header .navigation').toggleClass('active'); }); $('header .nav-list ul a').click(function() { $('body').removeClass('active-menu'); $(this).removeClass('active'); $('header .navigation').removeClass('active'); $('#OpenMobMenu').removeClass('active'); });

    <body> <header>     <div class="container">         <div class="header-container">             <div class="button-open">                 <button id="OpenMobMenu">                     <span></span>                     <span></span>                     <span></span>                 </button>             </div>             <div class="logo">                 <img src="image/logo.svg" alt="">             </div>             <div class="navigation">                 <nav class="nav-list">                     <ul>                         <li><a href="#about">О компании</a></li>                         <li><a href="#products">Продукты</a></li>                         <li><a href="#buy">Где купить</a></li>                         <li><a href="#services">Сервисы</a></li>                     </ul>                 </nav>             </div>         </div>     </div> </header>

    <body> <header> <div class="container"> <div class="header-container"> <div class="button-open"> <button id="OpenMobMenu"> <span></span> <span></span> <span></span> </button> </div> <div class="logo"> <img src="image/logo.svg" alt=""> </div> <div class="navigation"> <nav class="nav-list"> <ul> <li><a href="#about">О компании</a></li> <li><a href="#products">Продукты</a></li> <li><a href="#buy">Где купить</a></li> <li><a href="#services">Сервисы</a></li> </ul> </nav> </div> </div> </div> </header>

  • DmitriyLeo, забыла уже, что там в jq,
    hasClass или типа того.

    Но, по-моему, вам нужно не проверять, а при клике добавлять active ссылке и всё остальное.

    Или вы в localStorage записываете активную ссылку?
    С другой стороны, даже если записываете, то меню в начале всё равно же закрыто, так что я не поняла смысла в проверке есть active или нет.

  • Решил сам, возможно костыль, но результат который был нужен) 
    btnMenu = document.querySelector('.header__menu-open');             var menu =document.querySelector('.header__content');             var body =document.querySelector('body');             var btMenu = document.querySelector('.header__nav-list');                          var clickHandler = function clickHandler() {               menu.classList.toggle('active');               btnMenu.classList.toggle('active');               };               btnMenu.addEventListener('click', clickHandler);                btMenu.addEventListener('click', clickHandler);

    btnMenu = document.querySelector('.header__menu-open'); var menu =document.querySelector('.header__content'); var body =document.querySelector('body'); var btMenu = document.querySelector('.header__nav-list'); var clickHandler = function clickHandler() { menu.classList.toggle('active'); btnMenu.classList.toggle('active'); }; btnMenu.addEventListener('click', clickHandler); btMenu.addEventListener('click', clickHandler);

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Стас DB Ответ

    Для создания мобильной версии веб-сайта существует несколько подходов, которые могут быть использованы в зависимости от ваших потребностей и предпочтений. Ниже приведены некоторые из них:

    1. Responsive Web Design (RWD): Этот метод позволяет создать сайт, который адаптируется к различным размерам экранов, включая мобильные устройства. Для этого используются медиа-запросы в CSS, которые позволяют изменять стили в зависимости от ширины экрана. Пример использования медиа-запросов в CSS:

    @media only screen and (max-width: 600px) {
    /* стили для устройств с шириной экрана до 600px */
}

    @media only screen and (max-width: 600px) { /* стили для устройств с шириной экрана до 600px */ }

    2. Mobile-First Design: Этот подход предполагает создание мобильной версии сайта в первую очередь, а затем добавление стилей для более крупных экранов. Такой подход позволяет учесть особенности мобильных устройств с самого начала разработки.

    3. Separate Mobile Site: Вы можете также создать отдельный сайт для мобильных устройств. Для этого можно использовать поддомен (например, m.yoursite.com) или специальный URL-параметр для определения мобильной версии сайта. Для перенаправления пользователей на мобильную версию сайта можно использовать JavaScript или серверные скрипты.

    4. Mobile App: Если у вас есть возможность и желание создать мобильное приложение, вы можете разработать его с использованием нативных технологий (например, Swift для iOS или Java для Android) или фреймворков для разработки кросс-платформенных приложений (например, React Native или Flutter).

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

    Другие ответы (1) Ответить на вопрос
    Андрей PHP

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

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

    Во-вторых, необходимо уделить внимание дизайну и навигации. Мобильная версия сайта должна быть адаптивной, легкой в использовании и интуитивно понятной. Размещайте основную информацию и функционал на видном месте, избегайте перегруженности контентом и сложных элементов управления.

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

    Наконец, не забывайте о SEO. Оптимизируйте мобильную версию сайта для поисковых систем, используя

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ linkedin Из-за чего выкидывает из аккаунта LinkedIn? 1 ответ