Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

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


Загрузить материал (23.9 Kb)
Материал пренадлежит данному сайту и ссылка на источник обязательна.
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код

Боковое меню авторизации как на uCoz (от 7uarts)

Дата и время публикации : 21.Сен.17 в 16:07 | Раздел : Скрипты для uCoz


Параметр Значение
Дата публик. 21.Сен.17, Четверг, 16:07
Размер файла 23.9 Kb
Авторский
Адапт. дизайн
Обновления Не производились
Просмотрен 218
Загружен 9

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

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

Сразу хочу сказать что меню не много переделал, добавил логотип, и вместо кнопки UID сделал кнопку регистрации.

Главная особенность скрипта в том, что минимальное количество файлов (упаковал все стили в один файл), легкая установка и практичность, адаптивный дизайн.


Установка :

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

2. В верхнюю часть сайта (после </header> как на сайте 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. В нижнюю часть сайта :

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


4. Устанавливаем стили : 

1 Вариант (Вставить в <<Управление дизайном CSS>> ) :

section#personal-page{background:#9a6e5d;background:-moz-radial-gradient(center, ellipse cover, #9a6e5d 0%, #7487a8 100%);background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #9a6e5d), color-stop(100%, #7487a8));background:-webkit-radial-gradient(center, ellipse cover, #9a6e5d 0%, #7487a8 100%);background:-o-radial-gradient(center, ellipse cover, #9a6e5d 0%, #7487a8 100%);background:-ms-radial-gradient(center, ellipse cover, #9a6e5d 0%, #7487a8 100%);background:radial-gradient(ellipse at center, #9a6e5d 0%, #7487a8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9a6e5d', endColorstr='#7487a8', GradientType=1);}
section#personal-page #carousel-personal-page{padding-left:20px;padding-top:70px;}
section#personal-page #carousel-personal-page .viewport{height:auto;background-color:#D2D2D2;-webkit-box-shadow:0px 5px 5px 0px rgba(50, 50, 50, 0.25);-moz-box-shadow:0px 5px 5px 0px rgba(50, 50, 50, 0.25);box-shadow:0px 5px 5px 0px rgba(50, 50, 50, 0.25);}
section#personal-page #carousel-personal-page .viewport img{width:100%;height:auto;top:1px;position:relative;max-height: 39vw;}
section#personal-page #carousel-personal-page{height:100vh;overflow:hidden;}
section#personal-page .side-right #info-personal-page{padding-bottom:0;padding-top:19%;padding-right:20%;padding-left:10%;color:#ffffff;}
section#personal-page .side-right #info-personal-page p{font-size:24px;font-weight:100;margin-bottom:15px;color:#ffffff;}
section#personal-page .side-right #info-personal-page h2{font-weight:100;font-size:36px;color:#ffffff;margin-bottom:30px;}
section#personal-page .side-right #info-personal-page p.lead{font-weight:100;font-size:70px;line-height:normal;color:#ffffff;margin-bottom:20px;}
section#personal-page .side-right #info-personal-page a.button{margin:40px 0;display:block;float:none;background-color:#D54340;}
section#personal-page .side-right #info-personal-page a.button:hover{color:#ffffff;background:#de6c6a;}
section#prof-templates{padding:0;}
section#prof-templates #info-prof-templates{padding-bottom:0;color:#000000;position:relative;padding-left:4.5%;padding-top:4.5%;}
section#prof-templates #info-prof-templates .box,
section#prof-templates #info-prof-templates .box-vew-content{z-index:10;}
section#prof-templates #info-prof-templates p{font-size:24px;font-weight:100;margin-bottom:15px;color:#000000;}
section#prof-templates #info-prof-templates p.p-first{width:40%;margin-bottom:0;}
section#prof-templates #info-prof-templates p.p-second{width:30%;}
section#prof-templates #info-prof-templates h2{font-weight:100;font-size:36px;color:#000000;margin-bottom:30px;}
section#prof-templates #info-prof-templates p.lead{font-weight:100;line-height:normal;color:#000000;margin-bottom:20px;}
section#prof-templates #info-prof-templates a.button{margin:40px 0;display:block;float:none;background-color:#D49026;margin-bottom:0;}
section#prof-templates #info-prof-templates a.button:hover{color:#000000;background:#dfa64e;}
section#prof-templates #info-prof-templates #image-cards{text-align:right;position:absolute;height:100%;bottom:0;background:transparent;right:0;z-index:1;width:63.5%;}
section#prof-templates #info-prof-templates #image-cards img{width:auto;position:absolute;bottom:0;z-index:1;-webkit-transition:0.2s all ease;-moz-transition:0.2s all ease;-ms-transition:0.2s all ease;-o-transition:0.2s all ease;transition:0.2s all ease;}
section#prof-templates #info-prof-templates #image-cards img:hover{z-index:2;margin-bottom:30px;}
section#prof-templates #info-prof-templates #image-cards img.pic1{height:51vh;right:72%;}
section#prof-templates #info-prof-templates #image-cards img.pic2{height:62vh;right:52%;}
section#prof-templates #info-prof-templates #image-cards img.pic3{height:73vh;right:28%;}
section#prof-templates #info-prof-templates #image-cards img.pic4{height:83vh;right:0;}
section#uran-browser{padding:0;background:#2f2f45;background:-moz-linear-gradient(top, #2f2f45 0%, #7b7bab 99%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #2f2f45), color-stop(99%, #7b7bab));background:-webkit-linear-gradient(top, #2f2f45 0%, #7b7bab 99%);background:-o-linear-gradient(top, #2f2f45 0%, #7b7bab 99%);background:-ms-linear-gradient(top, #2f2f45 0%, #7b7bab 99%);background:linear-gradient(to bottom, #2f2f45 0%, #7b7bab 99%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f2f45', endColorstr='#7b7bab', GradientType=0);}
section#uran-browser #image-uran-browser{margin-top:70px;width:98%;margin-left:10px;}
section#uran-browser #image-uran-browser .viewport{background-color:#37354c;}
section#uran-browser #image-uran-browser .viewport.tall{height:100vh;}
section#uran-browser #image-uran-browser .viewport.short{height:auto;}
section#uran-browser #image-uran-browser .viewport img{width:100%;height:auto;}
section#uran-browser #image-uran-browser .address-bar{overflow:hidden;text-overflow:ellipsis;}
section#uran-browser .side-right #info-uran-browser{padding-bottom:0;padding-top:20%;padding-right:15%;padding-left:8%;color:#ffffff;}
section#uran-browser .side-right #info-uran-browser p{font-size:24px;font-weight:100;margin-bottom:15px;color:#ffffff;}
section#uran-browser .side-right #info-uran-browser h2{font-weight:100;font-size:36px;color:#ffffff;margin-bottom:30px;}
section#uran-browser .side-right #info-uran-browser p.lead{font-weight:100;font-size:70px !important;line-height:normal;color:#ffffff;margin-bottom:20px;}
section#uran-browser .side-right #info-uran-browser a.button{margin:40px 0;display:block;float:none;background-color:#894C94;}
section#uran-browser .side-right #info-uran-browser a.button:hover{color:#ffffff;background:#a464af;}
.footer-section{background-color:#ffffff;padding:100px 0 50px;}
.footer-section .column-logo{text-align:center;}
.footer-section .column-logo img{width:150px;height:126px;margin-bottom:55px;}
.footer-section .column-logo p{white-space:nowrap;color:#989898;font-weight:200;font-size:16px !important;}
.footer-section .column-menu{font-size:15px;}
.footer-section .column-menu ul li{margin-bottom:13px;}
.footer-section .column-menu strong{font-weight:600;}
.footer-section .column-menu a{color:#000000;}
.footer-section .column-menu .social-links a:hover, .footer-section .column-menu .social-links a:active {text-decoration: none;}
.footer-section .column-menu a:active{color:#000000;text-decoration:underline;}
.footer-section .column-menu a.special{color:#F71C1B;}
.footer-section .column-menu a.special:hover,
.footer-section .column-menu a.special:active{color:#F71C1B;text-decoration:underline;}
.footer-section .payment-links {/*position:relative;left:-340px*/margin-left:-130px;margin-top:-27px;}
.footer-section .payment-links .visa { margin-right:12px }
.footer-section .payment-links .mastercard { margin-right:5px }
.footer-section .social-links {clear:both;margin:50px 0 0;overflow: hidden;}
.footer-section .social-links a{width:28px;height:28px;display:block;float:left;margin-right:15px;text-align:center;-webkit-border-radius:28px;-moz-border-radius:28px;border-radius:28px;-webkit-transition:0.2s all ease;-moz-transition:0.2s all ease;-ms-transition:0.2s all ease;-o-transition:0.2s all ease;transition:0.2s all ease;}
.footer-section .social-links a:last-child{margin-right:0;}
.footer-section .social-links a i:before{line-height:28px;color:#ffffff;}
.footer-section .social-links .facebook{background-color:#6685B6;}
.footer-section .social-links .facebook:hover,
.footer-section .social-links .facebook:active{background-color:#89a1c6;}
.footer-section .social-links .google{background-color:#E45D4C;}
.footer-section .social-links .google:hover,
.footer-section .social-links .google:active{background-color:#eb8578;}
.footer-section .social-links .twitter{background-color:#54C0DD;}
.footer-section .social-links .twitter:hover,
.footer-section .social-links .twitter:active{background-color:#7fd0e5;}
@media (max-width:992px){.footer-section{position:static;}
    .footer-section .footer-bar .row{width:100%;}
    section#personal-page #carousel-personal-page .viewport img{max-height: 63vw;}
}
section#personal-page .side-left{height:100vh;}
section#personal-page #carousel-personal-page{bottom:0;position:absolute;width:100%;height:100vh;}
section#personal-page .viewport{min-height:0;height:100vh;}
section#prof-templates #info-prof-templates{height:100vh;}
section#uran-browser .viewport{min-height:0;width:100%;left:0;}
.pushy{-webkit-transition:0.2s all ease;-moz-transition:0.2s all ease;-ms-transition:0.2s all ease;-o-transition:0.2s all ease;transition:0.2s all ease;}
.pushy-left{transform:translate3d(-300px, 0, 0);}
.pushy-right.pushy-open{right:0;transform:none;}
.navigation .logo{z-index:99;}
.nav-button a{width:22px;height:16px;position:relative;background-color:transparent;background-image:none;position:absolute;z-index:999;left:0;cursor:pointer;top:25px;left:30px;}
.nav-button a span{display:block;width:22px;height:3px;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;margin-bottom:3px;background-color:#3F3F3F;}
.nav-button a:hover span{background-color:#000;}
.nav-button a .over-box{position:absolute;top:0;left:0;width:22px;height:16px;background-color:transparent;z-index:9999;}
.pushy-active .nav-button a {position: fixed;}
.nav-button a.light span{background-color:#fff !important;}
.nav-button a.dark span{background-color:#3F3F3F !important;}
.pushy-active .nav-button a{z-index:22;}
.pushy-active .nav-button a span{background-color:#fff !important;}
.pushy-active .nav-button a:hover span{background-color:#d4d4d4;}
.main-nav{top:0;width:0;height:100%;background:#000000;padding-top:80px;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;position:fixed;left:0;z-index:21;overflow:auto;}
.main-nav.pushy-open{width:300px;}
.main-nav a{display:block;color:white;padding:8px 30px;white-space:nowrap;font-size:14px;word-break:normal;}
.main-nav a:hover,
.main-nav a:focus{background-color:#1a1a1a;text-decoration:none;}
.main-nav:after{content:'';position:absolute;top:0;right:0;height:100%;width:30px;}
.main-nav .sub{position:absolute;width:100%;bottom:15px;}
.main-nav .sub .sign-in{text-transform:uppercase;}
@media (max-height:600px){.main-nav .sub{position:static;}
}
.pushy-active .site-overlay,
.pushy-active2 .site-overlay2,
.active-over{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:19;background-color:rgba(0, 0, 0, 0.5);-webkit-animation:fade 500ms;-moz-animation:fade 500ms;-o-animation:fade 500ms;animation:fade 500ms;}

.user-side{padding-top:6%;font-family:'Avenir Next', sans-serif;top:0;width:0;height:100%;background:#2B2E31;padding-top:80px;z-index:2;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;transition:all 0.3s ease;position:fixed;width:540px;max-width:94%;right:-500%;z-index:1000;overflow:auto;padding:5%;text-align:center;overflow:hidden;}
.user-side .close{position:relative;display:inline-block;top:30px;right:30px;width:34px;height:34px;overflow:hidden;position:absolute;opacity:1;}
.user-side .close:hover:before,
.user-side .close:hover:after{background:#ffffff;}
.user-side .close:before,
.user-side .close:after{content:'';position:absolute;height:1px;width:100%;top:50%;left:0;margin-top:-1px;background:#D0D0D1;}
.user-side .close:before{transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);}
.user-side .close:after{transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
.user-side .login-form{margin-bottom:45px;}
.user-side .login-form label{display:none;}
.user-side .login-form .form-group{margin-bottom:30px;}
.user-side .login-form input{-webkit-transition:0.2s all ease;-moz-transition:0.2s all ease;-ms-transition:0.2s all ease;-o-transition:0.2s all ease;transition:0.2s all ease;height:72px;background-color:#8C908B;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;border:none;color:#ffffff;padding-left:35px;line-height:72px;font-size:25px;font-weight:200;}
.user-side .login-form input:focus{background-color:#999c98;}
.user-side .login-form input::-webkit-input-placeholder{color:#B6B7B6;}
.user-side .login-form input:-moz-placeholder{color:#B6B7B6;}
.user-side .login-form input::-moz-placeholder{color:#B6B7B6;}
.user-side .login-form input:-ms-input-placeholder{color:#B6B7B6;}
.user-side .login-form button{-webkit-transition:0.2s all ease;-moz-transition:0.2s all ease;-ms-transition:0.2s all ease;-o-transition:0.2s all ease;transition:0.2s all ease;background-color:#6CAF24;height:75px;display:block;font-size:25px;font-weight:200;color:#ffffff;width:100%;text-align:center;border:none;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;}
.user-side .login-form button:hover{background-color:#79c428;}
.user-side .uid-login p{color:#BBBBBC;margin-bottom:35px;font-size:20px !important;}
.user-side .uid-login .uid-btn{-webkit-transition:0.2s all ease;-moz-transition:0.2s all ease;-ms-transition:0.2s all ease;-o-transition:0.2s all ease;transition:0.2s all ease;-webkit-border-radius:72px;-moz-border-radius:72px;border-radius:72px;width:100%;display:block;background-color:#F2F2F2;font-size:25px;color:#8A898B;height:72px;padding-left:60px;line-height:72px;position:relative;max-width:350px;margin:0 auto;}
.user-side .uid-login .uid-btn:hover{color:#575658;}
.user-side .uid-login .uid-btn:hover:before{background-color:#519dfb;}
.user-side .uid-login .uid-btn:before{-webkit-transition:0.2s all ease;-moz-transition:0.2s all ease;-ms-transition:0.2s all ease;-o-transition:0.2s all ease;transition:0.2s all ease;-webkit-border-radius:72px;-moz-border-radius:72px;border-radius:72px;height:72px;width:72px;display:inline-block;content:'';background:url('../images/u-logo.svg') no-repeat center #388ffa;background-size:35px 35px;position:absolute;top:0;left:-1px;}

@media (max-width:1600px){a.button{width:230px;}
    section#choice #choice-for-shop a.button{width:240px;font-size:18px !important;}
    section#for-business .side-info{width:35vw;}
    section#for-me p.lead img{height:90px;}
    section#for-me .top-part{padding-top:3%;}
    section#my-sites #image-my-sites img{bottom:-29vh;top:inherit;}
}
@media (max-width:1250px){section#choice a.button{width:230px;}
    section#for-me p.info{padding:0px 28%;}
    section#my-sites .side-info{padding-right:5%;}
    section#prof-templates #image-cards img.pic1{height:41vh !important;right:62% !important;}
    section#prof-templates #image-cards img.pic2{height:52vh !important;right:42% !important;}
    section#prof-templates #image-cards img.pic3{height:63vh !important;right:18% !important;}
    section#prof-templates #image-cards img.pic4{height:73vh !important;right:-20% !important;}
    .footer-section .social-links { margin-top:80px }
}
@media (max-width:1350px){section#prof-templates #info-prof-templates p.p-first{width:32%;}
    section#prof-templates #info-prof-templates p.p-second{width:24%;}
}
@media (max-width:992px){section#choice header.main-header{margin-bottom:150px !important;}
    section#choice h2{padding-bottom:30px !important;}
    section#choice #choice-for-me{margin-bottom:20px;}
    section#choice #choice-for-business{margin-bottom:35px !important;}
    section#choice a.button{width:20%;border-width:2px;font-size:18px !important;}
    section#choice .or{position:static !important;line-height:normal !important;height:auto !important;margin-bottom:20px !important;border:none;}
    section#choice .or span{position:static !important;}
    section#choice .or span:after{display:none !important;}
    section#choice #choice-for-shop{border:none;}
    section#choice #choice-for-shop h2{padding-bottom:0 !important;}
    section#choice #choice-for-shop .button-wrap{width:auto;}
    section#choice #choice-for-shop a.button{width:100%;}
    section#choice .to-next-section{display:none;}
    section#for-me .bottom-part{position:relative !important;height:auto !important;bottom:0 !important;}
    section#for-me .bottom-part .slider-constructor{height:auto;}
    section#for-me .bottom-part .slider-constructor.side p{padding:0 !important;}
    section#for-me .bottom-part #slider-pad{width:80% !important;}
    section#for-me .bottom-part #slider-pad.animated.fadeOutDown{display:block;}
    section#for-me .bottom-part #slider-pad .switcher{display:none;}
    section#for-me p.lead img{min-width:0;min-height:0;width:300px;height:auto;}
    section#for-me p.info{padding:0px 22%;}
    section#for-business .side-right{padding-top:0;}
    section#for-business .side-right #business-info{padding-top:0;padding-bottom:30px;padding-left:10%;padding-right:10%;}
    section#for-business .side-right #business-info h2{margin-top:0;}
    section#for-business .side-info{width:auto;}
    section#web-shops .side-left #info-web-shops{padding-top:30px;padding-left:10%;padding-right:10%;margin-bottom:30px;}
    section#web-shops .side-left #info-web-shops a.button{margin-bottom:20px;}
/*
    section#web-shops .side-right{height:auto !important;position:static !important;}
    section#web-shops .side-right #slider-web-shops-box{position:static;z-index:1;}
    section#web-shops .side-right #slider-web-shops-box{position:relative;height:auto;}
    section#web-shops .side-right #slider-web-shops-box .viewport{position:absolute;transform:inherit;top:0;}
    section#web-shops .side-right #slider-web-shops-box .cover{position:static;transform:inherit;}
*/
    section#my-sites .side-left #info-my-sites{padding:30px;padding-left:10%;padding-right:10%;}
    section#my-sites #image-my-sites img{position:static;margin:0 auto;display:block;width:60%;margin-bottom:60px;}
    section#my-sites .side-right{height:auto !important;}
    section#personal-page .side-left{height:auto;}
    section#personal-page .side-left #carousel-personal-page{position:static;padding-left:0;width:90%;margin:0 auto;height:auto;}
    section#personal-page .side-right #info-personal-page{padding-bottom:30px;padding-top:30px;padding-right:10%;padding-left:10%;}
    section#prof-templates #info-prof-templates{padding-top:60px;padding-left:10%;padding-right:10%;position:relative;height:auto;}
    section#prof-templates #info-prof-templates #image-cards{margin-top:30px;width:100%;clear:both;position:relative;height:auto;}
    section#prof-templates #info-prof-templates #image-cards img{top:0;z-index:10;}
    section#prof-templates #info-prof-templates #image-cards img.pic1{top:150px !important;right:50% !important;}
    section#prof-templates #info-prof-templates #image-cards img.pic2{top:100px !important;right:25% !important;}
    section#prof-templates #info-prof-templates #image-cards img.pic3{top:50px !important;right:0% !important;}
    section#prof-templates #info-prof-templates #image-cards img.pic4{top:0px !important;right:-25% !important;}
    section#prof-templates #info-prof-templates #image-cards img:hover{z-index:10;}
    section#uran-browser .side-left{padding-top:80px;}
    section#uran-browser .side-left #image-uran-browser{margin-top:0;width:90%;margin-left:10px;margin:0 auto;position:static;}
    section#uran-browser .side-left #image-uran-browser .viewport{height:auto;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}
    section#uran-browser .side-right #info-uran-browser{padding-top:30px;padding-left:10%;padding-right:10%;margin-bottom:60px;}
    .footer-section .column-logo{margin-bottom:30px;}
    .footer-section .column-logo img{margin-bottom:15px;}

}
@media (max-width:991px){
    .footer-section{padding-top:60px;padding-left:10%;padding-right:10%;padding-bottom:30px;}
    .footer-section .column-menu ul{display:block;margin:0 auto;width:200px;margin-bottom:30px;}
    .footer-section .column-menu ul li{white-space:nowrap;}
    .footer-section .social-links{margin:30px 0;text-align:center;}
    .footer-section .social-links a{float:none;display:inline-block;}
    .footer-section .payment-links { left:0!important; text-align:center; position:inherit; padding-top:0;margin:0;}
}
@media (max-width:768px){section#choice #choice-for-business{margin-bottom:30px !important;}
    section#choice .or{font-size:25px !important;}
    section#choice .to-next-section a{display:none;}
    section#choice #choice-for-shop{position:static !important;border-bottom:0 !important;}
    section#choice #choice-for-shop .box{position:static !important;}
    section#for-me #slider-pad{padding:30px;min-height:0;}
    section#for-me #slider-pad .owl-carousel#slider-for-me .item .image{min-height:400px !important;}
    section#for-me #slider-pad .owl-controls .owl-buttons .owl-prev{left:-65px;}
    section#for-me #slider-pad .owl-controls .owl-buttons .owl-next{right:-65px;}
    section#for-me p.info{padding:0px 14%;}
    #for-business #business-slider .owl-controls{display:none !important;}
    #web-shops #slider-web-shops-box .owl-controls{display:none !important;}
    section#prof-templates #info-prof-templates #image-cards img{width:100%;height:auto !important;}
}
@media (max-width:468px){section#personal-page #carousel-personal-page,
    section#uran-browser .side-left{margin-top:50px !important;padding-top:0 !important;}
    section#prof-templates #info-prof-templates,
    section#for-business .side-left{margin-top:30px !important;padding-top:0 !important;}
    #fp-nav{display:none !important;}
    section#choice h2,
    section#choice .or,
    section#choice #choice-for-shop h2{font-size:25px !important;}
    section#choice #choice-for-shop h2{white-space:normal;}
    section#for-me .box{padding:0;}
    section#for-me #slider-pad{padding:25px;min-height:0;}
    section#for-me #slider-pad .owl-carousel#slider-for-me .item .image{min-height:250px !important;}
    section#for-me #slider-pad .owl-controls{display:none !important;}
    section#personal-page #slider-personal-page .owl-buttons{display:none !important;}
    section#my-sites,
    section#for-business,
    section#personal-page{height:auto !important;}
    section#prof-templates p.lead{font-size:35px !important;}

}
@media (min-width:1600px){.owl-carousel .owl-controls .owl-buttons .owl-prev span{border-top-width:27px !important;border-bottom-width:27px !important;border-right-width:27px !important;}
    .owl-carousel .owl-controls .owl-buttons .owl-next span{border-top-width:27px !important;border-bottom-width:27px !important;border-left-width:27px !important;}
    section#choice h2{font-size:66px !important;}
    section#choice a.button{font-size:27px !important;}
    section#choice #choice-for-shop h2{font-size:45px !important;}
    section#choice #choice-for-shop .button{max-width:285px;font-size:22px !important;}
    section#for-me p.lead{letter-spacing:10px;}
    section#for-me .top-part{padding-top:10px;}
    section#for-me #slider-pad{width:87%;max-width:1135px;}
    section#for-me .slider-constructor.side p{padding-top:40%;}
    section#for-me .slider-constructor.side p strong{font-size:85px !important;}
    section#for-me .slider-constructor.side.leftside p{padding-left:50%;}
    section#for-me .slider-constructor.side.rightside p{padding-right:50%;}
}
@media (min-width:1790px){section#for-business .side-info{width:600px;}
}
@media (max-height:750px){section#for-me .bottom-part{bottom:-70px !important;}
    section#for-business .owl-item img{height:87vh;width:auto;margin:0 auto;}
    section#for-business .owl-controls .owl-buttons div.owl-prev{left:50px !important;}
    section#for-business .owl-controls .owl-buttons div.owl-next{right:50px !important;}
}
@media (max-height:700px) and (max-width:1180px){section#for-business .owl-item img{height:auto;width:100%;}
}
@media (max-height:820px){section#for-me{}
}
@media (max-height:820px) and (max-height:650px){section#for-me .box p,
    section#for-me .box-view-content{font-size:24px !important;}
    section#for-me .box{margin-bottom:20px;}
}
@media (max-height:820px) and (max-height:610px){section#for-me .box-view-content{display:none;}
}
@media (max-height:820px) and (max-height:480px){section#for-me .box p.info{display:none;}
    section#for-me .bottom-part{bottom:0;}
}
@media (max-height:860px){section#for-me .top-part{padding-top:0 !important;}
    section#for-me .bottom-part{bottom:-50px;}
}
@media (max-height:780px){section#choice header.main-header{margin-bottom:70px;}
    section#choice #choice-for-shop{top:0;}
    section#choice .to-next-section a{top:10px;}
}
@media (max-height:780px) and (min-width:1170px){section#choice header.main-header{margin-bottom:20px;}
}
@media (max-height:780px) and (min-width:1366px){section#choice h2{font-size:43px !important;}
}
@media (max-height:780px) and (min-width:1600px){section#choice h2,
    section#choice #choice-for-shop h2{font-size:40px !important;}
}
@media (max-height:768px){section#my-sites #image-my-sites img{bottom:-14vh;}
}
@media (max-height:568px){.user-side{padding:4% 5%;padding-top:6%;width:450px;overflow:auto;}
    .user-side .login-form input,
    .user-side .login-form button,
    .user-side .uid-login .uid-btn{font-size:18px !important;}
    .user-side .fast-reg p.title,
    .user-side .fast-reg .reg-list .icon i{font-size:16px !important;}
    .user-side .uid-login p{font-size:16px !important;}
    .user-side .login-form{margin-bottom:30px;}
    .user-side .login-form .form-group{margin-bottom:20px;}
    .user-side .login-form input{height:48px;line-height:48px;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
    .user-side .login-form button{height:48px;width:100%;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
    .user-side .fast-reg{margin-bottom:20px;}
    .user-side .fast-reg p.title{margin-bottom:20px;}
    .user-side .uid-login p{margin-bottom:20px;}
}
@media (min-height:568px){.user-side{padding:4% 5%;padding-top:6%;width:450px;}
    .user-side .login-form input,
    .user-side .login-form button,
    .user-side .uid-login .uid-btn{font-size:18px !important;}
    .user-side .fast-reg p.title,
    .user-side .fast-reg .reg-list .icon i{font-size:16px !important;}
    .user-side .uid-login p{font-size:16px !important;}
    .user-side .login-form{margin-bottom:30px;}
    .user-side .login-form .form-group{margin-bottom:20px;}
    .user-side .login-form input{height:48px;line-height:48px;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
    .user-side .login-form button{height:48px;width:100%;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
    .user-side .fast-reg{margin-bottom:20px;}
    .user-side .fast-reg p.title{margin-bottom:20px;}
    .user-side .uid-login p{margin-bottom:20px;}
}
@media (min-height:640px){.user-side{width:450px;padding:4% 5%;padding-top:6%;}
    .user-side .fast-reg{margin-bottom:100px;margin-bottom:10vh;}
}
@media (min-height:740px){.user-side{width:540px;max-width:94%;padding:5%;padding-top:6%;}
    .user-side .login-form input,
    .user-side .login-form button,
    .user-side .uid-login .uid-btn{font-size:20px !important;}
    .user-side .fast-reg p.title,
    .user-side .fast-reg .reg-list .icon i{font-size:25px;}
    .user-side .uid-login p{font-size:25px !important;}
    .user-side .login-form{margin-bottom:45px;}
    .user-side .login-form .form-group{margin-bottom:30px;}
    .user-side .login-form input{height:72px;padding-left:35px;line-height:72px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;}
    .user-side .login-form button{height:75px;width:100%;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;}
    .user-side .fast-reg{margin-bottom:10vh;}
    .user-side .fast-reg p.title{margin-bottom:30px;}
    .user-side .fast-reg .reg-list a{width:36px;height:36px;margin-right:20px;margin-bottom:20px;-webkit-border-radius:36px;-moz-border-radius:36px;border-radius:36px;}
    .user-side .fast-reg .reg-list a i:before{line-height:36px;}
    .user-side .fast-reg .reg-list a.yandex i{line-height:40px;}
    .user-side .fast-reg .reg-list .icon i{height:36px;line-height:36px;width:36px;}
    .user-side .uid-login p{margin-bottom:35px;}
    .user-side .uid-login .uid-btn{-webkit-transition:0.2s all ease;-moz-transition:0.2s all ease;-ms-transition:0.2s all ease;-o-transition:0.2s all ease;transition:0.2s all ease;width:100%;-webkit-border-radius:72px;-moz-border-radius:72px;border-radius:72px;height:72px;padding-left:60px;line-height:72px;}
    .user-side .uid-login .uid-btn:before{height:72px;width:72px;background-size:35px 35px;top:0;left:-1px;}
}
@media (max-height:800px){.user-side .fast-reg{margin-bottom:20px;}
    .user-side .uid-login .uid-btn{height:55px;padding-left:55px;line-height:55px;max-width:300px;}
    .user-side .uid-login .uid-btn:before{height:55px;width:55px;content:'';background-size:25px 25px;}
}
@media (max-width:550px){.user-side{width:94%;padding:30px;}
    .user-side .login-form button,
    .user-side .uid-login .uid-btn{font-size:20px !important;}
    .user-side .fast-reg p.title,
    .user-side .fast-reg .reg-list .icon i{font-size:18px !important;}
    .user-side .uid-login p{font-size:18px !important;}
    .user-side .uid-login .uid-btn{font-size:16px !important;white-space:nowrap;}
    .user-side .reg-list a{margin-right:8px !important;margin-bottom:8px !important;}
    #regform .info-page-wrap,#regform .popup-regform{padding: 10px 15px 20px}
    #regform #subj-fld, #regform #text-fld, #regform #subj-group .SumoSelect > .CaptionCont {width: 100%!important}
    #reCaptcha {transform: scale(0.9);float: none!important}
    #regform .popup-regform.create-site .check-agree{margin: 0;}
}
@media (max-width:825px){
    .user-side{padding:12px !important;}
    #regform #text-fld, #regform #subj-fld,#regform #name-fld, #regform #email-fld{width: 100%!important}
    #addr{width:calc(100% - 130px)}
    .form-group #fTerms-label{width:100%;}
}
@media (max-width:1200px){.user-side{padding-top:72px !important;}
}

section#choice{background:#fafafc !important;text-align:center;}
header.main-header{margin-bottom:0;}
header.main-header .login-logout a{display:block;position:absolute;height:32px;top:27px;right:36px;font-size:15pt;line-height:1em;color:#478af9;}
header.main-header .login-logout a:hover{color:#003997;}
.ucoz-logo{display:block;position:absolute;top:12px;left:18px;text-indent:-9999px;overflow:hidden;width:48px;height:48px;background:url('../img/logo-ucoz.svg') no-repeat;background-size:contain;text-align:left;z-index:9999;}
/*.top-links{margin:25px 100px 0 100px;text-align:center;}*/
.top-links li{display:inline-block;padding:0 22px;position:relative;    padding-bottom: 30px;}
.top-links li a{color:#999999;font-size:13pt;line-height: 13pt;}
.top-links li a:hover{color:#333;}
h2.slogan{color:#000;margin-top:15vh;margin-bottom:7vh;font-family:'Avenir Next', sans-serif;}
.content-section{width:100%;max-width:1200px;margin:0 auto;}
#block-for-me,
#block-for-business,
#block-for-shop{width:27%;display:inline-block;margin:0 3%;height:230px;position:relative;padding-top:72px;}
#block-for-me h3,
#block-for-business h3,
#block-for-shop h3{margin:0 0 18px 0;padding:0;color:#2c2e32;font-size:20pt;}
#block-for-me h3:before{content:'';display:block;width:50px;height:50px;position:absolute;top:0;left:50%;margin-left:-24px;background:url('../img/i_forme.svg') no-repeat;}
#block-for-me p,
#block-for-business p,
#block-for-shop p{color:#bbbbbb;font-size:13pt !important;}
#block-for-business h3:before{content:'';display:block;width:48px;height:48px;position:absolute;top:0;left:50%;margin-left:-24px;background:url('../img/i_forbiss.svg') no-repeat;}
#block-for-shop h3:before{content:'';display:block;width:60px;height:48px;position:absolute;top:0;left:50%;margin-left:-30px;margin-top:4px; background:url('../img/shop_ico_v1.svg') no-repeat;}
#block-for-me a{font-size:17px;display:inline-block;background:#5190f9;color:#fff;border-radius:5px;line-height:44px;padding:0 21px;margin-bottom:17px;}
#block-for-me a:hover{background:#0060ff;}
#block-for-business a{font-size:17px;display:inline-block;background:#04c67d;color:#fff;border-radius:5px;line-height:44px;padding:0 21px;margin-bottom:17px;}
#block-for-business a:hover{background:#009f63;}
#block-for-shop a{font-size:17px;display:inline-block;background:#9F4974;color:#fff;border-radius:5px;line-height:44px;padding:0 21px;margin-bottom:17px;}
#block-for-shop a:hover{background:#862354;}
section#choice .to-next-section{bottom:13px;left:50%;margin-left:-150px;width:300px;}
section#choice .to-next-section a{display:block;margin:0 auto;position:relative;width:36px;height:36px;right:0;top:0;text-align:left;text-indent:-9999px;overflow:hidden;border:2px solid #a4a6aa;border-radius:18px;background:url('../img/i_downarrow.png') center center no-repeat;}
section#choice .to-next-section a:hover{border:2px solid #333;}
section#choice .to-next-section a:after{display:none;}
.nav-button a{top:27px!important;left:91px!important;}
.nav-button a.light span{background-color:#000;}
.user-side{padding:5% 50px;}
.log-form p a{color:#4584eb;text-decoration:underline;}
.log-form p a:hover{text-decoration:none;}
.log-form .fast-reg{margin-bottom:5vh;}
.user-side .fast-reg .reg-list{width:168px;}
.fast-reg .reg-list a{margin:0 8px 20px!important;}
.log-form h3{color:#f6f6f6;font-size:19pt;margin-bottom:50px;}
.log-form p{color:#fff;font-size:12pt !important;}
.log-form .fast-reg p.title{font-size:13pt !important;}
.log-form span.reg-comment{color:#adaeaf;font-size:10pt;text-align:left;display:block;}
.log-form span.reg-comment:before{content:'*';color:#488bfa;margin-right:4px;}
.fast-reg .reg-list a.ok{background:#f48420;}
.fast-reg .reg-list a.ok:hover{background:#fa943a;}
.fast-reg .reg-list .icon .ok i:before{content:'\e609';}
.log-form .uid-login .uid-btn:before{display:none;}
.log-form .uid-login .uid-btn{margin:5vh auto;border:3px solid #4072c5;background:transparent;padding-left:0px;color:#fff;height:61px;line-height:55px;width:255px;font-weight:500;border-radius:72px;display:block;font-size:16pt;}
.anchorLink + span{visibility:hidden;display:block;text-align:center;margin:7px 0 0 0;color:#b9b9bb;font-size:11pt;width:300px;position:absolute;top:20px;left:50%;opacity:0;margin-left:-150px;-webkit-transition:opacity 0.6s ease;-moz-transition:opacity 0.6s ease;-o-transition:opacity 0.6s ease;transition:opacity 0.6s ease;}
.anchorLink:hover + span{visibility:visible;opacity:1;}
#fp-nav ul li a, .fp-slidesNav ul li a{overflow:visible;}
#fp-nav ul li .fp-tooltip{position:absolute;top:-2px;color:#fff;font-size:14px;font-family:arial, helvetica, sans-serif;white-space:nowrap;max-width:220px;overflow:visible;display:none;opacity:1;width:auto;}
#fp-nav ul li a:hover .fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip{-webkit-transition:opacity 0.2s ease-in;transition:opacity 0.2s ease-in;width:auto;opacity:1;display:block;}


@media print {
    html, body{
        background-color:#FFFFFF!important;
        font-family:sans-serif;
        color:#000000!important;
        height:auto!important;
        overflow:none!important;
    }
    section#regform,
    section#regform > .popup-regform.info-page-wrap{
        background-color:#FFFFFF!important;
        padding:0!important;
        font-size:14px;
        color:#000000!important;
        width:98%!important;
        height:auto!important;
        overflow:none!important;
        margin:0 auto!important;
    }
    section#regform > .navigation{display:none!important; }
    section#regform > .main-header{display:none!important; }
    section#regform > .user-side{display:none!important; }
    section#regform > .popup-regform.info-page-wrap > table{display:inline-block!important; }
    h1{font-size:29px!important; text-align:center; }
    h2{font-size:26px!important; }
    h3{font-size:23px!important; }
    h4{font-size:20px!important; }
    h5{font-size:17px!important; }
    h6{font-size:14px!important; }
    h1, h2, h3, h4, h5, h6{
        padding:0!important;
        margin:0!important;
        font-weight:bold!important;
        line-height:1.4!important;
        color:#000000!important;
    }
    p, li{font:14px/1.2 sans-serif!important; }
    ul > li{list-style-type:disc!important; }
    body > a[onclick*="new _uWnd"],
    body > a[href*="liveinternet"]{display:none!important; }
}


2 Вариант (В верхнюю часть сайта) :

<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

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

Оставленные комментарии :

Анастасия ЧекановаДобавлено 07.Окт.17 в 18:55
спасибо за менюшку! у меня не получалось долго найти что-то подобное, ты же знаешь какой я в этом мозг ахах) слава богу тут все просто

andruha061Добавлено 07.Окт.17 в 19:04
Не за что)


Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Адаптивный кино шаблон Serialclub DLE 12.0

Адаптивный кино шаблон выполнен в светлых тонах. Шаблон по своей структуре кода легок и быстро загружаемый в различных браузерах что несомненно пов...