CSS3 выдвижной нижний блок (footer)
- 30 Июл 15 в 08:44
- Дизайн сайта
В этом уроке я покажу как с помощью CSS3 создать выдвижной footer, эффект работает на всех современных браузерах и очень просто в реализации.
<!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. Придадим ему 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;
}
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
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.
Случайные материалы
Animate.css — набор кроссбраузерных
6 продвинутых и бесплатных CSS урок
30+ инструментов для веб-дизайна на
150 векторных иконок
Кнопка Google Material Design
Материал просмотрен как на YouTube