DirectoryWeb
    • Каталог
      • Скрипты
      • Боты
      • Программы
      • Android, iOS приложения
    • Арбитраж трафика
      • Тизерные сети
      • SMS рассылки
      • Telegram Ads
      • Анализ трафика
      • Видео трафик
      • Автоматизация
      • CPA-сети
      • Push-реклама
      • Popunder реклама
      • Нативная реклама
      • Ретаргетинг
      • Кейсы
      • Трекеры
      • Партнёрские программы
        • Товарные партнерки
        • Финансовые партнерки
        • Партнерки интернет-магазинов
        • Зарубежные партнерки
      • Реклама в Telegram
      • Сервисы
        • Прокси
        • Виртуальные карты
      • Инструменты
        • Мультиаккаунтинг
      • Обзоры
      • Мануалы
      • Антидетект-браузеры
    • Статьи
      • Маркетплейсы
      • Безопасность в сети
      • Заработок в интернете
      • Сайтостроение
      • Оптимизация сайтов
      • Обучение
      • Криптовалюты
      • Новости
      • Разное
      • Новости сайта
  • Контакты
  • Telegram
  • Вход / Регистрация

купить скрипт казино

Psb.Hosing - Хостинговое решение для быстрой и стабильной работы ваших проектов.
Купить резедентные прокси
Vibix - надеждый видео-балансир
    Заработок в интернете без вложений » Статьи » Сайтостроение » Выпадающая форма для входа и регистрации

Отзывы

Vibix Обновление плеера: стало ещё удобнее Представляем долгожданные улучшения в работе плеера: 1....

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

Статьи / Сайтостроение

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


Урок по созданию выпадающей формы для входа и регистрации на сайте с использованием 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

 Показать / Скрыть текст
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: right;
  background: #eee;
  border-bottom: 1px solid #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;    
}

nav li {
  float: left;          
}

nav #login {
  border-right: 1px solid #ddd;
  -moz-box-shadow: 1px 0 0 #fff;
  -webkit-box-shadow: 1px 0 0 #fff;
  box-shadow: 1px 0 0 #fff;  
}

nav #login-trigger,
nav #signup a {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 #fff; 
}

nav #signup a {
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

nav #login-trigger {
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {
  background: #fff;
}

