Меню с выпадающими формами - FormBox
При разработке интерфейса проекта всегда хочется, чтобы он был простым и понятным для пользователя. Не важно, что предлагает ваш сайт, нужно найти баланс между простотой и функциональностью. Очень важно добиться, чтобы пользователь легко находил и понимал любые функции вашего проекта, в идеале - без загрузки других страниц.
Самые распространенные функции - регистрация, вход на сайта, получение забытого пароля. Очень часто веб мастера идут избитым путем при решении данных задач - пользователю выводится другая страница при регистрации или вводе имени и пароля. В результате прерывается процесс работы с сервисом. в данном уроке предлагается другой подход - использование FormBox.
Концепция навигации, которая присутствует постоянно в верхней части страницы, существует уже много лет. Выпадающие меню могут существенно улучшить интерфейс и удобство использования вашего проекта. Они появляются только тогда, когда нужны и не меняют содержание страницы.
Что такое FormBox?
FormBox - навигационное меню, использующее jQuery и CSS3, которое поддерживает интегрированные формы. В данном уроке представлены формы для входа на сайт, регистрации, обновления пароля и контакта. Все они выпадают из меню при наведении курсора мыши на соответствующий пункт. Такой интерфейс позволит избавиться от лишних страниц с формами и упрощает процесс взаимодействия пользователя с сайтом.
Создаем FormBox
Каждая форма является закладкой , которая включается при наведении на пункт меню курсора мыши по ID (например #tab2). Такой подход позволяет просто совместить обычные пункты меню с выпадающими закладками.
HTML
Меню представляет собой обычный неупорядоченный список, пункты которого имеют класс ‘regular’ или ‘dropdown’ в зависимости от типа. Далее содержится контейнер, в котором определяется содержание закладок.
<div id="tabs"> <ul id="tabMenu"> <li class="regular"><a href="/home.html">Главная</a></li> <li class="dropdown"><a href="#tab1">Войти</a></li> <li class="dropdown"><a href="#tab2">Регистрация</a></li> <li class="dropdown"><a href="#tab3">Забыл пароль</a></li> <li class="regular"><a href="/home.html">Цены</a></li> <li class="regular"><a href="/home.html">О нас</a></li> <li class="dropdown"><a href="#tab4">Контакт</a></li> <li class="edges"> </li> </ul> </div> <div id="tabContainer"> <ul id="tabPanes"> <li id="tab1"> <p> <div class="formcontainer"> <div class="text"> <label for="username">Имя</label> <input type="text" name="username" id="username" alt="Имя пользователя, которое вы выбрали при регистрации."> </div> <div class="text"> <label for="password">Пароль</label> <input type="text" name="password" id="password" alt="Пароль, который вы вводили при регистрации."> </div> <div class="text"> <br> <input type="checkbox" name="rememberme" id="rememberme"> Запомнить меня </div> </div> <center> <div class="block" id="bluebutton"> <button>Войти</button> </div> </center> </p> </li> . . . </ul> </div>
JavaScript
FormBox работает на основе события hoover. Наведение курсора мыши на пункт меню приведет к его появлению. Вы можете изменить процесс появления выпадающего пункта вмешавшись в код функции tabMenuLinks.hover() в функции click():
$(window).load(function(){ var tabs = $("#tabs"); var tabPanesContainer = $("ul#tabPanes"); var tabPanesAll = tabPanesContainer.find("li").css("position", "absolute"); var tabMenuLinks = $("ul#tabMenu .dropdown"); var regularLinks = $("ul#tabMenu .regular"); var dropDownSpeed = 200; var dropUpSpeed = 200; var menuHeight = '240px'; /*Закрыть текущее открытое меню*/ function closeMenu() { tabMenuLinks.removeClass('activeTab'); tabPanesContainer.stop().animate({ height: '0px' }, dropUpSpeed); } /*Обработка ссылок меню без закладок*/ regularLinks.hover(function() { tabPanesContainer.stop().animate({ height: '0px' }); tabMenuLinks.removeClass('activeTab'); $(this).addClass('activeTab'); }, function() { $(this).removeClass('activeTab'); }); /*Обработка ссылок меню с закладками*/ tabMenuLinks.hover(function() { var thisMenuItem = $(this); /*Получаем смещение для пункта по отношению к странице*/ var thisMargin = thisMenuItem.offset().left; /*Получаем смещение для панели навигации по отношению к странице*/ var tabsOffset = tabs.offset().left; var thisIndex = thisMenuItem.index(); thisMargin = Math.floor(thisMargin - tabsOffset); var thisOffset = thisMargin - 52; /* Обрабатываем разницу поля для IE*/ if($.browser.msie) { thisOffset = thisMargin - 15; } tabPanesContainer.css('margin-left', thisOffset); tabPanesContainer.stop().animate({ height: menuHeight }, dropDownSpeed); tabMenuLinks.removeClass('activeTab'); thisMenuItem.addClass('activeTab'); var thisHash = thisMenuItem.find("a").attr('href'); var tabClicked = tabPanesAll.filter(thisHash); tabClicked.appendTo(tabPanesContainer).show(); return false; }, function() { $(this).stop(); }); /*Обработка наведения курсора мыши на контейнер закладки*/ tabPanesContainer.hover(function() { }, function() { closeMenu(); }); $('.edges').hover(function() { closeMenu(); }, function() { }); });
CSS
Для формирования выпадающих пунктов меню используется CSS3.
#tabs { width:604px; height:47px; background-image:url('../images/wooden8.png'); -webkit-box-shadow: 0px 5px 6px rgba(0,0,0,0.8); -moz-box-shadow: 0px 5px 6px ; box-shadow: 0px 5px 6px ; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-family:Arial; font-size:14px; margin:0 auto; } ul#tabPanes { margin-left:52px; position:relative; width:227px; overflow: hidden; clear:both; font-family:Arial; list-style-type: none; margin-top:-0px; position:absolute; } ul#tabPanes li { width: 227px; } ul#tabPanes li#tab1,li#tab2,li#tab3,li#tab4 { height:227px; margin-top:-30px; margin-left:-3px; display:none; text-shadow: #ffffff 0px 1px 0px; background-color:#C9AA7C; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-right-radius:5px; -webkit-border-bottom-left-radius:5px; background-image:url('../images/wood3.jpg'); background-repeat:no-repeat; -webkit-box-shadow: 0px 3px 4px rgba(0,0,0,0.6); -moz-box-shadow: 0px 3px 4px ; box-shadow: 0px 3px 4px ; }
Подсказки - JavaScript
При наведении курсора мыши на поле ввода, код проверяет наличие атрибута alt у него. В случае присутствия атрибута выводится подсказка рядом с полем ввода. когда курсор мыши покидает поле ввода, подсказка просто убирается.
/* Выводим подсказку при наведении курсора на поле ввода, если есть тег alt */ $('input').hover(function() { var thisItem = $(this); var msgTip = thisItem.attr('alt'); if(msgTip.length) { $('body').append('<div id="menuTooltip">\ <p>'+ msgTip +'</p>\</div>'); var pos = thisItem.offset(); var width = thisItem.width(); $("#menuTooltip").css( { "left": (pos.left + 115) + "px", "top":pos.top - 90 + "px" } ); $("#menuTooltip").fadeIn('slow'); } }, function() { $('div#menuTooltip').remove(); });
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/nZkG1FEWYtY/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
"Если технология меняется почти каждый день, нет смысла нанимать человека потому, что он обладает специфическим набором профессиональных навыков - все равно эти навыки скоро устареют. Вам нужно стараться принимать на работу людей, которые обладают широкими универсальными способностями к решению проблем, каким бы трудным это ни оказалось." |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.