» »

Функциональный низ сайта для uCoz


Функциональный низ сайта для uCoz

Эффективный по своему и безусловно функциональный низ сайта под любую тему для uCoz. Где по умолчанию он просто идет с поиском и стоит навести и появляется весь. Большой плюс в нем, что он создан на чистых стилях CSS и нет не одного скрипта. Как было сказано, что в него можно прописать, то что вам нужно, так как по сути Footer создан из четырех колонок. Установка у него не сложная, но все по порядку.

Так он будет стоять если на его не наведешь клик.



Если посмотреть на его, то можно увидеть, как он создан и что вообще можно поставить или заменить, а лучше все просто оставить как есть.



Но здесь разобрались как будет он стоять, а также сменить оттенок под свой дизайн, не трогая темную гамму и приступаем к установке.

Скачиваем архив и нужно разместить папку new_footer Файловый менеджер. И только после этого ставим код в низ, где должен стоять.

Код
<link type="text/css" rel="StyleSheet" href="/new_footer/footer_style.css" />  
<footer class="site-footer">  
<span class="js-up">  
<i class="fa fa-chevron-up"></i>  
</span>  
<div class="site-footer__sticky">  
<div class="col-2">  
<ul>  
<li><a href="http://internetempire.ru/">Главная</a></li>  
<li><a href="#">Форум</a></li>  
<li><a href="#">О нас</a></li>  
<li><a href="#">Реклама на сайте</a></li>  
<li><a href="#">Обратная связь</a></li>  
</ul>  
</div>  
<div class="col-2">  
<form onsubmit="document.getElementById('sfSbm').disabled=true" method="get" style="margin:0px" action="/search/">  
<input placeholder="Введите поиск" class="search-bar" type="text" name="q" maxlength="45" onclick="if (this.value=='Поиск...'){this.value='';}"/>  
<i class="search-btn fa fa-search"></i>  
</form>  
</div>  
</div>  

<div class="site-footer__main">  
<div class="col-4">  
<ul>  
<h3>Навигация</h3>  
<li><a href="#">Шаблоны для uCoz</a></li>  
<li><a href="#">Скрипты для uCoz</a></li>  
<li><a href="#">Информеры для uCoz</a></li>  
<li><a href="#">PSD исходники</a></li>  
<li><a href="#">CSS элементы</a></li>  
</ul>  
</div>  

<div class="col-4">  
<ul>  
<h3>Социальность</h3>  
<li><a href="#">Facebook</a></li>  
<li><a href="#">Twitter</a></li>  
<li><a href="#">Google +</a></li>  
<li><a href="#">ВКонтакте</a></li>  
<li><a href="#">Одноклассники</a></li>  
</ul>  
</div>  

<div class="col-4">  
<ul>  
<h3>Друзья сайта</h3>  
<li><a href="#">WebMaster-uCoz.Ru</a></li>  
<li><a href="#">uCoNet.Ru</a></li>  
<li><a href="#">ZorNet.Ru</a></li>  
<li><a href="#">uCoz.Ru</a></li>  
<li><a href="#">Blog.uCoz.Ru</a></li>  
</ul>  
</div>  

<div class="col-4">  
<ul>  
<h3>Остальное меню</h3>  
<li><a href="#">Пример 1</a></li>  
<li><a href="#">Пример 2</a></li>  
<li><a href="#">Пример 3</a></li>  
<li><a href="#">Пример 4</a></li>  
<li><a href="#">Пример 5</a></li>  
</ul>  
</div>  
</div>  
</footer>


Вот вся установка по этому материалу, все делаем как написано, но стандарт.
Источник: http://internetempire.ru/
06.02.2016 Загрузок: 11 Просмотров: 691 Комментарий: (14)

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

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

Комментарий: 13
YaVi
YaVi 06.02.2016 20:471
+1
Я надеюсь, что хоть кому-нибудь пригодиться) cool Вот Демо
tsakonter
tsakonter 06.02.2016 20:482
0
YaVi, вы опять что то новое нашли или адаптировали?
YaVi
YaVi 06.02.2016 20:535
0
Адаптировал)
Сафрон
Сафрон 06.02.2016 21:049
0
Что сказать, не плохая адаптация получилось.
Kosten
Kosten 06.02.2016 20:493
0
Пригодиться, вообще в первые вижу такой низ, горизонтальное меню было, при клике выезжало, а вот футер, не видел.
Maryges
Maryges 06.02.2016 20:536
0
YaVi, нормальный низ.
Kosten
Kosten 06.02.2016 20:514
0
Опять демо забыл поставить, надеюсь сам автор выставит. wink
ucozmental
ucozmental 06.02.2016 20:577
0
Такой низ сам интересен по себе, но банально, опять нет не чего, чтоб указывало на то, что он поднимается.
csretven
csretven 06.02.2016 21:008
0
Так есть жн место, где написано обратная связь, или напишите или установите знак, это же не так тружно.
trem200
trem200 07.02.2016 01:2110
0
А как можно поменять сам цвет меню, то есть с оранжевого цвета. Просто, что бы подстроить од сайт.
Kosten
Kosten 07.02.2016 01:4811
0
Да, можно, в стилях, которые вы закинете в корень сайта.
trem200
trem200 07.02.2016 11:5612
0
Я искал в стилях, но не нашёл. Что в стилях отвечает за цвет?
Kosten
Kosten 07.02.2016 19:1213
0
Ищем этот стиль и в нем меняем оттенок цвета.

Код
.site-footer {
  position: fixed;
  bottom: -286px;
  left: 0;
  width: 100%;
  background: #3787DC;
  border-top: 5px solid #393939;
  -webkit-transition-duration: 0.3s;
  z-index: 1000;
}


avatar