nav #login-content {
  display: none;
  position: absolute;
  top: 24px;
  right: 0;
  z-index: 999;    
  background: #fff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
  background-image: -webkit-linear-gradient(top, #fff, #eee);
  background-image: -moz-linear-gradient(top, #fff, #eee);
  background-image: -ms-linear-gradient(top, #fff, #eee);
  background-image: -o-linear-gradient(top, #fff, #eee);
  background-image: linear-gradient(top, #fff, #eee);  
  padding: 15px;
  -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
  -moz-border-radius: 3px 0 3px 3px;
  -webkit-border-radius: 3px 0 3px 3px;
  border-radius: 3px 0 3px 3px;
}

nav li #login-content {
  right: 0;
  width: 250px;  
}

/*--------------------*/

#inputs input {
  background: #f1f1f1;
  padding: 6px 5px;
  margin: 0 0 5px 0;
  width: 238px;
  border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #ccc inset;
  -webkit-box-shadow: 0 1px 1px #ccc inset;
  box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
  background-color: #fff;
  border-color: #e8c291;
  outline: none;
  -moz-box-shadow: 0 0 0 1px #e8c291 inset;
  -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
  box-shadow: 0 0 0 1px #e8c291 inset;
}

/*--------------------*/

#login #actions {
  margin: 10px 0 0 0;
}

#login #submit {		
  background-color: #d14545;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
  background-image: -webkit-linear-gradient(top, #e97171, #d14545);
  background-image: -moz-linear-gradient(top, #e97171, #d14545);
  background-image: -ms-linear-gradient(top, #e97171, #d14545);
  background-image: -o-linear-gradient(top, #e97171, #d14545);
  background-image: linear-gradient(top, #e97171, #d14545);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
  border: 1px solid #7e1515;
  float: left;
  height: 30px;
  padding: 0;
  width: 100px;
  cursor: pointer;
  font: bold 14px Arial, Helvetica;
  color: #fff;
}

#login #submit:hover,
#login #submit:focus {		
  background-color: #e97171;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
  background-image: -webkit-linear-gradient(top, #d14545, #e97171);
  background-image: -moz-linear-gradient(top, #d14545, #e97171);
  background-image: -ms-linear-gradient(top, #d14545, #e97171);
  background-image: -o-linear-gradient(top, #d14545, #e97171);
  background-image: linear-gradient(top, #d14545, #e97171);
}	

#login #submit:active {		
  outline: none;
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;		
}

#login #submit::-moz-focus-inner {
  border: none;
}

#login label {
  float: right;
  line-height: 30px;
}

#login label input {
  position: relative;
  top: 2px;
  right: 2px;
}


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 на странице с формой.

Telegram

МАРКЕТПЛЕЙС ЦИФРОВЫХ ТОВАРОВ

Перейти в чат вебмастеров
  • DirectoryWeb
  • 11.07.2013
  • 1 10 761
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
Скрипт браузерной игры Memories
Скрипт браузерной игры Memories
5-03-2017, 23:55, Браузерные игры
Скрипт инвестиционного проекта INVEST-AVTO
Скрипт инвестиционного проекта INVEST-AVTO
20-08-2015, 11:17, HYIP, MLM, МММ
Скрипт сайта анонимных вопросов Voprosik
Скрипт сайта анонимных вопросов Voprosik
3-01-2015, 23:33, Социальные сети
Скрипт рекламного сервиса CASCHBOX
Скрипт рекламного сервиса CASCHBOX
28-07-2017, 16:08, Рекламные сервисы
PST.NET — Виртуальные карты для арбитража трафика
PST.NET — Виртуальные карты для арбитража трафика
19-12-2024, 10:00, Финансы / Арбитраж трафика / Виртуальные карты / Обзоры
Скрипт TG Poster контента из Telegram каналов
Скрипт TG Poster контента из Telegram каналов
12-09-2022, 17:16, ---

Твой комментарий..

  • Скрипты
    • Telegram
    • Финансы
    • CS:GO
    • Бонусники
    • Браузерные игры
    • Интернет магазины
    • Автопостинг
    • Доски объявлений
    • Обменники
    • Казино
    • Каталоги
    • Конструкторы сайтов
    • Облачные майнинги
    • Платёжные системы
    • Рекламные сервисы
    • Социальные сети
      • TikTok Ads
    • Экономические игры
    • Чаты
    • Хостинги
    • HYIP, MLM, МММ
    • Фриланс биржи
    • E-mail рассылки
    • Разное
  • Арбитраж трафика
    • Тизерные сети
    • SMS рассылки
    • Telegram Ads
    • Анализ трафика
    • Видео трафик
    • Автоматизация
    • CPA-сети
    • Push-реклама
    • Popunder реклама
    • Нативная реклама
    • Ретаргетинг
    • Кейсы
    • Трекеры
    • Партнёрские программы
      • Товарные партнерки
      • Финансовые партнерки
      • Партнерки интернет-магазинов
      • Зарубежные партнерки
    • Реклама в Telegram
    • Сервисы
      • Прокси
      • Виртуальные карты
    • Инструменты
      • Мультиаккаунтинг
    • Обзоры
    • Мануалы
    • Антидетект-браузеры
  • HTML шаблоны
  • Боты
  • Программы
    • Парсинг
  • Android, iOS приложения
  • Статьи
    • Маркетплейсы
    • Безопасность в сети
    • Заработок в интернете
    • Сайтостроение
    • Оптимизация сайтов
    • Обучение
    • Криптовалюты
    • Новости
    • Разное
    • Новости сайта
Рекламная сеть Nativeads
Подробнее
Рекламная сеть Nativeads
VKAccountsManager — мощная программа для рассылки и продвижения ВКонтакте
Подробнее
VKAccountsManager — мощная программа для рассылки и продвижения ВКонтакте
AlterCPA Pro: универсальная платформа для CPA
Подробнее
AlterCPA Pro: универсальная платформа для CPA
Клонирование каналов - описание и инструкция
Подробнее
Клонирование каналов - описание и инструкция
Мобильная прокси ферма: как собрать своими руками и заработать деньги
Подробнее
Мобильная прокси ферма: как собрать своими руками и заработать деньги
Новый скрипт экономической игры «Конное поло»
Подробнее
Новый скрипт экономической игры «Конное поло»
SocTool – революция для Instagram
Подробнее
SocTool – революция для Instagram
Cписок полезных сайтов для работы в интернете
Подробнее
Cписок полезных сайтов для работы в интернете
Скрипт поиска уязвимостей VSPS
Подробнее
Скрипт поиска уязвимостей VSPS
Программа для накрутки трафика Mass Site Visitor v1.2
Подробнее
Программа для накрутки трафика Mass Site Visitor v1.2
Loading...

Внимание! Данный материал предоставлен сайтом DirectoryWeb.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое

  • Топ просмотров
  • Высший рейтинг
  • Самый топ
Топ платежных систем для арбитража трафика

Топ платежных систем для арбитража трафика

  • ddspprtn
  • 27.05.2025
  • 1 229
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
PSB PROXY - обзор и отзывы

PSB PROXY - обзор и отзывы

  • redactor
  • 28.05.2025
  • 1 98
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Топ платежных систем для арбитража трафика

Топ платежных систем для арбитража трафика

  • ddspprtn
  • 27.05.2025
  • 1 229
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
PSB PROXY - обзор и отзывы

PSB PROXY - обзор и отзывы

  • redactor
  • 28.05.2025
  • 1 98
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт сайта рулетки CSGOSHIK

Скрипт сайта рулетки CSGOSHIK

  • DirectoryWeb
  • 01.10.2018
  • 1 3 886
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт онлайн казино Фараон

Скрипт онлайн казино Фараон

  • DirectoryWeb
  • 30.09.2018
  • 1 7 919
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт онлайн казино FlashCasino 1.2

Скрипт онлайн казино FlashCasino 1.2

  • DirectoryWeb
  • 26.10.2018
  • 1 3 434
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Cкрипт онлайн лотереи Lottery for life

Cкрипт онлайн лотереи Lottery for life

  • DirectoryWeb
  • 17.10.2018
  • 1 4 240
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт онлайн казино Вулкан NEW

Скрипт онлайн казино Вулкан NEW

  • DirectoryWeb
  • 28.10.2018
  • 1 12 382
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт Bitcoin игр онлайн Quizda

Скрипт Bitcoin игр онлайн Quizda

  • DirectoryWeb
  • 01.08.2018
  • 1 4 191
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт игры моментальной лотереи - рулетки Best-Loto

Скрипт игры моментальной лотереи - рулетки Best-Loto

  • DirectoryWeb
  • 23.01.2018
  • 1 8 437
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт моментальной лотереи Fast Loto

Скрипт моментальной лотереи Fast Loto

  • DirectoryWeb
  • 05.10.2017
  • 1 7 917
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Скрипт онлайн казино Brilliant-Club

Скрипт онлайн казино Brilliant-Club

  • DirectoryWeb
  • 02.07.2017
  • 1 10 189
  • 0
    • 60
    • 1
    • 2
    • 3
    • 4
    • 5
  • Подробнее..
Информация
  • О проекте
  • Правила
  • Статистика
  • Облако тегов
  • Контакты
  • Карта сайта
Каталог
  • Скрипты
  • Боты
  • Программы
  • Android, iOS приложения
  • Статьи
Арбитраж трафика
  • Кейсы
  • Партнёрские программы
  • Сервисы
  • Инструменты
  • Обзоры
Полезные ссылки
  • Партнерские программы и сервисы
  • Скрипты, моды и шаблоны
Заказ
Быстрый вход

Используйте социальные сети для быстрой регистрации и авторизации.

ВКонтакте
Создать аккаунт / Регистрация
Авторизация

Я забыл свой пароль