Проблема с выпадающим меню на css

[Pasha]

Сделал выпадающую менюшку на чистом css, да вот не задача: работает всё это как-то кривовато, можно посмотреть тут http://cloverdesign.ru/wordpress/ (чёрная стрелочка рядом с синей штуковиной). Спокойно можно поднести мышку и нажать на стрелочку, если использовать :active вместо :hover, но тогда выпадающая менюшка видна только во время клика. Подскажите, пожалуйста, как можно сделать так, чтобы и поднести можно было курсор спокойно и, чтобы менюшка всегда после клика отображалась пока ещё куда-нибудь не тыкну?

[hypnocolor]

Можно замаскировать этой стрелкой обычный checkbox и управлять выпадающим меню через :checked.

Только в этом случае меню скроется только при повторном клике на стрелку, поэтому, видимо, совсем без JS не обойтись.

Edited November 4, 2012 by hypnocolor

[Pasha]

Можно замаскировать этой стрелкой обычный checkbox и управлять выпадающим меню через :checked.

Только в этом случае меню скроется только при повторном клике на стрелку, поэтому, видимо, совсем без JS не обойтись.

Тоже была идейка сделать чекбоксом, но пока не пробовал реализовать.

А как на Javascript сделать можно?

[Viper]

на CSS:

_http://jsfiddle.net/webviper/B9AMZ/16/

- делалось для других целей, но под меню подходит

[Pasha]

Viper, к сожалению не получилось сделать вашим способом. Вот сам я что-то умудрился сделать, через a:focus + блок с меню {стили}. Работает практически правильно. Единственное, что чтобы закрыть меню надо щёлкнуть где-нибудь по сайту, на клике же по стрелочке меню не закрывается. И ещё такая менюшка не работает на iOS Помогите, пожалуйста, довести до ума.

[Viper]

в iOS, то есть, на mac'е? А браузер то какой?

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

[Pasha]

в iOS, то есть, на mac'е? А браузер то какой?

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

iOS - это iPad, iPhone, iPod, на маках Mac OS X Проверял на iPad через стандартный safari в iOS 6.0.1.

http://jsfiddle.net/dpckP/1/

Edited November 7, 2012 by Pasha

[Viper]

Посмотри как у меня сделан элемент close - это должен быть другой элемент, который заменяет объект-open и является "визуальной обманкой". Именно так, пускай он и будет при этом такой же на вид как и open(твоя стрелочка).

[Pasha]

Посмотри как у меня сделан элемент close - это должен быть другой элемент, который заменяет объект-open и является "визуальной обманкой". Именно так, пускай он и будет при этом такой же на вид как и open(твоя стрелочка).

Уууу практически получилось Только при клике вёрстка едет, а так работает.

http://jsfiddle.net/Pasha/LtTPn/

Edited November 7, 2012 by Pasha

[Pasha]

Неожиданно появилась ещё одна очень не понятная мне проблема, в менюшке не работают ссылки, ничего не происходит при клике, правильно работает только в webkit. http://jsfiddle.net/Pasha/NXaHY/ Помогите, пожалуйста, решить проблему.

[Viper]

Неожиданно появилась ещё одна очень не понятная мне проблема, в менюшке не работают ссылки, ничего не происходит при клике, правильно работает только в webkit. http://jsfiddle.net/Pasha/NXaHY/ Помогите, пожалуйста, решить проблему.

ужасные у тебя конструкции... Кое-что переделал по своему:

_http://jsfiddle.net/NXaHY/3/

На jsfiddle.net ссылки не могут открываться в этом же окне.

[Pasha]

Неожиданно появилась ещё одна очень не понятная мне проблема, в менюшке не работают ссылки, ничего не происходит при клике, правильно работает только в webkit. http://jsfiddle.net/Pasha/NXaHY/ Помогите, пожалуйста, решить проблему.

ужасные у тебя конструкции... Кое-что переделал по своему:

_http://jsfiddle.net/NXaHY/3/

На jsfiddle.net ссылки не могут открываться в этом же окне.

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

[Viper]

И ещё если менюшку закрыть, не кликнув на ссылки, то ссылки скрываются, но я всё равно могу нажать на них, они просто становятся невидимыми.

Поправил:

_http://jsfiddle.net/NXaHY/5/

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

Ну тут уже нужно смотреть сайт на котором находиться эта менюшка...

[Pasha]

Теперь я просто уже не знаю что делать, это мне никак непонятно. Код уже просто скопировал полностью, вторую менюшку закоментировал и ссылки не работают! Это просто... ужас((

[Pasha]

Получилось решить проблему с помощью transition, чтобы менюшка скрывалась не сразу после щелчка где-нибудь http://jsfiddle.net/Pasha/NXaHY/16/