Загрузка...

Выпадающая форма для входа и регистрации

Выпадающая форма для входа и регистрации


Урок по созданию выпадающей формы для входа и регистрации на сайте с использованием CSS3 и jQuery. Использование такой формы поможет избежать ожидания загрузки отдельной страницы для входа на сайт.

Для создания формы будут использоваться элементы HTML, которые преобразуются в кнопки с помощью CSS3 - стрелки, показывающие состояние формы (развернуто/свернуто). Также будет использоваться jQuery для анимированного разворачивания/сворачивания формы. А в самой форме будут использоваться новые свойства HTML5.

HTML

<nav>
	<ul>
		<li id="login">
			<a id="login-trigger" href="#">
				Войти <span>&#x25BC;</span>
			</a>
			<div id="login-content">
		<form>
			<fieldset id="inputs">
				<input id="username" type="email" name="Email" placeholder="Ваш email адрес" required>   
				<input id="password" type="password" name="Password" placeholder="Пароль" required>
			</fieldset>

			<fieldset id="actions">
				<input type="submit" id="submit" value="Войти">
				<label><input type="checkbox" checked="checked"> Запомнить меня</label>
			</fieldset>
		</form>
			</div>                     
		</li>
		<li id="signup">
			<a href="">Регистрация</a>
		</li>
	</ul>
</nav>


CSS



jQuery

avaScript код достаточно простой. Структура if…else организует индикацию текущего состояния формы. Происходит переключение содержания элемента span между символами ? и ?.

$(document).ready(function(){
$('#login-trigger').click(function(){
	$(this).next('#login-content').slideToggle();
	$(this).toggleClass('active');					
	
if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
	else $(this).find('span').html('&#x25BC;')
	})
});


Примечание: обязательно включите библиотеку jQuery на странице с формой.шаблоны для dle 11.2



    Анимированное вертикальное меню

    Анимированное вертикальное меню
    Сегодня мы будем создавать анимированное вертикальное меню с круглыми кнопками. Анимация будет очень простая, при наведении шрифт заголовка будет увеличиватся, меняя цвет.

    Как сделать всплывающие подсказки на CSS

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

    Как сделать вертикальное меню для сайта

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

    Создание простой формы регистрации для сайта

    Создание простой формы регистрации для сайта
    В этом уроке покажу вам как создать простую форму регистрации на сайте на PHP и MySQL которую вы сами потом сможете усовершенствовать по своему желанию. Добавить защиту, оформление, поля с данными, загрузку аватаров.

    Урок по созданию установщика  install.php

    Урок по созданию установщика install.php
    Многие из вебмастеров кто сталкивался с установкой различных PHP скриптов для создания своего сайта, а так же известных CMS движков, наверное, заметили, что для облегчения установки и запуска используется автоматический установщик install. Так что в этом


Просмотров: 3 889
Добавлено: 11-07-2013, 17:39
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Наверх
[X]
Добро пожаловать на сайт!

Войти | Зарегистрироваться

контекстная реклама сайта цена