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

Для создания данной навигации мы будем использовать плагин FormBox. Это навигационное меню, использующее jQuery и CSS3, которое поддерживает интегрированные формы. В данном уроке представлены формы для входа на сайт, регистрации, обновления пароля и контакта. Все  они выпадают из меню при наведении курсора мыши на соответствующий пункт.  Такой интерфейс позволит избавиться от лишних страниц с формами и упрощает процесс взаимодействия пользователя с сайтом.

Каждая форма является закладкой , которая включается при наведении на пункт меню курсора мыши по ID (например #tab2). Такой подход позволяет просто совместить обычные пункты меню с выпадающими закладками. Для начала рассмотрим структуру HTML:

Меню представляет собой обычный неупорядоченный список, пункты которого имеют класс ‘regular’ или ‘dropdown’ в зависимости от типа. Далее содержится контейнер, в котором определяется содержание закладок. FormBox работает на основе события hoover.

Наведение курсора мыши на пункт меню приведет к его появлению. Вы можете изменить процесс появления выпадающего пункта вмешавшись в код функции tabMenuLinks.hover() в функции click(). Для формирования выпадающих пунктов меню используется CSS3.

При наведении курсора мыши на поле ввода, код проверяет наличие атрибута alt у него. В случае присутствия атрибута выводится подсказка рядом с полем ввода. когда курсор мыши покидает поле ввода, подсказка просто убирается.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.