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

[IvanRu08]

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

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

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

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

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

[Tilonorrinco]

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

[IvanRu08]

1 час назад, Tilonorrinco сказал:

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

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

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

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

[Tilonorrinco]

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

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

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

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

[DivMan]

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

[IvanRu08]

3 часа назад, DivMan сказал:

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

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

3 часа назад, Tilonorrinco сказал:

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

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

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

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

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

[Tilonorrinco]

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

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

[IvanRu08]

1 час назад, Tilonorrinco сказал:

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

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

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

[Tilonorrinco]

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

Вот я и говорю, костыльный метод 

Я не туда вставил проверку на ссылку.