» »

Боковое меню авторизации как на 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
2017-09-21 Загрузок: 7 Просмотров: 1081 Комментарий: (26)

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

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

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

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

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




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

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

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

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

Kosten
Kosten 2017-09-27 21:3923
0
Разве она здесь есть, был скрин, который просто показывал, что можно разные окна сделать и как пример приведен.
workman
workman 2017-09-27 21:4424
0
НУ я вот и показал ... Теперь такое окно обратной связи на сайте переделано по другому
waak
waak 2018-01-13 12:3426
0
Что за чушь? я рипну 5 минут! любую форму с вашего сайта вы понимаете для работы того окна нужно всего то пару строк кода плюс форма
1 2 »
avatar