Не работает мобильное меню

[garmoni]

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

https://jsfiddle.net/2dcah0fL/

[AlexZaw]

Открываться то нечему, js у вас для дива с классом .menu добавляет класс menu_state_open, а в css не прописаны стили для этого класса

[garmoni]

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

Открываться то нечему, js у вас для дива с классом .menu добавляет класс menu_state_open, а в css не прописаны стили для этого класса

класс у меня прописан внизу в медиа 
 

.menu.menu_state_open .menu__icon span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
    }

    .menu.menu_state_open .menu__icon span:nth-child(2) {
        transform: rotate(45deg);
    }

    .menu.menu_state_open .menu__icon span:nth-child(3) {
        transform: rotate(-45deg);
    }

    .menu.menu_state_open .menu__icon span:nth-child(4) {
        top: 18px;
        width: 0%;
        left: 50%;
    }

    .menu.menu_state_open .menu__links {
        opacity: 1;  
    }

 

[AlexZaw]

это не стили для класса menu_state_open,

это стили для классов .menu__icon и .menu__links, которые в хтмл располагаются внутри дива с классом menu_state_open, который лежит внутри дива с классом .menu

Edited October 9, 2017 by AlexZaw

[garmoni]

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

это не стили для класса menu_state_open,

это стили для классов .menu__icon и .menu__links, которые в хтмл располагаются внутри дива с классом menu_state_open, который лежит внутри дива с классом .menu

Описание взяла от сюда http://getinstance.info/articles/css/responsive-menu/

Там больше нет стилей 

[AlexZaw]

Извиняюсь, menu_state_open, добавлется ведь при помощи js.

Могу посоветовать только внимательнее копировать стили css и структуру html , присмотритесь, какие классы у вас указаны в стилях, и какие в html.

[mrnobody]

В консоли ошибка - говорит, что вы не подключили jQuery. Или вы его не подключили только в jsfiddle, а в проекте подключен?

[AlexZaw]

jquery тут не виноват, если его подключить все равно работать не будет, ошибки в наименовании классов, может и еще в чем, не смотрел, но сначала нужно классы правильно расставить

[garmoni]

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

В консоли ошибка - говорит, что вы не подключили jQuery. Или вы его не подключили только в jsfiddle, а в проекте подключен?

не подключала, как подключить? в примере ну указано ничего

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

jquery тут не виноват, если его подключить все равно работать не будет, ошибки в наименовании классов, может и еще в чем, не смотрел, но сначала нужно классы правильно расставить

классы исправила, но все так же не работает 
https://jsfiddle.net/2dcah0fL/2/

[prophet_07]

Если подключить jQuery то меню работает: https://jsfiddle.net/3y4s6ve3/

У вас в ".menu__icon" со span что-то не так, они получаются и для крестика и для пунктов одновременно? 

[garmoni]

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

Если подключить jQuery то меню работает: https://jsfiddle.net/3y4s6ve3/

У вас в ".menu__icon" со span что-то не так, они получаются и для крестика и для пунктов одновременно? 

Подключила jQuery. Немного подправила и начало открываться содержимое меню, но почему то не то меню. И в полосках меню виден текст меню ( 

 

https://jsfiddle.net/2dcah0fL/5/

[prophet_07]

Открываться должно ".menu__links", как сейчас или ".menu__icon"?
Для ".menu__icon span" можно задать font-size: 0;

[garmoni]

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

Открываться должно ".menu__links", как сейчас или ".menu__icon"?
Для ".menu__icon span" можно задать font-size: 0;

В мобильном меню должно открываться .menu__icon

[prophet_07]

В .menu__icon должны быть пустые span. Они используются для иконки открытия/ закрытия. 
Текст, который там будет трансформироваться, как в примере, который выше присылал, так span-ы эти преобразуются в крестик. Как в указанном примере.
А в работе задействовано только основное меню ".menu__links"

 

[garmoni]

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

В .menu__icon должны быть пустые span. Они используются для иконки открытия/ закрытия. 
Текст, который там будет трансформироваться, как в примере, который выше присылал, так span-ы эти преобразуются в крестик. Как в указанном примере.
А в работе задействовано только основное меню ".menu__links"

 

Спасибо. Теперь разобралась. Осталось поменять стили для .menu__links в мобильной версии

[garmoni]

Что нужно изменить чтобы меню было так же по правой стороне , не занимая весь экран и открывалось блочно в столбец, а не строку?

 

https://jsfiddle.net/2dcah0fL/6/

[AlexZaw]

уберите у .menu ul li
    display: inline-block;

[garmoni]

Почему в обычной версии меню не выходит за пределы wrapper, а в мобильной выходит

https://jsfiddle.net/2dcah0fL/7/

[Q4Dizzy]

Ну вы же position:fixed; используете. Где правила right, top... ?

fixed

По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.

 

Edited October 10, 2017 by Q4Dizzy

[garmoni]

Спасибо за ответы