Здравствуйте. Сегодня, в этом уроке, мы будем вместе с Вами делать классную панель для регистрации и входа в систему. Подобная панель уже существует. Но она реализована на jQuery, я же буду вести речь о простой панельке, сделанной на HTML с помощью CSS и небольшого JavaScript'ика!
Панель изначально будет скрыта, однако по клику пользователя она будет появляться и таким образом человек сможет войти в систему, либо зарегистрироваться на сайте. Ниже вы можете просмотреть демонстрацию получившегося меню и скачать исходные файлы урока:
Шаг 1. HTML-конструкция панели
Для начала, мы набросаем html-конструкцию всей нашей панели. Будет выглядеть она следующим образом:
HTML:
<div id="main">
<div id="navbar">
<ul>
<li>
<a href="#" onclick="showlayer('login_menu')">Регистрация | Войти</a></li>
</ul>
<div id="login_menu" style="display:none;">
<div id="new-user-col">Регистрация:
<a href="#" class="green-button">Зарегиться</a>
</div>
<div id="signup-user-col">
Войти в систему:
<p><form action="#" method="post">
<ul>
<li>
<label for="email">Email:</label>
<input type="text" id="email" size="18"/>
</li>
<li>
<label for="psw">Пароль:</label>
<input type="text" id="psw" size="18"/>
</li>
<button type="submit" class="green-button">Войти!</button>
</ul>
</form></p>
</div>
<div class="spacer"></div>
</div>
</div>
</div>
Шаг 2. Дизайн панели
Идем дальше... Теперь мы должны для правильного отображения панели привязать несколько стилей к нашему файлу, где будем размещать панель. Для этого достаточно просто разместить нижеприведенный код между тегами <head> и </head>:
CSS:
<style type="text/css">
/* ОСНОВНЫЕ СТИЛИ */
body{font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:11px;}
#main{
width:600px;
margin:0 auto;
}
/* СТИЛИ НАВИГАЦИОННОГО МЕНЮ */
#navbar{
background:url(images/bg.png) repeat-x;
height:29px;
line-height:29px;
}
#navbar ul, #navbar li,
#navbar form,
#navbar button {
border:0; margin:0; padding:0; list-style:none;
}
#navbar li a{
margin:0 6px;
text-decoration:none;
color:#000000;
font-weight:bold;
border-bottom:dotted 1px #000000;
}
#login_menu{
background:#aaaaaa;
border:solid 1px #666666;
width:340px;
padding:10px;
color:#FFFFFF;
position:absolute;
font-weight:bold;
font-size:12px;
line-height:18px;
}
#login_menu li{
padding-bottom:6px;
text-align:right;
}
#new-user-col{
padding-right:10px;
border-right:1px #DEDEDE solid;
height:120px;
width:100px;
float:left;
line-height:12px;
}
#signup-user-col{
padding-left:20px;
height:120px;
width:200px;
float:left;
line-height:12px;
text-align:right;
}
#login_menu label{font-size:11px; font-weight:normal;}
#login_menu input{font-size:11px; color:#333333; margin-left:10px;}
#login_menu button{
line-height:24px;
float:right;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
text-align:center;
cursor:pointer;
}
.green-button{
background:url(images/button.png);
display:block;
color:#FFFFFF;
font-size:11px;
text-decoration:none;
width:81px;
height:26px;
line-height:24px;
text-align:center;
}
.spacer{clear:both; height:1px;}
</style>
Шаг 3. Основной JavaScript-код
А вот и заключительная часть нашего урока. Здесь нам всего лишь остается заставить нашу панель «выползать», когда мы нажимаем сверху на кнопку. Для этого мы будем использовать очень простую функцию JS – showlayer(). Ниже я привожу полностью готовый к применению такой скрипт:
JavaScript:
<script type="text/javascript">
function showlayer(layer){
var myLayer=document.getElementById(layer);
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else {
myLayer.style.display="none";
}
}
</script>
Ну вот, в принципе, и все. Вы также можете использовать эту интересную функцию JS – showlayer() и во многих других своих работах. Спасибо за внимание, жду Ваших комментариев.