Форма входа
Меню сайта
Главное Меню
Главная страница
Помощь Web мастеру
Связь с админом
Залить фото
Статьи
Форум
Всё для ucoz
Шаблоны для форума
Светлые шаблоны
Тёмные шаблоны
Иконки групп
Иконки разные
Скрипты
Другое
Темы форума
Бесплатные услуги
Раскрутка сайтов
Аренда(реклама)
Заработок
Клик-Клик



Календарь
«  Июль 2010  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031
Опрос
Откуда вы узнали о нас?
Всего ответов: 382
Архив сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Облоко тэгов
Закрывающийся блок файлов для Counter Strike Source NEW страница 404 Адаптация форума Source-Community By SToRM Прикольные для UcoZ Cкачать шаблон Counter-Strike для ucoz Шаблон для ucoz You foto Плавное увеличение картинки для ucoz Музыкальный шаблон для uCoz Мини-профиль Мини-профиль для uCoz Code и Quote для uCoz иконки by doker + PSD красивый шаблон для Ucoz Пак иконок групп на разную тематику Шаблон форума сайта ucoz grey под gta 4 Кнопки для UcoZ CS Portal для ucoz Мега состав клана! голубой вид новостей для ucoz
Наш банер
Всё для ucoz

Мини-чат
Тэги сайта

скрипты для ucoz, ucoz, шаблоны для ucoz, иконки групп для ucoz, гсщя, всё для ucoz, скачать бесплатно шаблоны для ucoz, скрипты для ucoz без регистрации

Главная » 2010 » Июль » 27 » Красивая всплывающая панель для вашего сайта
20:52

Красивая всплывающая панель для вашего сайта


Демо
В сегодняшнем уроке я покажу Вам, как красивую всплывающую панель для сайта. Ее можно использовать как форму для логина и регистрации, можно как меню, также туда можно поместить карту сайта. Все зависит от Вашей фантазии.
Для начала между тегами нам необходимо поместить следующий фрагмент кода:
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 и функция выезжания нашей панели. Обязательно помним про пути к файлам, если будете менять их месторасположение.
Далее в основном теле документа нам необходимо поместить следующий 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 -->

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


Чтобы скачать Красивая всплывающая панель для вашего сайта , нажмите по рекламе выше, потом кликайте по появившйеся ссылке.



Перед тем как

бесплатно

скачать

"Красивая всплывающая панель для вашего сайта"

,
проверьте ВСЕ ссылки на работоспособность. На 27.07.2010

"Красивая всплывающая панель для вашего сайта"

,
все ссылки были в рабочем состоянии
Категория: Скрипты | Просмотров: 1440 | Добавил: autumn | Теги: красивая, Вашего, панель, всплывающая, сайта, для | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]