#jquery #css
#jquery #css
Вопрос:
Я хочу создать меню, подобное этому, и производительность для меня очень важный фактор. До сих пор я сталкивался с двумя разными подходами, Javascript и CSS, и мне трудно понять, каким путем мне следует идти. Какой из них является более быстрым и облегченным подходом?
Мой веб-сайт работает с Javascript, но единственное, что мне интересно, это то, что если я выберу подход CSS, могу ли я каким-то образом заставить его работать таким образом, чтобы, если у пользователя отключен Javascript, ему / ей отображалась статическая страница?
Я объясню свой вопрос на примере. Предположим, у меня есть DOWNLOAD кнопка в моем меню. Если у пользователя есть JS, загружаемое содержимое должно отображаться на той же странице с помощью jQuery, но если у пользователя отключен JS, нажатие на пункт меню должно привести пользователя на download.php страницу.
Кстати, если существует бесплатное решение предлагаемого вами подхода, пожалуйста, предоставьте ссылку на него. Спасибо.
Ответ №1:
Меню CSS сложнее в использовании, чем JS: подменю мгновенно скроется, если курсор мыши отклонен на 1 пиксель даже на 1 мс. Вы можете добавить задержку в 100 или 200 мс в меню JS и допустить небольшие ошибки при перемещении ваших посетителей. Не все геймеры в совершенстве владеют мышью 😉
Так называемые «мега выпадающие» меню, возможно, лучше, чем приведенный вами пример. В Интернете сложно перемещаться по вертикали, а затем по горизонтали (и даже на рабочем столе это используется только для функций, к которым редко обращаются в программном обеспечении. Только мы, веб-разработчики и веб-дизайнеры, с легкостью проходим через эти сложные меню :)); выпадающий список mega отобразит посетителю целые ссылки с приятными заголовками.
Возможно, вам также захочется рассмотреть меню, которые отображают подменю при нажатии (т. Е. После того, как пользователь нажал на главную ссылку), если ваш сайт должен быть прост в использовании на смартфонах.
РЕДАКТИРОВАТЬ: я должен был добавить эти ссылки без вашего запроса о них, но не смог найти вторую (теперь она у меня в закладках, спасибо :))
- Якоб Нильсен (гуру юзабилити) о выпадающих меню:http://www.useit.com/alertbox/mega-dropdown-menus .html здесь
- Почему меню при наведении курсора мыши приносят пользователям больше вреда, чем пользы
- Шаблон проектирования: вертикальное выпадающее меню
Комментарии:
1. Не могли бы вы, пожалуйста, предоставить мне ссылку или простой пример? Я немного новичок в мире Интернета.
2. Конечно, я добавил 3 соответствующие ссылки
3. Большое вам спасибо. Я думаю, что лучший подход — объединить этот метод с тем, который представлен в нескольких других ответах (например, в psr).
4. @Felipe Alsacreations — удивительно, что я на самом деле не вижу никаких рекомендаций для фактического кода или плагинов jquery во всех этих примерах
Ответ №2:
Вы могли бы использовать меню на основе css, которое начинает отображаться, а затем использовать JS, чтобы скрыть его как можно быстрее. Или вы могли бы даже заменить его другим стилем меню, который опирается на JS.
CSS работает быстрее и легче по весу . JS более гибкий. Гибрид имеет самый тяжелый вес.
Комментарии:
1. Ну, это как бы упоминается в самом моем вопросе. Но мой вопрос в том, какой подход быстрее / лучше и могу ли я использовать гибридный метод (который поддерживает как JS-совместимые, так и отключенные клиенты)
2. @AlirezaNoori — Я говорю, что вы можете создать гибрид, используя чистый метод CSS. Затем используйте javascript, чтобы скрыть метод чистого CSS и реализовать метод JS. Это работает в обоих случаях.
3. Спасибо. Можете ли вы привести краткий пример?
4. @AlirezaNoori — Разумная просьба, но сейчас я не могу. Не уверен, что я в конечном итоге доберусь до этого в любое разумное время. Если меня не осыплют голосами за ответ, я пойму.
Ответ №3:
Хорошая причина узнать о прогрессивном улучшении. Используйте как CSS, так и JS!
Вы должны создать функционирующее базовое CSS-меню для того очень небольшого процента людей, которые не используют javascript, а затем использовать его с помощью JS, чтобы получить то, что вы хотите.
Это не только хорошо для доступности, но и создаст более надежный код без ошибок, поскольку вы гарантированно вернетесь к чему-то функционирующему (большую часть времени).
Ответ №4:
Лучший вариант — использовать чистый css для достижения желаемого эффекта. Таким образом, вам не придется полагаться на то, что js включен. примерно 30-50% пользователей просматривают веб-страницы без включения js, пока это им не понадобится, по крайней мере, исходя из моего опыта и сайтов, которые я поддерживаю.
Ответ №5:
Ваш CSS должен скрывать дочерние подменю по умолчанию, и каждый из элементов верхнего уровня должен ссылаться на страницу, которая позволяет мне получить доступ к элементам, которые обычно находятся в этом меню.
Например, если у вас был пункт меню под названием Cats , а дочерними элементами являются различные породы кошек, то на вашей странице верхнего уровня (/cats /) также должны быть ссылки на породы.
Вкратце: меню верхнего уровня в идеале должно ссылаться на индекс того, что находится в дочернем меню. Таким образом, тот, кто нажимает на меню, все равно получит доступ к содержимому меню, независимо от того, есть у него Javascript или нет (или он использует iPad, который отличается необычностью с меню и тому подобным)