Форма регистрации на сайте является одним из важных элементов веб дизайна. Но у нее есть один недостаток - она может занимать место тогда, когда уже в ней нет надобности. В данном уроке предлагается простое и эффективное решение для организации выпадающей формы регистрации. Для него будет использоваться CSS3 и jQuery. Выпадающая форма регистрации Идея Основная задача - избежать ожидания загрузки отдельной страницы для входа на сайт. Таким образом повышается уровень удобства использования интерфейса и пользователь получает возможность немедленной регистрации на сайте. Ингредиенты решения Для индикации состояния формы будут использоваться элементы HTML, которые преобразуются в кнопки с помощью CSS3 - стрелки, показывающие состояние формы (развернуто/свернуто). Также будет использоваться jQuery для анимированного разворачивания/сворачивания формы. А в самой форме будут использоваться новые свойства HTML5. HTML Ниже приводится разметка HTML, которая используется для организации формы: Разметка для формы 01 <nav> 02 <ul> 03 <li id="login"> 04 <a id="login-trigger" href="#"> 05 Войти <span>&#x25BC;</span> 06 </a> 07 <div id="login-content"> 08 <form> 09 <fieldset id="inputs"> 10 <input id="username" type="email" name="Email" placeholder="Ваш email адрес" required> 11 <input id="password" type="password" name="Password" placeholder="Пароль" required> 12 </fieldset> 13 <fieldset id="actions"> 14 <input type="submit" id="submit" value="Войти"> 15 <label><input type="checkbox" checked="checked"> Запомнить меня</label> 16 </fieldset> 17 </form> 18 </div> 19 </li> 20 <li id="signup"> 21 <a href="">Регистрация</a> 22 </li> 23 </ul> 24 </nav> CSS Правил CSS достаточно много: 001 nav ul { 002 margin: 0; 003 padding: 0; 004 list-style: none; 005 position: relative; 006 float: right; 007 background: #eee; 008 border-bottom: 1px solid #fff; 009 -moz-border-radius: 3px; 010 -webkit-border-radius: 3px; 011 border-radius: 3px; 012 } 013 014 nav li { 015 float: left; 016 } 017 018 nav #login { 019 border-right: 1px solid #ddd; 020 -moz-box-shadow: 1px 0 0 #fff; 021 -webkit-box-shadow: 1px 0 0 #fff; 022 box-shadow: 1px 0 0 #fff; 023 } 024 025 nav #login-trigger, 026 nav #signup a { 027 display: inline-block; 028 *display: inline; 029 *zoom: 1; 030 height: 25px; 031 line-height: 25px; 032 font-weight: bold; 033 padding: 0 8px; 034 text-decoration: none; 035 color: #444; 036 text-shadow: 0 1px 0 #fff; 037 } 038 039 nav #signup a { 040 -moz-border-radius: 0 3px 3px 0; 041 -webkit-border-radius: 0 3px 3px 0; 042 border-radius: 0 3px 3px 0; 043 } 044 045 nav #login-trigger { 046 -moz-border-radius: 3px 0 0 3px; 047 -webkit-border-radius: 3px 0 0 3px; 048 border-radius: 3px 0 0 3px; 049 } 050 051 nav #login-trigger:hover, 052 nav #login .active, 053 nav #signup a:hover { 054 background: #fff; 055 } 056 057 nav #login-content { 058 display: none; 059 position: absolute; 060 top: 24px; 061 right: 0; 062 z-index: 999; 063 background: #fff; 064 background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee)); 065 background-image: -webkit-linear-gradient(top, #fff, #eee); 066 background-image: -moz-linear-gradient(top, #fff, #eee); 067 background-image: -ms-linear-gradient(top, #fff, #eee); 068 background-image: -o-linear-gradient(top, #fff, #eee); 069 background-image: linear-gradient(top, #fff, #eee); 070 padding: 15px; 071 -moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9); 072 -webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9); 073 box-shadow: 0 2px 2px -1px rgba(0,0,0,.9); 074 -moz-border-radius: 3px 0 3px 3px; 075 -webkit-border-radius: 3px 0 3px 3px; 076 border-radius: 3px 0 3px 3px; 077 } 078 079 nav li #login-content { 080 right: 0; 081 width: 250px; 082 } 083 084 /*--------------------*/ 085 086 #inputs input { 087 background: #f1f1f1; 088 padding: 6px 5px; 089 margin: 0 0 5px 0; 090 width: 238px; 091 border: 1px solid #ccc; 092 -moz-border-radius: 3px; 093 -webkit-border-radius: 3px; 094 border-radius: 3px; 095 -moz-box-shadow: 0 1px 1px #ccc inset; 096 -webkit-box-shadow: 0 1px 1px #ccc inset; 097 box-shadow: 0 1px 1px #ccc inset; 098 } 099 100 #inputs input:focus { 101 background-color: #fff; 102 border-color: #e8c291; 103 outline: none; 104 -moz-box-shadow: 0 0 0 1px #e8c291 inset; 105 -webkit-box-shadow: 0 0 0 1px #e8c291 inset; 106 box-shadow: 0 0 0 1px #e8c291 inset; 107 } 108 109 /*--------------------*/ 110 111 #login #actions { 112 margin: 10px 0 0 0; 113 } 114 115 #login #submit { 116 background-color: #d14545; 117 background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545)); 118 background-image: -webkit-linear-gradient(top, #e97171, #d14545); 119 background-image: -moz-linear-gradient(top, #e97171, #d14545); 120 background-image: -ms-linear-gradient(top, #e97171, #d14545); 121 background-image: -o-linear-gradient(top, #e97171, #d14545); 122 background-image: linear-gradient(top, #e97171, #d14545); 123 -moz-border-radius: 3px; 124 -webkit-border-radius: 3px; 125 border-radius: 3px; 126 text-shadow: 0 1px 0 rgba(0,0,0,.5); 127 -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 128 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 129 box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset; 130 border: 1px solid #7e1515; 131 float: left; 132 height: 30px; 133 padding: 0; 134 width: 100px; 135 cursor: pointer; 136 font: bold 14px Arial, Helvetica; 137 color: #fff; 138 } 139 140 #login #submit:hover, 141 #login #submit:focus { 142 background-color: #e97171; 143 background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171)); 144 background-image: -webkit-linear-gradient(top, #d14545, #e97171); 145 background-image: -moz-linear-gradient(top, #d14545, #e97171); 146 background-image: -ms-linear-gradient(top, #d14545, #e97171); 147 background-image: -o-linear-gradient(top, #d14545, #e97171); 148 background-image: linear-gradient(top, #d14545, #e97171); 149 } 150 151 #login #submit:active { 152 outline: none; 153 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 154 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 155 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset; 156 } 157 158 #login #submit::-moz-focus-inner { 159 border: none; 160 } 161 162 #login label { 163 float: right; 164 line-height: 30px; 165 } 166 167 #login label input { 168 position: relative; 169 top: 2px; 170 right: 2px; 171 } jQuery JavaScript код достаточно простой. Структура if…else организует индикацию текущего состояния формы. Происходит переключение содержания элемента span между символами ? и ?. 1 $(document).ready(function(){ 2 $('#login-trigger').click(function(){ 3 $(this).next('#login-content').slideToggle(); 4 $(this).toggleClass('active'); 5 6 if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;') 7 else $(this).find('span').html('&#x25BC;') 8 }) 9 }); Примечание: обязательно включите библиотеку jQuery на странице с формой.