ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Боковое меню авторизации как на uCoz

Боковое меню авторизации как на uCoz

Отличное решение регистраций на сайте, где при клике с правой стороны появляется темное окно с данными прохождение зарегистрироваться. Давно приглянулось боковое меню авторизации как на официальном сайте uCoz. Решил сделать себе точно такое же. Просто собрал рабочий скрипт с сайта uCoz. Очень долго мучился с адаптивностью данного скрипта, ибо в стилях CSS очень сильно намудрили.

Пришлось исправлять отступы и настраивать все по новому, но в любом случае получилось очень даже не плохо.
Сразу хочу сказать что меню не много переделал, добавил логотип, и вместо кнопки UID сделал кнопку регистрации. Главная особенность скрипта в том, что минимальное количество файлов (упаковал все стили в один файл), легкая установка и практичность, адаптивный дизайн.

Установка:

1. Загружаем папку menulog к себе на сайт.

2. В верхнюю часть сайта (после как на сайте uCoz) вставляем код :

Код

<?if($USER_LOGGED_IN$)?><?else?>
<section class="user-side pushy2 pushy-right">
  <div class="log-form">
  <span class="close hairline menu-btn2"></span>
  <img src="/menulog/img/uLogo.png" width="128" height="128">
  <h3>Вход в учетную запись</h3>
  <p>Авторизация в системе uCoz осуществляется через учетные данные uID</p>
  <div class="uid-login">
  
  <a class="uid-btn" href="/register">Регистрация</a>
  </div>
  <div class="fast-reg">
  <p class="title">Войдите пожалуйста через:</p>
  <center>$LOG_FORM$</center>
  </div>
  <span class="reg-comment">Если вы хотите привязать уже существующий uID аккаунт к аккаунту социальной сети, то сначала войдите через uID, а затем выполните привязку.</span>
  </div>
  </section><?endif?>

3. В нижнюю часть сайта:

Код

4. Устанавливаем стили (В верхнюю часть сайта) :

Код

5. Устанавливаем кнопку вызова:

Код

<?if($USER_LOGGED_IN$)?><a href="$LOGOUT_LINK$">Выход</a><?else?><a class="menu-btn2" href="javascript://">Вход</a><?endif?>

Можете использовать другую кнопку, просто добавьте в CLASS : menu-btn2

На этом установка закончена!

Демонстрация: 7uarts.ucoz.org/7uarts/menulog/html.html
Источник: 7uarts.ucoz.org

21 Сентября 2017 Загрузок: 8 Просмотров: 2818 Комментариев: (26)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

andruha061

Похожие материалы

Оставь свой отзыв

