CSS3 выдвижной нижний блок (footer)
В этом уроке я покажу как с помощью CSS3 создать выдвижной footer, эффект работает на всех современных браузерах и очень просто в реализации.

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


Основные правила, которые мы будем использовать для достижения поставленной задачи:



  • Основной блок #wrapper. Придадим ему z-index:1, это будет самое большое значение z-index в нашей странице, и позволит

    фоновому цвету перекрывать footer;

  • Блоку footer зададим самый маленький z-index:-2;

  • Внутри блока footer создадим меню, и задаем ему z-index:-1, и позиционируем с помощью position:fixed в нужном нам положении, это позволит быль меню по слоям между footer и #wrapper.


HTML


Код

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8"/>
  <title>CSS3 выдвижной нижний блок (footer)</title>
  <link href="style.css" rel="stylesheet" />
  </head>
  <body>
  <div id="wrapper">
  <div class="main">
  <h1>CSS3 выдвижной нижний блок (footer)</h1>
  <article>
  <p>тут разместим абзац текста</p>
  <p>тут разместим абзац текста</p>
  <p>тут разместим абзац текста</p>
  <p>тут разместим абзац текста</p>
  <p>тут разместим абзац текста</p>
  </article>
  </div>
  </div>
  <footer>
  <ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">О нас</a></li>
  <li><a href="#">История компании</a></li>
  <li><a href="#">Наши партнеры</a></li>
  <li><a href="#">Разработчикам</a></li>
  <li><a href="#">Вакансии</a></li>
  <li><a href="#">Регионам</a></li>
  <li><a href="#">Оплата</a></li>
  <li><a href="#">Доставка</a></li>
  <li><a href="#">Примеры работ</a></li>
  <li><a href="#">Галерея</a></li>
  <li><a href="#">Социальная помощь</a></li>
  <li><a href="#">SEO</a></li>
  <li><a href="#">Разработка сайтов</a></li>
  <li><a href="#">Продвижение рок звезд</a></li>
  <li><a href="#">Контакты</a></li>
  </ul>
  </footer>
  </body>
  </html>

В нашей разметке #wrapper выполняет роль обертки для всего содержимого страницы, самое же содержимое содержится в блоке .main и позиционировано по центру страницы. Внутри блока footer содержится меню. Блок footer не входит в обертку #wrapper благодаря этому у нас получится его зафиксировать внизу страницы и придать требуемый эффект, к которому мы стремимся.


CSS


Код
html, body {
  width:100%;
  height:100%;
  }
  body{
  position: relative;
  z-index: 0;
  }
  #wrapper{
  position: relative;
  min-height: 100%;
  z-index: 10;
  background-color: #eee;
  }
  footer{
  height: 150px;
  z-index: -2;
  position: relative;
  }
  footer ul {
  width: 960px;
  position:fixed;
  left:50%;
  bottom:0;
  margin-left:-480px;
  z-index: -1;
  }

Вот и все. У нас получился отличный эффект выезжающего футера.

Всего комментариев: (1)

maxvat
в 09:11, 01 Авг 15
Помогите
_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

AJAX ОКНА V.1.2 BY MR.WINS
AJAX ОКНА V.1.2 BY MR.WINS
Крутейший jQuery плагин для имитации воды на сайте
Крутейший jQuery плагин для имитаци
Функциональный слайдер с автопрокруткой
Функциональный слайдер с автопрокру
Скрипт запрещающий смотреть код материала гостям для uCoz
Скрипт запрещающий смотреть код мат
Запрет на правую кнопку мышки
Запрет на правую кнопку мышки
Увеличение картинки при нажатии на нее для uCoz
Увеличение картинки при нажатии на