Форма входа |
Меню сайта |
Главное Меню Главная страница Помощь Web мастеру Связь с админом Залить фото Статьи Форум Всё для ucoz Шаблоны для форума Светлые шаблоны Тёмные шаблоны Иконки групп Иконки разные Скрипты Другое Темы форума Бесплатные услуги Раскрутка сайтов Аренда(реклама) Заработок |
Клик-Клик |
Календарь | ||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||
Опрос |
Архив сайта |
Статистика |
Онлайн всего: 1 Гостей: 1 Пользователей: 0 |
Наш банер |
|
Мини-чат |
Тэги сайта |
скрипты для 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"Красивая всплывающая панель для вашего сайта", все ссылки были в рабочем состоянии | |
|
Всего комментариев: 0 | |