» »

Темная выдвижная панель сайта для uCoz


Темная выдвижная панель сайта для uCoz

Это скрипт на темную выдвижную панель, которая будет иметь мини профиль и информацию. А, это прописаны вами категорий или то что вы считаете нужным. Сама выдвижная панель сайта для uCoz сделано стильно и для общей тематики, что подразумевается, подойдет на все темы. Здесь если как гость вы зайдете на сайт, то верхнем правом углу вы увидите кнопку, что на ее сделать клик и она появиться, а точнее выедет.

Смотрим как гость, и как уже зарегистрированный пользователь.

Красивая выдвижная панель сайта

Здесь хочется сразу сказать, что все кнопки, что на ней есть, работают на Font Awesome, что означает, вам нужно загрузить стили, или просто скопировать стиль, который официальный сайт представляет, и прописать его вверх сайта между между head здесь /head и тогда они появятся, а также с этим ресурсом, вы можете ставить любые кнопки потом.

Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


Теперь по установки.

Вы скачиваете архив и там будет один файл, который вам нужно поместить в корень сайта. Дальше будет 3 текстовых файла, 2 из них, коды, это в низ сайта и CSS,все написано. Но а третий, вам нужно знать, как можно настроить панель, и что отвечает, какие стили за какой функционал. Все проверено на тестовом сайте, как видите шрифт там совершенно другой и у вас будет, тот который на сайте.

Панель информации для сайта

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

УСТАНОВКА

Первым делом установим HTML-код в Нижнюю часть сайта:

Код
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" />  
<script src="/slidx.js"></script>  
<a href="javascript://" id="slidx-button"><i class="fa fa-bars" aria-hidden="true"></i></a>  
<div class="slidx-menu">  
<?if($LOGIN_LINK$)?>  
<div class="login">  
<a href="$LOGIN_LINK$"><i class="fa fa-sign-in" aria-hidden="true"></i>Войти</a>  
<a href="$REGISTER_LINK$"><i class="fa fa-user-plus" aria-hidden="true"></i>Регистрация</a>  
</div>  
<?else?>  
<div class="profile">  
<img src="$USER_AVATAR_URL$">  
<ul>  
<li><a href="$PERSONAL_PAGE_LINK$">$USERNAME$</a></li>  
<li><a href="$PM_URL$">Сообщения: $UNREAD_PM$</a></li>  
</ul>  
<a href="$LOGOUT_LINK$" class="out"><i class="fa fa-sign-out" aria-hidden="true"></i></a>  
</div>  
<?endif?>  
<ul class="menu">  
<li><a href="/"><i class="fa fa-home" aria-hidden="true"></i>Главная страница</a></li>  
<li><a href="/load"><i class="fa fa-file" aria-hidden="true"></i>Каталог файлов</a></li>  
<li><a href="/publ"><i class="fa fa-book" aria-hidden="true"></i>Каталог статей</a></li>  
<li><a href="/forum"><i class="fa fa-comments" aria-hidden="true"></i>Форум</a></li>  
<li><a href="/index/0-3"><i class="fa fa-share-square-o" aria-hidden="true"></i>Обратная связь</a></li>  
<li><a href="/board"><i class="fa fa-bullhorn" aria-hidden="true"></i>Доска объявлений</a></li>  
<li><a href="/blog"><i class="fa fa-rss" aria-hidden="true"></i>Блог</a></li>  
<li><a href="/video"><i class="fa fa-video-camera" aria-hidden="true"></i>Видео</a></li>  
<li><a href="/gb"><i class="fa fa-users" aria-hidden="true"></i>Гостевая книга</a></li>  
</ul>  
</div>


CSS:

Код
.slidx-menu {background: #252525;}  
.slidx-menu a {color: #d3d3d3;}  
.slidx-menu a:hover {color: #d5a12e;}  
.slidx-menu .login, .slidx-menu .profile {background: rgba(0, 0, 0, 0.1); margin-bottom: 30px; padding: 10px 20px; overflow: hidden;}  
.slidx-menu .login {line-height: 55px; padding: 0; text-align: center;}  
.slidx-menu .login a {margin: 0 10px;}  
.slidx-menu .login i {margin-right: 10px; font-size: 16px; vertical-align: -1px;}  
.slidx-menu .profile img {width: 35px; height: 35px; float: left;}  
.slidx-menu .profile ul {margin: 3px 0 0 15px; float: left;}  
.slidx-menu .profile ul li:first-child a {color: #d3d3d3; font-size: 13px; font-weight: bold;}  
.slidx-menu .profile ul li a {color: #777; font-size: 11px;}  
.slidx-menu .profile ul li a:hover {color: #d5a12e;}  
.slidx-menu .profile a.out {margin-top: 7px; font-size: 18px; float: right;}  
.slidx-menu .profile a.out:hover {color: #ef2d2d;}  
.slidx-menu ul.menu li {border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a; line-height: 48px; margin: -1px 20px;}
.slidx-menu ul.menu li:first-child {border-top: 0 none;}  
.slidx-menu ul.menu li:last-child {border-bottom: 0 none;}  
.slidx-menu ul.menu li i {margin-right: 15px; font-size: 16px; vertical-align: -2px;}  
.slidx-menu ul.menu li:hover {background: #2a2a2a; margin: -1px 0;}  
.slidx-menu ul.menu li:hover a {padding: 0 20px;}  
.slidx-menu ul.menu li a {display: block;}


Файл slidx.js скачаете.

Источник: divvvy.ru
19.04.2016 Загрузок: 12 Просмотров: 537 Комментарий: (9)

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

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

Комментарий: 9
FeStemBer
FeStemBer 19.04.2016 21:151
0
Так то сделано с умом, здесь бы кнопку хорошо чтоб видна была.
Kosten
Kosten 19.04.2016 21:282
0
Но вообще то видим, что только категорий прописаны, можно что то свое прописать, что главное на сайте.
Maryges
Maryges 19.04.2016 21:333
0
Не чего себе поставил, но весь сайт, что то нужно убирать, но слишком много туда прописали , это как горизонтальное меню, но вот профиль мне здесь нравиться.
workman
workman 19.04.2016 21:594
0
Зашиьбиська biggrin
Kosten
Kosten 19.04.2016 22:195
0
А ты поставил, чтоб говорить, его в 2 секунды можно установить, этот скрипт.
Kosten
Kosten 20.04.2016 16:416
0
Шрифт поменял, и сразу эта панель по другому смотрится, как изменить шрифт на сайте, читаем здесь, все очень подробно написано.

csretven
csretven 20.04.2016 19:277
0
Вот интересно для чего вообще такие скрипты делают, но ище понимаю, там мини чат, а здесь категорий, но хорошо что есть мини профиль, возможно кому то и нужно будет, мне как то и без этого нормально, все на главной вывел понятно.
avatar
Shura5804 06.10.2016 18:298
0
в архиве только один файл!!!
Kosten
Kosten 06.10.2016 19:539
0
Исправил и все в материале разместил, файл который скачаете его в файловый менеджер.

avatar