» »

Боковое меню авторизации как на 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">  
  <!--<p>Если у вас уже есть uID аккаунт, войдите, чтобы создать сайт:</p>-->  
  <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. В нижнюю часть сайта:

Код
<script type="text/javascript" src="/menulog/js/sidemenu.js"></script>


4. Устанавливаем стили (В верхнюю часть сайта) :
Код
<link href="/menulog/css/style.css" type="text/css" rel="stylesheet">


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.09.2017 Загрузок: 5 Просмотров: 373 Комментарий: (24)

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

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

Комментарий: 24
Kosten
Kosten 21.09.2017 18:091
+1
Так реально с социальными кнопками будет смотреться при вызове окна.

workman
workman 25.09.2017 01:172
-1
Да голимое это окно. Не понятно откуда содрал источник. Вы смотрели на стили и знаете сколько они весят? Я уже не говорю о скрипте, там вообще темный лес. Реально такое чувство как-будто тот кто это окно делал, не думал о том чтобы его уменьшить в 100 раз 04b Скоро выложу сюда нормальное окошко, которое можно открывать хоть справа хоть слева от сайта на разных кнопках. Но пока можно посмотреть на сайте который я сейчас делаю, прокрутив ледилинг вниз до отзывов и нажать на кнопку. Кстати, форма будет закрываться при клике в любой части экрана
Kosten
Kosten 25.09.2017 01:583
0
workman, не ругайся ))) человек как лучше хотел, что возможно кому пригодиться, но если запилищь, как новый материал разместим.
workman
workman 25.09.2017 05:154
-1
да просто порой вымораживают эти школята ... Ну вот есть очень маленький код который решит эти вопросы :)
workman
workman 25.09.2017 05:185
0
Короче!! Если надо я могу собрать полностью подобие того материала, но намного короче и НЕ так увесистей и потом закину на форум ...
Kosten
Kosten 25.09.2017 16:086
0
Ну если код меньше будет, а функций все останутся, так это замечательно.
workman
workman 25.09.2017 17:307
0
Ну я тебе в личке показал ссылкой то что хотел добиться.И думаю что ты оценишь положительно )))
Kosten
Kosten 25.09.2017 17:408
0
Посмотрел, так можно не одну функцию поставить, одна кнопка может идти как зайти пользователю, вторая на регистрацию.
workman
workman 25.09.2017 18:209
0
Да все что угодно можно запихнуть и хоть 100 таких окошек сделать на сайте. Главное к каждой кнопке прописать свой id
Kosten
Kosten 25.09.2017 18:2610
0
workman, давай только на регистрацию и на вызов окна, чтоб зайти под своим именем. Чисто функция за вход на сайт и рега, можно в одном окне.
workman
workman 25.09.2017 19:1511
0
Ну что-нибудЪ замучу)) Ты же знаешь, что у меня с фантазией все ривно ))
workman
workman 25.09.2017 19:1712
0
Можно также сделать отдельным окном сделать форму онлайн обращения к админу сайта, если вдруг кто пароль запамятовал, или еще какие вопросы личного характера, не заходя на сайт ))
Kosten
Kosten 25.09.2017 19:2813
0
Ждемс, если что на форуме залей, только распиши понятно по установке, потом на главную перекину.
workman
workman 26.09.2017 05:3714
0
А вот как у меня получилось буквально за 15 минут

workman
workman 26.09.2017 05:5615
0
Шо таки я предлагаю админу сделать с данной раздачей то?! 04b "Убить ее напрочь, чтобы user,ы не хапали эту порнуху (простите за пафос) к себе на сайты. Какой-то "школьник" получил двойку и придя со школы таким образом решил выместить злость и рипнул не Бог есть что не понимая что за что отвечает в скрипте и стилях 04b Нет бы самому написать что-то стоящее так он решил по изгаляться над всеми и показать какой он наверное самый умный. Хотелось бы обратиться к нему самому и спросить - Ты что самый умный7 04b А если да, то пиши сам подобие того что видишь и усовершенствуй на свое усмотрение а не кидай тут разную грязь, которая весит для сайта, как Белаз 11a Хоть кто-нибудь заглядывал в то что стоит на раздачу? Селектора другого сайта видите? 11a 11a 11a
workman
workman 26.09.2017 06:1116
0




andruha061
andruha061 26.09.2017 20:0917
+2
ты прежде чем оскорблять лучше бы головой подумал и внимательно прочитал описание. я не делал это окно а просто рипнул его с сайта uCoz.
все притензии ты можешь высказать им, что код тебе слишком большой или че там тебе не понравилось.
в планах было просто сделать рип. а не переделовать, улучшать и так далее.
а на счет школьника ты глубоко ошибаешься.
ДимДимыч
ДимДимыч 27.09.2017 06:2518
+3
Зачем обращать на это внимание. Что не видно что он в каждом посте форума и комментария себя восхваляет, не думаю что это не показ как он сам выражается школотство. Мол все в мире бл.ди а я такой хороший. А админу видать нравится когда вот так г. Модерат ведет себя на сайте. Ну ваши тараканы это ваши вам видней так значит нужно. Давно понял что воркман высокомерие.
workman
workman 27.09.2017 11:3619
0
Да. Представь себе. Я такой хороший и замечательный ))))Прям в точку попал )))
workman
workman 27.09.2017 11:4420
-1
Ты не понял сынок )) Я не именно этим оскорбить кого-то хотел. И это касалось ко всем кто головой не думает а только привык рипать чужие работы не думая о том что можно придумать и самому на подобие такого же и как-то более ее усовершенствовать. Об этом не подумал? Ну а если рипаешь, то посмотри внимательней на стили и в скрипт, и попробуй догадаться что за что там отвечает. Ты не разу видимо не слышал о том, что можно связать же пять скриптов отвечающие один за одну, другой за другую функцию и т.д.? У меня например на сайте который я сейчас делаю, в одном скрипте расположено несколько отвечающие также за другие функции. И теперь посмотри на скрипт который написал я и посмотри на тот который ты рипнули поймешь в чем разница. + рип в стилях, чуть ли не на весь сайт Ucoz,а так как он сделан на селекторах лидинга. Ну и на последок сообщу тебе о том что если и идет какой-то негатив от меня, то ты бы не распускал ...., а наоборот сделал хотьты хоть другие рипчики, какие-то выводы. Давайте ребята будем показывать именно свою работу а не рипы ....
Kosten
Kosten 27.09.2017 17:0921
-1
ДимДимыч, приветствую, ты почему сразу бучу поднимаешь, если что то и workman и пишет, то он по делу пишем, это не паблик MDK, где с мимасов кайфуют и залайкивают. Да, где то грубо, но палку не перегнул. Если бы человеку все через пожалуйста написали, то выхлоп не такой был, написал как думает. И ему ответили, так же как думает и не кто не чего не подтирал.

По поводу мне, что нравится и не нравится, давай я здесь сам разберусь предпочтениях, и не нужно писать, типа "Видать" или не "видать", это обращение в не куда.

И как совет, не нужно в чужие "терки" влазить, то всегда кто влазит, виновен остается.

Попрошу без флуда!
workman
workman 27.09.2017 21:1922
0
Кто рипнет с моего сайта данную форму обратной связи?! ))
Сразу скажу что можете не дергаться так как все-равно скрипт не найдете 04b 04b

Kosten
Kosten 27.09.2017 21:3923
0
Разве она здесь есть, был скрин, который просто показывал, что можно разные окна сделать и как пример приведен.
workman
workman 27.09.2017 21:4424
0
НУ я вот и показал ... Теперь такое окно обратной связи на сайте переделано по другому
avatar