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

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

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

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

Code

<div id="toppanel">
  <div id="panel">
  <div class="content clearfix">
  <div class="left">
  <h1>Добро пожаловать на Webo4ku</h1>
  <h2>Красивая всплывающая панель для сайта ucoz на jQuery</h2>
  <p class="grey">Вы можете поместить что-нибудь, что Вы хотите в этой скользящей группе: видео, аудио, изображения, формы... </p>
  <h2>Download</h2>
  <p class="grey">Чтобы загрузить этот подлинник возвращаются к статье» <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">
  
  <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">
  
  <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> 
  
  <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> 

  </div>

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

Скачать файл

Пожаловаться на файл

Теги:

красивая, ucoz, скрипты для uCoz, панель, всплывающая, сайта, для

Категория: Скрипты для ucoz

Добавил: mega18

Загрузок: 123

Вы сейчас просматриваете Красивая всплывающая панель для сайта ucoz. Данный файл находится в категории Скрипты для ucoz. Чтобы увидеть другие файлы из этой категории, перейдите по этой ссылке: Скрипты для ucoz. Для того чтобы скачать Красивая всплывающая панель для сайта ucoz нажмите на кнопку СКАЧАТЬ ФАЙЛ выше. Надеемся вам понравился файл Красивая всплывающая панель для сайта ucoz и пригодился. По всем вопросам обращайтесь в чат на сайте или к администрации.

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]