0

Я создаю сайт, используя в основном HTML и CSS. Я хочу избежать любого сценария на стороне сервера. Тем не менее, клиентские скрипты. Я хочу создать меню вместе с анимацией.Как я могу анимировать с помощью перехода видимость нескольких элементов за один раз с помощью CSS и/или javascript?

Я создал меню, используя таблицу с 5 столбцами и 1 строку. Каждый элемент меню помещается в ячейку. То, что я хочу сделать, это, прежде всего, каждый элемент меню отображается только значком, размещенным в центре ячейки. Когда пользователь наводит мышь на конкретную ячейку, значок выравнивается по левому краю, а не выравнивается по центру, и название элемента меню становится видимым рядом с значком.

Я пробовал использовать переходы, и они не работают. Я попытался использовать CSS в сочетании с javascript. Но ни выравнивание значка, ни видимость текста не показывают никаких изменений при наведении указателя мыши.

+1

Для начала вы никогда не использовали бы ничего, кроме сценариев на стороне клиента. Я думаю, вам нужно сделать некоторые исследования в jQuery. Это буквально для всех тех вещей, которые вы пытаетесь сделать здесь. – durbnpoisn

+0

Нельзя ли это сделать с ** CSS ** и/или ** Javascript **? – Srinjoy

+1

jQuery Является Javascript. Это просто библиотека вызовов функций, которые используют CSS и JavaScript для выполнения сложных задач, как вы описываете, и сделать их полностью совместимыми с кросс-платформой. Вы можете создать полностью функциональное анимированное меню за считанные секунды, с очень маленьким кодом. – durbnpoisn

ответ

0

Если вы хотите учиться, начните с jquery. Может потребоваться много времени, чтобы узнать, как создать красивый пользовательский интерфейс.

Если вы просто хотите создать веб-сайт, используйте некоторые готовые фрагменты кода, доступные в Интернете. Примерно так: http://tympanus.net/codrops/2011/07/12/animated-text-and-icon-menu/ Они сделали полный урок, попытаются понять, как все работает, и, увидев некоторые примеры, вы сможете настроить эти коды в соответствии с вашими потребностями. (редактирование: также проверить этот учебник (проверить кнопку стиль Itzel): http://tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects/)

Я иногда знаю, что это трудно, чтобы получить информацию из Интернета, если вы не знаете правильный «термин», чтобы использовать в поиске Google , Теперь вы знаете, что вам нужно искать «jquery animated menu», чтобы получить множество таких свободно доступных фрагментов кода. :)