Приветствую Вас, Гость | RSS
Понедельник, 22.12.2025, 14:51
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Красивая всплывающая панель для сайта
R1sKДата: Пятница, 15.07.2011, 03:01 | Сообщение # 1
Бомба форума
Группа: Пользователи
Сообщений: 200
Репутация: 1
Статус: Не в сети


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

В демо версии панель использована для логина и регистрации пользователей.

1. Для начала между тегами нам необходимо поместить следующий фрагмент кода:

Code
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />        
  <link rel="stylesheet" href="/css/slide.css" type="text/css" media="screen" />        

  <!--[if lte IE 6]>        
  <script type="text/javascript" src="/js/pngfix/supersleight-min.js"></script>        
  <![endif]-->        

  <script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>        
  <!-- Sliding effect -->        
  <script src="/js/slide.js" type="text/javascript"></script>


Тут мы подключаем две таблицы стилей (одна для оформления внешнего вида панели, вторая - текста на ней). При большом желании можно эти 2 таблицы стилей объединить в одну. Далее идет хак для Internet Explorer 6. Он исправляет глюк прозрачночти .png изображений. И после этого подключается фреймворк jQuery и функция выезжания нашей панели. Обязательно помним про пути к файлам, если будете менять их месторасположение.

2. Далее в основном теле документа нам необходимо поместить следующий HTML код:

Code
<!-- Panel -->        
       <div id="toppanel">        
       <div id="panel">        
       <div class="content clearfix">        
       <div class="left">        
       <h1>Welcome to Web-Kreation</h1>        
       <h2>Sliding login panel Demo with jQuery</h2>        
       <p class="grey">You can put anything you want in this sliding panel: videos, audio, images, forms... The only limit is your imagination!</p>        
       <h2>Download</h2>        
       <p class="grey">To download this script go back to <a href="http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery" title="Download">article »</a></p>        
       </div>        
       <div class="left">        
       <!-- Login Form -->        
       <form class="clearfix" action="#" method="post">        
       <h1>Member Login</h1>        
       <label class="grey" for="log">Username:</label>        
       <input class="field" type="text" name="log" id="log" value="" size="23" />        
       <label class="grey" for="pwd">Password:</label>        
       <input class="field" type="password" name="pwd" id="pwd" size="23" />        
       <label><input name="rememberme" id="rememberme" type="checkbox" checked="checked" value="forever" /> Remember me</label>        
       <div class="clear"></div>        
       <input type="submit" name="submit" value="Login" class="bt_login" />        
       <a class="lost-pwd" href="#">Lost your password?</a>        
       </form>        
       </div>        
       <div class="left right">        
       <!-- Register Form -->        
       <form action="#" method="post">        
       <h1>Not a member yet? Sign Up!</h1>        
       <label class="grey" for="signup">Username:</label>        
       <input class="field" type="text" name="signup" id="signup" value="" size="23" />        
       <label class="grey" for="email">Email:</label>        
       <input class="field" type="text" name="email" id="email" size="23" />        
       <label>A password will be e-mailed to you.</label>        
       <input type="submit" name="submit" value="Register" class="bt_register" />        
       </form>        
       </div>        
       </div>        
       </div> <!-- /login -->        
       <!-- The tab on top -->        
       <div class="tab">        
       <ul class="login">        
       <li class="left"> </li>        
       <li>Hello Guest!</li>        
       <li class="sep">|</li>        
       <li id="toggle">        
       <a id="open" class="open" href="#">Log In | Register</a>        
       <a id="close" style="display: none;" class="close" href="#">Close Panel</a>        
       </li>        
       <li class="right"> </li>        
       </ul>        
       </div> <!-- / top -->        
              
       </div> <!--panel -->


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

Важно: данный урок рассказывает только о том, как сделать такую всплывающую панель. Он не рассказывает о том, как сделать регистрацию на сайте. Уроки по регистрации вскоре появятся на нашем сайте. Как говорится: "Не переключайтесь!"

Всего наилучшего!
 
  • Страница 1 из 1
  • 1
Поиск:

Copyright MyCorp © 2025 | Хостинг от uCoz