Меню с выпадающими формами - 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-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
Все мы сидим в сточной канаве, но некоторые при этом смотрят на звезды Уайльд Оскар - (1854-1900) - английский писатель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.