Jump to content
  • 0

Помогите доработать логику раскрывающегося меню


IvanRu08
 Share

Question

Всем привет. Есть адаптивное меню.

Снимок экрана 2017-10-25 в 18.17.18.pngСнимок экрана 2017-10-25 в 18.18.03.png

Нужно реализовать следующее:

  1. При нажатии на открыть меню, меню должно разворачиваться, а текст меняется на "Закрыть меню" (с горем пополам реализовал)
  2. При нажатии в любом другом месте (но не на само меню), меню должно скрываться, текст меняется опять на "Открыть меню". Это почти реализовано, однако при клике на само "закрыть меню", меню сворачивается, но текст не меняется.

В общем, первый пункт при помощи интернета удалось сделать, со вторым запутался совсем. Предполагаю, что и первый пункт реализован через одно место, надеюсь, что подскажете, как лучше это сделать. Вот код: http://jsfiddle.net/6dhjb2vn/6/

Заранее спасибо за ответы

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
  On 10/25/2017 at 6:45 PM, Tilonorrinco said:
Expand  

Очень благодарен. Осталась еще одна проблема. Эти скрипты продолжают работать, даже когда сайт развернут на всю ширину. Пытался решить проблему вот таким способом:

currentWidth = document.documentElement.clientWidth;
if (currentWidth <= 767) {}

Но вычисляется размер экрана только один раз при загрузке страницы. Как сделать так, чтобы вычисление происходило в реальном времени?

Link to comment
Share on other sites

  • 0

Иван, если я Вас правильно понял, нужно просто прописать это условие в обработчик клика. 

http://jsfiddle.net/6dhjb2vn/9/

Теперь меню не работает, если ширина вьюпорта более 767пх. Заодно исправил недочет со сворачиванием меню по клике на ссылке.

ПС Скорее всего есть готовый плагин, который реализует подобный функционал, т.к. наше решение получилось немного костыльным с т.з. архитектуры.

  • Thanks 1
Link to comment
Share on other sites

  • 0
  On 10/26/2017 at 8:09 AM, DivMan said:

А зачем проверять ширину с помощью js? на это же есть медиазапросы 

Expand  

Мне нужно, чтобы с определённой ширины часть скриптов не работала. Я не знаю, как это реализовать с помощью медиа запросов в CSS. Не подскажете?

  On 10/26/2017 at 7:53 AM, Tilonorrinco said:

Иван, если я Вас правильно понял, нужно просто прописать это условие в обработчик клика. 

http://jsfiddle.net/6dhjb2vn/9/

Теперь меню не работает, если ширина вьюпорта более 767пх. Заодно исправил недочет со сворачиванием меню по клике на ссылке.

ПС Скорее всего есть готовый плагин, который реализует подобный функционал, т.к. наше решение получилось немного костыльным с т.з. архитектуры.

Expand  

Спасибо. А почему костыльным? Мне кажется подключение отдельного плагина ещё больше замедлит сайт или я ошибаюсь?

Link to comment
Share on other sites

  • 0

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

Дополнительный плагин для меню не будет существенно замедлять сайт. 

  • Thanks 1
Link to comment
Share on other sites

  • 0
  On 10/26/2017 at 3:02 PM, Tilonorrinco said:

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

Дополнительный плагин для меню не будет существенно замедлять сайт. 

Expand  

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy