/ Сайтостроение / Дизайн / Выдвижной Footer

Выдвижной Footer

HIT

20.09.2015

1314

6

Делаем выдвижной (раскрывающийся) Footer. Можно использовать для различных целей, например, показать какаю-либо вспомогательную техническую информацию.

Вставляем в FOOTER элемент, при нажатии на который он должен выдвигаться

<div id="footer" name="footer">

<div id="footer-open" >Открыть <i class="fa fa-arrow-up"></i></div>

</div>

CSS

#footer {
margin-top: -50px;
padding: 0 10%;
background-color: rgba(0, 0, 0, 0.7);
height: 50px;
width: 80%;
float: left;
color: #fff;
box-shadow: 0px 0px 16px #000;
overflow: hidden;
position: relative;
text-align: center;
z-index: 99;
transition: margin-top 0.5s, height 0.5s;
}

#footer-open {background-color: coral; padding: 5px; position: absolute; cursor: pointer;}

.open3 {margin-top: -150px !important; height: 150px !important;}

Script

$(document).ready(function() { 
 
//Раскрытие футера 
 
$('#footer-open').click(function() {
$('#footer').toggleClass('open3'); 
}); 
 
//Изменение содержимого diva при нажатии 
 
$("#footer-open").toggle(
function () {$("#footer-open").html('Закрыть <i class="fa fa-arrow-down"></i>');},
function () {$("#footer-open").html('Открыть <i class="fa fa-arrow-up"></i>');}
); 
 
});

Запоминание состояния открыт / закрыт (cookie)

+ Изменение состояния кнопки

$(document).ready(function() { 
  
  
// Раскрывающийся футтер (+ Cookies)  
  
    var body_class = $.cookie('underground-btn');
    var body_class2 = $.cookie('underground');
	if(body_class) {
           $('#footer-open').attr('class', body_class);
		   $('#underground').attr('class', body_class2);
			    }
	
    $('#footer-open').click(function() {
	
	    $('#footer-open').toggleClass('footer-open-open');
        $('#underground').toggleClass('underground-open');
		
        $.cookie('underground-btn', $('#footer-open').attr('class'), { expires: 1, path: '/' });
		$.cookie('underground', $('#underground').attr('class'), { expires: 1, path: '/' });

    }); 
	
	
	
	$('#footer-open').click(function() {
	$("html, body").animate({scrollTop:$(document).height()},2000); return false; // функция перемотки вниз 
	});     
  

}); 

CSS изменяющейся кнопки

#footer-open {
    padding-top: 10px;
    text-align: center;
    position: relative;
    float: left;
    width: 100%;
    cursor: pointer;
    transition: color 0.5s ease, background-color 0.5s ease;
    -webkit-transition: color 0.5s ease 0s, background-color 0.5s ease 0s;
}

#footer-open:after {content: "открыть"; position: relative;}

.footer-open-open {display:block;}

.footer-open-open:after {content: "закрыть" !important; position: relative !important;}

Упрощенный вариант (без cookie)

Назначается на любой объект нажатия (выделено ниже)

$(document).ready(function() { 
  
// Раскрывающийся футтер
    $('#wp_usage').click(function() {
        $('#underground').toggleClass('underground-open');
	$("html, body").animate({scrollTop:$(document).height()},2000); return false; // функция перемотки вниз 
    }); 
	
});

Изменения текста кнопки

Простой скрипт изменения текста на кнопке при нажатии

$(function(){
   $('#bron').click(function(){
		var text = $(this).text();
		$(this).text(text == "Закрыть форму брони" ? "Забронировать номер" : "Закрыть форму брони");
    })
}) 

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Приклеенный к низу footer

Приклеенный к низу footer

Приклеиваем подвал (footer) к нижнему краю экрана, не зависимо от высоты контентной части страницы. Добавляем после body <div class="main"> И внутрь этого дива помещаем HEADER и содержимое сайта, кроме FOOTER’a. Читать далее »

FlexBlock. Современная верстка

FlexBlock. Современная верстка

Верстка сайтов постоянно эволюционирует: от табличной верстки к верстке div с float (frame), далее промежуточный этап верстка diplay:inline-block. Так или иначе суть верстки — модульная сетка. Современный CSS дает нам Читать далее »

/

Добавить комментарий

6 комментариев

  1. Anton

    Добрый день, а вы не могли бы подробнее рассказать куда это все вставлять?И если без куки, то первый код не брать, в коде надо что-то изменять?

    1. Alexandr
      Alexandr

      Если проще:
      Любой объект по нажатию на который будет происходить раскрытие:
      <div id="footer-open">Открыть <i class="fa fa-arrow-up"></i></div>
      Прописываем CSS, их возможно нужно будет допилить под Вашу верстку.
      Скрипт вставляем в файл со скриптами (как подключить скрипты). Я оставил самую главную часть скрипта:
      $(document).ready(function() {
      //Раскрытие футера
      $('#footer-open').click(function() {
      $('#footer').toggleClass('open3');
      });
      });

      Тот скрипт, который идет ниже (Упрощенный вариант (без cookie)) это тоже самое, только другой пример..
      Cookie в данном функционале в принципе не обязательно.
      Суть проста: при нажатии на определенный объект, footer’у добавляется класс open3 со смещением:
      .open3 {margin-top: -150px !important; height: 150px !important;}

  2. Anton

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

    1. Alexandr
      Alexandr

      Насчет примера — не вопрос! Кликни по футеру в любом месте.

  3. Anton

    Это получается скрытый блок, а как сделать, чтобы при нажатии на кнопку просто выезжал футер, оставляя человека на том же месте скролла? И кнопка как бы торчит из подвала, как тут на десктопной версии life.ru

    1. Alexandr
      Alexandr

      Суть та же самая. Просто на life.ru футер изначально скрыт, а элемент который его открывает это кнопка со стрелкой. Принцип такой: у футера задан отрицательный сдвиг или минимальная высота (так чтобы его не было видно на экране), при нажатии на стрелки с помощью jQuery футеру добавляется класс (например .open) у которого это отрицательное значение изменено на положительное (только с атрибутом !important), и за счет этого и происходит появление футера. А плавность достигается css свойствами transition.

Выдвижной Footer
Шорткоды woocommerce
Рекомендации для васШорткоды woocommerceOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.