Комментарии 33
Избавьте меня от всего этого «креатива»
Не перегибайте палку. В разумных приделах легкий и лаконичный дизайн не будет проблемой.
НЛО прилетело и опубликовало эту надпись здесь
вот 2 приятных варианта из подборки:
http://codepen.io/andytran/pen/YPvQQN
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Не знаю, почему такие подборки вызывают негатив: максимально понятное название, которое полностью соответствуют действительности. Крайне полезны, когда тупишь на тему нового дизайна — придумывать все всегда с нуля занимает нереальное количество времени. А так потыкал в подборку, подогнал прямо в codepen под свои данные и понял, надо оно тебе или нет.
Автору большое спасибо!
http://codepen.io/andytran/pen/YPvQQN
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Не знаю, почему такие подборки вызывают негатив: максимально понятное название, которое полностью соответствуют действительности. Крайне полезны, когда тупишь на тему нового дизайна — придумывать все всегда с нуля занимает нереальное количество времени. А так потыкал в подборку, подогнал прямо в codepen под свои данные и понял, надо оно тебе или нет.
Автору большое спасибо!
НЛО прилетело и опубликовало эту надпись здесь
Если статья называется «Большой обзор красивых многоуровневых меню с codepen», почему в ней должны быть мобильные версии с минимум анимаций?..
НЛО прилетело и опубликовало эту надпись здесь
Красивые меню с большим количеством анимации обычно применяются на ПК, а под мобильное устройство делают отдельное, упрощенное. Например выезжающая панель, как в нативном приложении с минимум анимации, чтобы не съедать весь процессор телефона. В таком варианте можно не грузить лишний код на мобильном, который применялся на ПК.
А вот когда стараются объединить два вида меню в одном месте, получается обычно коряво, это особенно ощущается в интернет-магазинах. Я открываю сайт на телефоне, хочу зайти в список категорий, а тут вываливается огромный список на весь экран и когда я его стараюсь просмотреть, скролится вся страница целиком (или список не поверх контента, а сдвигает информацию сайта на 300-1000 пикселей, превращая все в гигантскую распашонку). Тыкаю пальцем на элемент и у она либо вызывает hover, либо кидает на другую страницу (что я точно не ожидал), либо происходить все сразу вместе, либо ещё что-то непонятное. А все потому что поведение на нажатие по элементам меню на компе и на мобильных устройствах тоже разное. Нужно писать другой код реагирования. Hover уже срабатывает не так. По сути это два разных меню, с разной механикой и разным дизайном.
Поэтому то, что применима на ПК, часто не применима на мобильных устройствах.
Для телефона и планшета нужно использовать другое решение, которых кстати на Codepen тоже много. Можно объединять подходящие скрипты(для мобильного и для ПК) в один, допиливать под свою задачу и радоваться. Если бы сразу в решениях на Codepen запихали два варианта, то код был бы сложнее, а в некоторых случая и во все мог быть плохо отделен друг от друга и помешал бы объединению нескольких хороший идей в одну.
От красивых картинок решения отличаются как минимум тем, что не нужно все реализовывать с нуля. Гораздо быстрее и проще применить уже готовую анимацию, а не тратить на это время, особенно когда все достаточно понятно запрограммировано.
Также готовые варианты помогают придумать интересные решения.
В работе же это можно показывать дизайнерам и говорит, какие эффекты уже можно реализовать и как они могут выглядеть.
А вот когда стараются объединить два вида меню в одном месте, получается обычно коряво, это особенно ощущается в интернет-магазинах. Я открываю сайт на телефоне, хочу зайти в список категорий, а тут вываливается огромный список на весь экран и когда я его стараюсь просмотреть, скролится вся страница целиком (или список не поверх контента, а сдвигает информацию сайта на 300-1000 пикселей, превращая все в гигантскую распашонку). Тыкаю пальцем на элемент и у она либо вызывает hover, либо кидает на другую страницу (что я точно не ожидал), либо происходить все сразу вместе, либо ещё что-то непонятное. А все потому что поведение на нажатие по элементам меню на компе и на мобильных устройствах тоже разное. Нужно писать другой код реагирования. Hover уже срабатывает не так. По сути это два разных меню, с разной механикой и разным дизайном.
Поэтому то, что применима на ПК, часто не применима на мобильных устройствах.
Для телефона и планшета нужно использовать другое решение, которых кстати на Codepen тоже много. Можно объединять подходящие скрипты(для мобильного и для ПК) в один, допиливать под свою задачу и радоваться. Если бы сразу в решениях на Codepen запихали два варианта, то код был бы сложнее, а в некоторых случая и во все мог быть плохо отделен друг от друга и помешал бы объединению нескольких хороший идей в одну.
От красивых картинок решения отличаются как минимум тем, что не нужно все реализовывать с нуля. Гораздо быстрее и проще применить уже готовую анимацию, а не тратить на это время, особенно когда все достаточно понятно запрограммировано.
Также готовые варианты помогают придумать интересные решения.
В работе же это можно показывать дизайнерам и говорит, какие эффекты уже можно реализовать и как они могут выглядеть.
Вам собственно о том и говорят — люди берут вот такие вот недоделанные «готовые решения», а потом «или переходит не туда» или «листается не то» и т.п.
Соглашусь с вами, что желательно делать разные версии для мобильного и для десктопного браузеров, чтобы не скрывать часть контента, а просто его не выводить, если он не будет использоваться, и не перегружать и так перегруженный мобильный канал.
Но практика такая не самая распространенная, и всё равно настоятельно рекомендуется, чтобы «полная» версия была хоть и менее удобной но работоспособной на мобильных устройствах.
Опять таки, трансформер с большим разрешением, у которого сняли или отвернули клавиатурный блок, и используют по планшетному, тыкая тачскрином это слать на полную версию или на мобильную? А проблемы с тапом остаются…
ПС: в любом случае мне менюхи понравились.
Соглашусь с вами, что желательно делать разные версии для мобильного и для десктопного браузеров, чтобы не скрывать часть контента, а просто его не выводить, если он не будет использоваться, и не перегружать и так перегруженный мобильный канал.
Но практика такая не самая распространенная, и всё равно настоятельно рекомендуется, чтобы «полная» версия была хоть и менее удобной но работоспособной на мобильных устройствах.
Опять таки, трансформер с большим разрешением, у которого сняли или отвернули клавиатурный блок, и используют по планшетному, тыкая тачскрином это слать на полную версию или на мобильную? А проблемы с тапом остаются…
ПС: в любом случае мне менюхи понравились.
не туда
Приятно это слышать, значит не зря приготовил обзор!
Я нуб в веб-дизайне, подобные подборки помогают мне ликвидировать безграмотность.
Большинство таких вложенных свисто-перделочных меню раздражают тем, что они не работают без мыши: чтобы добраться до подменю, нужно тапнуть меню верхнего уровня. А в свою очередь тап воспринимается не как «покажи, что внутри», а как клик с последующим незапланированным переходом хрен знает куда.
К сожалению, это показывает уровень «грамотности» разработчика. Данная «фича» известна уже давно, а до сих пор находятся уникумы которые или вешают пустые якоря на ссылки или не делают event.preventDefault()
event.preventDefault() — больше не поддерживается FireFox — это устаревший метод
Такое безапеляционное заявление будет смотреться ещё увереннее с линкой на подтверждение данных слов
1 — событие передается в переменной id — использование неправильное.
2 — событие явно не передано вовсе
3 — тоже самое
4 — странный пример. Непонятно к чему там совсем preventDefault
Если передавать нормально событие — проблем нет.
«Сам сталкивался» :)
2 — событие явно не передано вовсе
3 — тоже самое
4 — странный пример. Непонятно к чему там совсем preventDefault
Если передавать нормально событие — проблем нет.
«Сам сталкивался» :)
Узбагойтесь!
Всё в порядке с preventDefault, просто некоторые не умеют его готовить.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
Всё в порядке с preventDefault, просто некоторые не умеют его готовить.
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
Похожее творится и с hover'ом на обычные блоки на странице. Кстати, пользователи redtube и xvideos с вами полностью согласны.
Не поленился, потестировал эти красивые многоуровневые меню на девайсе без мыши.
1. Flat Horizontal Navigation — не работает.
2. Material Nav Header w/ Aligned Dropdowns — не работает.
3. Smooth Accordion Dropdown Menu — работает.
4. Pure CSS Dark Inline Navigation Menu — не работает.
5. Pure CSS3 Mega Dropdown Menu With Animation — не работает.
6. CSS3 Dropdown Menu — не работает.
7. Simple Pure CSS Dropdown Menu — не работает.
8. Bootstrap 3 mega-dropdown menu — работает.
9. Flat Navigation — не работает.
10. 3D nested navigation — не работает.
11. Responsive Mega Menu — Navigation — не работает.
12. Pure Css3 Menu — не работает.
13. Full CSS3 Dropdown Menu — работает.
14. Css3 only dropdown menu — не работает.
15. Dropdown Menus — не работает.
16. Pure CSS DropDown Menu — не работает.
17. Pull Menu — Menu Interaction Concept — на планшете не работает. мобильная версия на телефоне работает
18. Make Simple Dropdown Menu — не работает.
19. Pure CSS dropdown [work for mobile touch screen] — doesn't give a f*ck for tablet touch screen.
20. Dropdown Menu — не работает.
21. CSS 3 Dropdown Menu — не работает.
22. KVdKQJ (автор очень долго думал над названием) — не работает.
23. CSS3 Menu Dropdowns (особенное решение)! — не работает.
«Не работает» означает, что меню игнорировало тапы, либо тап приводил к переходу, либо с подменю было невозможно взаимодействовать (например, оно появлялось и мгновенно исчезало).
Делаю для себя вывод, что «pure css» с hover'ами — это скорее недостаток, чем достоинство.
1. Flat Horizontal Navigation — не работает.
2. Material Nav Header w/ Aligned Dropdowns — не работает.
3. Smooth Accordion Dropdown Menu — работает.
4. Pure CSS Dark Inline Navigation Menu — не работает.
5. Pure CSS3 Mega Dropdown Menu With Animation — не работает.
6. CSS3 Dropdown Menu — не работает.
7. Simple Pure CSS Dropdown Menu — не работает.
8. Bootstrap 3 mega-dropdown menu — работает.
9. Flat Navigation — не работает.
10. 3D nested navigation — не работает.
11. Responsive Mega Menu — Navigation — не работает.
12. Pure Css3 Menu — не работает.
13. Full CSS3 Dropdown Menu — работает.
14. Css3 only dropdown menu — не работает.
15. Dropdown Menus — не работает.
16. Pure CSS DropDown Menu — не работает.
17. Pull Menu — Menu Interaction Concept — на планшете не работает. мобильная версия на телефоне работает
18. Make Simple Dropdown Menu — не работает.
19. Pure CSS dropdown [work for mobile touch screen] — doesn't give a f*ck for tablet touch screen.
20. Dropdown Menu — не работает.
21. CSS 3 Dropdown Menu — не работает.
22. KVdKQJ (автор очень долго думал над названием) — не работает.
23. CSS3 Menu Dropdowns (особенное решение)! — не работает.
«Не работает» означает, что меню игнорировало тапы, либо тап приводил к переходу, либо с подменю было невозможно взаимодействовать (например, оно появлялось и мгновенно исчезало).
Делаю для себя вывод, что «pure css» с hover'ами — это скорее недостаток, чем достоинство.
С помощью pure CSS можно сделать «stateful hover», например:
В таком случае переход произойдёт лишь при втором тапе.
P. S. Ну и, конечно, обернуть всё в media query.
<div class="menu-item" tabindex="0">
<a href="#">Link</a>
</a>
.button .menu-item {
pointer-events: none;
}
.button:focus .menu-item {
pointer-events: all;
}
В таком случае переход произойдёт лишь при втором тапе.
P. S. Ну и, конечно, обернуть всё в media query.
Спасибо, отлично протестировал!
Понятно, что «Pure css» с hover'ами подходит для ПК, а не для мобильных устройств. На них вообще механизм взаимодействия нужно другой применять. Но ведь то, что какой-то вариант не подходит для мобильного не говорит о том, что его нельзя использовать на ПК, просто надо сделать по другому.
Всему свое место.
Понятно, что «Pure css» с hover'ами подходит для ПК, а не для мобильных устройств. На них вообще механизм взаимодействия нужно другой применять. Но ведь то, что какой-то вариант не подходит для мобильного не говорит о том, что его нельзя использовать на ПК, просто надо сделать по другому.
Всему свое место.
Мне понравилось Bootstrap 3 mega-dropdown menu. Но как сложно все эти ссылки вводить с телефона… QR код был бы очень уместен.
Недавно понадобилось запилить двухуровневое меню, это когда две полосы с кнопками, содержимое нижней полосы зависит от верхней, интересно есть какие то готовые решения? Не нашёл ничего подходящего, руками допиливал меню jQuery UI
А картинку показать можете?
Это же частный случай табов, только вместо текста второй ряд кнопок.
http://jsfiddle.net/syahrasi/us8uc/
http://jsfiddle.net/syahrasi/us8uc/
Такое не подходит? codepen.io/ojbravo/pen/tIacg
Второй уровень меню тоже в строчку.
Второй уровень меню тоже в строчку.
Спасибо за интересную подборку.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Большой обзор красивых многоуровневых меню с codepen