Стилизация select-options?

Question

[Alex_87]

Прошу помочь подсказать, как можно стилизовать options, чтобы они были похожи на эти

никак не могу сделать элементы независимые. И появляются они при наведении...

Comments

[G F]

https://doineedacustomselect.com

Answer 1

[kocherman]

Код конечно написан на скорую руку, но ты же причешешь его....
https://jsfiddle.net/mpbo6dfs/4/

Comments

[Alex_87]

УАУ))) Круто! Вот где так учат, вы что заканчивали? Кстати, впервые вижу, чтобы так использовали spread оператор, если не ошибаюсь?(let curState = 0;
[...document.querySelectorAll('.footer .lang-selector .lang')]) .А если серьёзно, что вы читали и решали?
P.S. Я помню, что должен был показать вам , на понимание парсинга. У меня просто завал на работе. Я обязательно вышлю, чуть будет время. Возвращаюсь после 12. Вот как раз из-за экзотических требованиях заказчика) Спасибо вам большое!!!

[kocherman]

Alex_87, да опыта не отнять конечно. Я осваивал HTML, JavaScript, VBScript по книгам без интернета, отчасти можно сказать даже без компьютера. Просто было большое желание. И нечего делать, ведь когда интернета не было, столько свободного времени...

[Alex_87]

Я поднял блок с элементами вверх, но никак не могу их развёртывать вниз

[kocherman]

Alex_87, Ааа, это да. Смотри, там надо где устанавливается lang.style.marginTop подписать 0-х, где х - это полное значение без "px" на конце. Там вверх уходит потому что marginTop - отрицательный

[kocherman]

Alex_87, то есть вот это
(0-col.length+idx+1)*4+'rem'
замени на это
(col.length-idx-1)*4+'rem'

[kocherman]

Alex_87, https://jsfiddle.net/7x6y3whm/

[kocherman]

Блин, если честно, не очень юзабельно получилось и там много кода избыточного и вообще нужны тесты/отладка

[kocherman]

Alex_87,
так вроде получше работает
https://jsfiddle.net/7x6y3whm/2/

[kocherman]

Alex_87, и еще тебе надо области прописать тут:

if(e.clientX <= box.left - 30 || e.clientY >= box.top + 30){

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

[Alex_87]

kocherman, Спасибо большое! Выручил! Кстати, я заметил, что если увеличить расстояние между элементами, то они хуже работают. Последние два перестают откликаться вообще. То есть не меняется язык

[kocherman]

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

if(e.clientX <= box.left - 30 || e.clientY >= box.top + 30){

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

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

[Alex_87]

kocherman, спасибо тебе большое! Работает хорошо, я только дизайн ему поменял. Вернулся спустя 2 дня) Только вот высота элементов кажется не совсем нормальной. Слишком маленькая, как мне кажется...