Комментарии: 26
Порядок вывода комментариев: Kosten 21 Сентября 2017 18:09¹ +1 Так реально с социальными кнопками будет смотреться при вызове окна. workman 25 Сентября 2017 01:17² -1 Да голимое это окно. Не понятно откуда содрал источник. Вы смотрели на стили и знаете сколько они весят? Я уже не говорю о скрипте, там вообще темный лес. Реально такое чувство как-будто тот кто это окно делал, не думал о том чтобы его уменьшить в 100 раз Скоро выложу сюда нормальное окошко, которое можно открывать хоть справа хоть слева от сайта на разных кнопках. Но пока можно посмотреть на сайте который я сейчас делаю, прокрутив ледилинг вниз до отзывов и нажать на кнопку. Кстати, форма будет закрываться при клике в любой части экрана Kosten 25 Сентября 2017 01:58³ 0 workman, не ругайся ))) человек как лучше хотел, что возможно кому пригодиться, но если запилищь, как новый материал разместим. workman 25 Сентября 2017 05:15⁴ -1 да просто порой вымораживают эти школята ... Ну вот есть очень маленький код который решит эти вопросы :) workman 25 Сентября 2017 05:18⁵ 0 Короче!! Если надо я могу собрать полностью подобие того материала, но намного короче и НЕ так увесистей и потом закину на форум ... Kosten 25 Сентября 2017 16:08⁶ 0 Ну если код меньше будет, а функций все останутся, так это замечательно. workman 25 Сентября 2017 17:30⁷ 0 Ну я тебе в личке показал ссылкой то что хотел добиться.И думаю что ты оценишь положительно ))) Kosten 25 Сентября 2017 17:40⁸ 0 Посмотрел, так можно не одну функцию поставить, одна кнопка может идти как зайти пользователю, вторая на регистрацию. workman 25 Сентября 2017 18:20⁹ 0 Да все что угодно можно запихнуть и хоть 100 таких окошек сделать на сайте. Главное к каждой кнопке прописать свой id Kosten 25 Сентября 2017 18:26¹⁰ 0 workman, давай только на регистрацию и на вызов окна, чтоб зайти под своим именем. Чисто функция за вход на сайт и рега, можно в одном окне. workman 25 Сентября 2017 19:15¹¹ 0 Ну что-нибудЪ замучу)) Ты же знаешь, что у меня с фантазией все ривно )) workman 25 Сентября 2017 19:17¹² 0 Можно также сделать отдельным окном сделать форму онлайн обращения к админу сайта, если вдруг кто пароль запамятовал, или еще какие вопросы личного характера, не заходя на сайт )) Kosten 25 Сентября 2017 19:28¹³ 0 Ждемс, если что на форуме залей, только распиши понятно по установке, потом на главную перекину. workman 26 Сентября 2017 05:37¹⁴ 0 А вот как у меня получилось буквально за 15 минут workman 26 Сентября 2017 05:56¹⁵ 0 Шо таки я предлагаю админу сделать с данной раздачей то?! "Убить ее напрочь, чтобы user,ы не хапали эту порнуху (простите за пафос) к себе на сайты. Какой-то "школьник" получил двойку и придя со школы таким образом решил выместить злость и рипнул не Бог есть что не понимая что за что отвечает в скрипте и стилях Нет бы самому написать что-то стоящее так он решил по изгаляться над всеми и показать какой он наверное самый умный. Хотелось бы обратиться к нему самому и спросить - Ты что самый умный7 А если да, то пиши сам подобие того что видишь и усовершенствуй на свое усмотрение а не кидай тут разную грязь, которая весит для сайта, как Белаз Хоть кто-нибудь заглядывал в то что стоит на раздачу? Селектора другого сайта видите? workman 26 Сентября 2017 06:11¹⁶ 0 Код <?if($USER_LOGGED_IN$)?><a href="$LOGOUT_LINK$">Выход</a><?else?><div id="but" data-for="w1">Вход</div><?endif?> Код <!-- начало формы входа --><?if($USER_LOGGED_IN$)?><?else?> <div class="win1" id="w1" style="display: none;"> <div class="win1-hed"> <h2>Вход на сайт</h2> <div style="display: inherit;text-align: center;"><img src="/images/logoUcoz.png" border="0" alt="" /></div> <div class="win1-text"> <p>Если Вы впервые на нашем сайте<br>предлагаем создать учетные данные на uID<br> и войти на сайт</p> </div> <div class="win1-uid"><a href="/register">Создать uID</a> </div> <div class="win1-forma"> <p>или войдите через:</p> <p>$LOG_FORM$</p> </div> <div class="win1-footer">Чтобы закрыть форму<br> кликните мышкой в любой части экрана</div> </div> </div><?endif?> <!-- конец формы входа --> Код <!---стили---> <style> #but{margin:0px auto;cursor:pointer} .win1 h2{font-family:Jura-Medium;color:#fff;text-align:center;padding-top:40px;} .win1-text,.win1-forma p{font-family:Jura-Medium;color:#fff;text-align:center;} .win1-forma{margin:10px} .win1-footer{font-family:Jura-Medium;color:#666;padding-top:20px;font-size:13px;text-align:center} .win1{top:0;right:0;background:#141414;height:100%;width:450px;position:fixed;z-index:999} .win1-hed{margin:0px 45px;} .win1-uid a{text-decoration:none;color:#fff;font-weight:500;} .win1-uid{text-align:center;margin:5vh auto;border:3px solid #4072c5;background:transparent;padding-left:0px;height:61px;line-height:55px;width:255px;border-radius:72px;display:block;font-size:16px;} </style> <!---конец стили---> Код <!---начало скрипт---> <script type="text/javascript"> $(document).ready(function(){$(document).on("click","#but",function(t){t.preventDefault();var o=$(this),e=$("#"+o.data("for")),c=e.attr("id");"block"==e.css("display")\|\|e.stop().fadeIn(0),$(document).off("click.windowouter"+c).on("click.windowouter"+c,function(t){$(t.target);var n=$(e).find("");$(t.target).is(o)?($(document).off("click.windowouter"+c),e.stop().fadeOut(1e3)):$(t.target).is(e)\|\|$(t.target).is(n)\|\|($(document).off("click.windowouter"+c),e.stop().fadeOut(1e3))})})}); </script> <!---конец скрипт---> andruha061 26 Сентября 2017 20:09¹⁷ +2 ты прежде чем оскорблять лучше бы головой подумал и внимательно прочитал описание. я не делал это окно а просто рипнул его с сайта uCoz. все притензии ты можешь высказать им, что код тебе слишком большой или че там тебе не понравилось. в планах было просто сделать рип. а не переделовать, улучшать и так далее. а на счет школьника ты глубоко ошибаешься. ДимДимыч 27 Сентября 2017 06:25¹⁸ +3 Зачем обращать на это внимание. Что не видно что он в каждом посте форума и комментария себя восхваляет, не думаю что это не показ как он сам выражается школотство. Мол все в мире бл.ди а я такой хороший. А админу видать нравится когда вот так г. Модерат ведет себя на сайте. Ну ваши тараканы это ваши вам видней так значит нужно. Давно понял что воркман высокомерие. workman 27 Сентября 2017 11:36¹⁹ 0 Да. Представь себе. Я такой хороший и замечательный ))))Прям в точку попал ))) workman 27 Сентября 2017 11:44²⁰ -1 Ты не понял сынок )) Я не именно этим оскорбить кого-то хотел. И это касалось ко всем кто головой не думает а только привык рипать чужие работы не думая о том что можно придумать и самому на подобие такого же и как-то более ее усовершенствовать. Об этом не подумал? Ну а если рипаешь, то посмотри внимательней на стили и в скрипт, и попробуй догадаться что за что там отвечает. Ты не разу видимо не слышал о том, что можно связать же пять скриптов отвечающие один за одну, другой за другую функцию и т.д.? У меня например на сайте который я сейчас делаю, в одном скрипте расположено несколько отвечающие также за другие функции. И теперь посмотри на скрипт который написал я и посмотри на тот который ты рипнули поймешь в чем разница. + рип в стилях, чуть ли не на весь сайт Ucoz,а так как он сделан на селекторах лидинга. Ну и на последок сообщу тебе о том что если и идет какой-то негатив от меня, то ты бы не распускал ...., а наоборот сделал хотьты хоть другие рипчики, какие-то выводы. Давайте ребята будем показывать именно свою работу а не рипы .... Kosten 27 Сентября 2017 17:09²¹ -1 ДимДимыч, приветствую, ты почему сразу бучу поднимаешь, если что то и workman и пишет, то он по делу пишем, это не паблик MDK, где с мимасов кайфуют и залайкивают. Да, где то грубо, но палку не перегнул. Если бы человеку все через пожалуйста написали, то выхлоп не такой был, написал как думает. И ему ответили, так же как думает и не кто не чего не подтирал. По поводу мне, что нравится и не нравится, давай я здесь сам разберусь предпочтениях, и не нужно писать, типа "Видать" или не "видать", это обращение в не куда. И как совет, не нужно в чужие "терки" влазить, то всегда кто влазит, виновен остается. Попрошу без флуда!* workman 27 Сентября 2017 21:19²² 0 Кто рипнет с моего сайта данную форму обратной связи?! )) Сразу скажу что можете не дергаться так как все-равно скрипт не найдете Kosten 27 Сентября 2017 21:39²³ 0 Разве она здесь есть, был скрин, который просто показывал, что можно разные окна сделать и как пример приведен. workman 27 Сентября 2017 21:44²⁴ 0 НУ я вот и показал ... Теперь такое окно обратной связи на сайте переделано по другому waak 13 Января 2018 12:34²⁶ 0 Что за чушь? я рипну 5 минут! любую форму с вашего сайта вы понимаете для работы того окна нужно всего то пару строк кода плюс форма
1 2 »