Скрипты,шаблоны для uCoz, DLE. Софт программ бесплатно

Добро пожаловать!
Сделай
Cайт
Лучше
  • Главная страница
  • Форум Помощь
  • Файлы Каталог файлов
  • Полезно Рекомендуем
  • Новое На сайте
  • Правила Читать всем

Выпадающая форма регистрации на сайте

Твитнуть
02 Июл 2025
Простая и эффективная выпадающая форма регистрации на сайте

Форма регистрации на сайте является одним из важных элементов веб дизайна. Но у нее есть один недостаток - она может занимать место тогда, когда уже в ней нет надобности.
Перед
Code
</head>

Вставляем
Code
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->  
  <script src="http://scriptoza.my1.ru/DEMO/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
  $('#login-trigger').click(function(){
  $(this).next('#login-content').slideToggle();
  $(this).toggleClass('active');  
   
  if ($(this).hasClass('active')) $(this).find('span').html('▲')
  else $(this).find('span').html('▼')
  })
  });
  </script>

В CSS кидаем
Code
article, aside, details, figcaption, figure,  
  footer, header, hgroup, menu, nav, section {
  display: block;
  }
   
  fieldset
  {
  margin: 0;
  padding: 0;
  border: 0;
  }
   
  input:focus,textarea:focus {
  outline: none;
  }
   
  /*----------------------*/
   
  body
  {
  font-family: Arial, Helvetica, sans-serif;
  color: #444;
  background: #eee url("noise-pattern.png");
  margin: 0;
  font-size: 12px;
  }  
   
  /*----------------------*/
   
  .cf:before,
  .cf:after {
  content:"";
  display:table;
  }
   
  .cf:after {
  clear:both;
  }
   
  .cf {
  zoom:1;
  }
   
  /*----------------------*/
   
  header {
  padding: 8px 10%;
  border-bottom: 1px solid #fff;
  background-color: #777;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#777), to(#555));
  background-image: -webkit-linear-gradient(top, #777, #555);
  background-image: -moz-linear-gradient(top, #777, #555);
  background-image: -ms-linear-gradient(top, #777, #555);
  background-image: -o-linear-gradient(top, #777, #555);
  background-image: linear-gradient(top, #777, #555);
  -moz-box-shadow: 0 -3px 3px rgba(0,0,0,.5) inset;
  -webkit-box-shadow: 0 -3px 3px rgba(0,0,0,.5) inset;
  box-shadow: 0 -3px 3px rgba(0,0,0,.5) inset;
  }
   
  /*----------------------*/
   
  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;
  }

Далее после
Code
<body>

Вставляем

Code
<nav>
  <ul>
  <li id="login">
  <a id="login-trigger" href="#">
  Войти <span>▼</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>
</header>

Далее скачиваем архив, заливаем себе на сайт, и прописоваем пути к файлам.

Уважаемый посетитель, скачивать материал могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

+
    • 1
    • 2
    • 3
    • 4
    • 5

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

АвторПользователи/ Категории » Скрипты для uCoz/ Просмотров 2350 / Посмотреть комментарии 0
 
Вернуться назад

А также:
Хак с форумом

Хак с форумом

Строгое серо-синее вертикальное меню.

Строгое серо-синее вертикальное мен...

63 цветочные текстуры (Patterns) для фотошопа

63 цветочные текстуры (Patterns) дл...

Шаблон Компьютерного портала

Шаблон Компьютерного портала

IObit WinMetro 1.2.0.693 Final

IObit WinMetro 1.2.0.693 Final

Оповещение о новом личном сообщение

Оповещение о новом личном сообщение

 

html-cсылка на публикацию
BB-cсылка на публикацию
Прямая ссылка на публикацию


Всего комментариев: 0
Уважаемый посетитель, Вы зашли на сайт, как незарегистрированный пользователь.
Мы рекомендуем Вам
зарегистрироваться,либо войти на сайт под своим именем.
Twitter RSS Добавить в избранное

Профиль


  • Привет, Пользователи!


Логин:
Пароль:
Забыл пароль | Регистрация

Меню

  • Скрипты для uCoz
  • Шаблоны для uCoz
  • Графика Ucoz
  • Шаблоны с конструктором
  • Блоки и шапки
  • Адаптация с DLE
  • Виды материалов
  • Всё для DLE
  • PSD
  • Иконки
  • Разное
  • Шаблоны с PSD
  • Иконки/Значки
  • Хаки
  • Софт
  • Интернет
  • Всё для Photoshop

Мини-чат

    Вы не можете добавлять сообщения в чат
    Авторизуйтесь!

  • Top-5
  • Comments
  • Tags
  • UserGate Proxy & Firewall 4.3.949 + crack (serial) [Русская версия]
    60 downloads
  • Вид Фотоальбома + iLoad для Dominion
    41 downloads
  • Форма добавления комментариев
    41 downloads
  • Форма добавления комментариев для форума
    39 downloads
  • Новый шаблон для uCoz-ChromeGT
    36 downloads
Код вставляем в глобальный блок ВЕРХНЯЯ ЧАСТЬ САЙТА
Аватар Алексей Алексей 17 Мар 2013 | 13:35
Блин у меня не получилось его установить(( html код нужно в "страницы сайта" вставлять? в head :unsure:
аватар отсутствует Master 08 Мар 2013 | 00:08
Штука убойная, респект :v:
Аватар Babalus Babalus 13 Окт 2012 | 16:21
для (74)
null (68)
ucoz (46)
на (31)
разное (31)
сайта (22)
шаблон (19)
Скрипт (17)
psd (14)
вид (14)
Сайтостроение (14)
Новый (13)
форум (12)
Для сайта (11)
Хаки (10)
как (9)
красивый (9)
набор (9)
Flash (8)
для uCoz (8)
меню (8)
русский (8)
AJAX (7)
кнопка (7)
кнопки (7)

Рейтинг-Топ 10

  • Редактируем шаблон прямо на сайте
  • Красивый блок информации для uCoz
  • Новшества мини чата ucoz
  • Скруглённые уголки
  • Видеокурс "HTML с нуля"
  • Красивые Списки На CSS
  • Переключение страниц с интересным эффектом.
  • Набор Noavatar для сайта
  • Очень красивый вид комментариев для ucoz
  • Имитация градиента

Топ-5-сайтов

  • Oyama Do
    Рейтинг: 5.0/5
    Просмотров: 11678
  • Профессиональная академия единоборств KEA-FIGHTING
    Рейтинг: 3.0/2
    Просмотров: 5342

Статистика

Нас уже: 1651 {+0}
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    Пользователи
    Гости сайта
  • Сегодня нас посетило

    Опрос

    Оцените мой сайт
    Всего ответов: 266
Форум Файлы Магазин Статьи Графика Видео Теги
| Карта сайта | Карта форума | Скрипты,шаблоны для uCoz, DLE. Софт программ бесплатно | ©2011 - 2025

  • Яндекс.Метрика
  • Счетчик PR-CY.Rank
  • Рейтинг@Mail.ru
  • Клуб каратэ кёкусинкай OYAMA-DO



Статистика/ Обратная связь/ Размещение рекламы