В этом уроке мы создадим меню сайта используя CSS3 transitions. Меню будет спрятано вне экрана и появляться на нём при нажатии кнопки "открыть меню". Рассмотрим 2 варианта меню:скользящее и сдвигающее контент страницу всторону. Стоить заметить что на старых браузерах при нажатии на кнопку меню будет "прыгать" на нужную точку, а не выезжать плавно. Также я использую classie.js для удобства добавления css классов.
Основная разметка:
<body>
<nav class="menu slide-menu-left">
<ul>
<li><button class="close-menu">← Close</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /slide menu left -->
<nav class="menu slide-menu-right">
<ul>
<li><button class="close-menu">Close →</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /slide menu right -->
<nav class="menu slide-menu-top">
<ul>
<li><button class="close-menu">↑ Close</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /slide menu top -->
<nav class="menu slide-menu-bottom">
<ul>
<li><button class="close-menu">Close ↓</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /slide menu bottom -->
<nav class="menu push-menu-left">
<ul>
<li><button class="close-menu">← Close</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /push menu left -->
<nav class="menu push-menu-right">
<ul>
<li><button class="close-menu">Close →</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /push menu right -->
<nav class="menu push-menu-top">
<ul>
<li><button class="close-menu">↑ Close</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /push menu top -->
<nav class="menu push-menu-bottom">
<ul>
<li><button class="close-menu">Close ↓</button></li>
<li><a href="#">Broccoli</a></li>
...
</ul>
</nav><!-- /push menu bottom -->
<div id="wrapper">
<div id="main">
<div class="container">
<div class="buttons">
<button class="nav-toggler toggle-slide-left">Slide Menu Left</button>
...
</div><!-- /buttons -->
<section class="content">
<h1>Vegetables</h1>
<p>Turnip greens yarrow...</p>
</section><!-- /.content -->
</div>
</div><!-- #main -->
</div><!-- /#wrapper -->
</body>
CSS:
body {
overflow-x: hidden
}
#wrapper {
position: relative;
z-index: 10;
top: 0;
left: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
section {
margin-bottom: 30px
}
section h1 {
font-family: "Oswald", sans-serif;
margin-bottom: 10px;
}
section p {
margin-bottom: 30px
}
section p:last-child {
margin-bottom: 0
}
section:last-child {
margin-bottom: 0
}
section.toggle {
text-align: center
}
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 15;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* Menus
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */
/* general style for all menus */
nav.menu {
position: fixed;
z-index: 20;
background-color: #67b5d1;
overflow: hidden;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
nav.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav.menu a {
font-weight: 300;
color: #fff;
}
button.close-menu {
background-color: #3184a1;
color: #fff;
}
button.close-menu:focus {
outline: none
}
Понимание структуры
Наш overflow-x установлен как hidden, потому что мы не хотим видеть полоску прокрутки внутри меню, для горизонтального меню это свойство неважно.
1) Меню выдвигающееся слева:
Это меню будет выдвигаются слева не сдвигая основной контент страницы, вот CSS для этого примера.
top: 0;
width: 300px;
height: 100%;
}
nav.slide-menu-left li {
display: block;
text-align: center;
border-bottom: solid 1px #3184a1;
border-top: solid 1px #b5dbe9;
}
nav.slide-menu-left li:first-child {
border-top: none
}
nav.slide-menu-left li:last-child {
border-bottom: none
}
nav.slide-menu-left a {
display: block;
padding: 10px;
font-size: 18px;
}
nav.slide-menu-left button.close-menu {
margin: 10px 0;
padding: 10px 30px;
background-color: #3184a1;
color: #fff;
}
nav.slide-menu-left {
left: -300px
}
body.sml-open nav.slide-menu-left {
left: 0
}
2) Меню выдвигающееся сверху.
CSS для этого примера:
nav.slide-menu-top {
left: 0;
width: 100%;
height: 100px;
}
nav.slide-menu-top ul {
text-align: center;
padding: 25px 0 0 0;
}
nav.slide-menu-top li {
display: inline-block;
margin: 0;
vertical-align: middle;
}
nav.slide-menu-top a {
display: block;
line-height: 50px;
padding: 0 10px;
font-size: 18px;
}
nav.slide-menu-top button.close-menu {
display: block;
line-height: 50px;
margin: 0;
padding: 0 10px;
}
nav.slide-menu-top {
top: -100px
}
body.smt-open nav.slide-menu-top {
top: 0
}
3) Меню сдвигающее контент всторону:
nav.push-menu-left {
top: 0;
width: 300px;
height: 100%;
}
nav.push-menu-left li {
display: block;
text-align: center;
border-bottom: solid 1px #3184a1;
border-top: solid 1px #b5dbe9;
}
nav.push-menu-left li:first-child {
border-top: none
}
nav.push-menu-left li:last-child {
border-bottom: none
}
nav.push-menu-left a {
display: block;
padding: 10px;
font-size: 18px;
}
nav.push-menu-left button.close-menu {
margin: 10px 0;
padding: 10px 30px;
background-color: #3184a1;
color: #fff;
}
nav.push-menu-left {
left: -300px
}
body.pml-open nav.push-menu-left {
left: 0
}
body.pml-open #wrapper {
left: 300px
}
4) Меню выскалзывающее сверху и сдвигающее контент вниз:
nav.push-menu-top {
left: 0;
width: 100%;
height: 100px;
}
nav.push-menu-top ul {
text-align: center;
padding: 25px 0 0 0;
}
nav.push-menu-top li {
display: inline-block;
margin: 0;
vertical-align: middle;
}
nav.push-menu-top a {
display: block;
line-height: 50px;
padding: 0 10px;
font-size: 18px;
}
nav.push-menu-top button.close-menu {
display: block;
line-height: 50px;
margin: 0;
padding: 0 10px;
}
nav.push-menu-top {
top: -100px
}
body.pmt-open nav.push-menu-top {
top: 0
}
body.pmt-open #wrapper {
top: 100px
}