Всем привет. Почти написала сайт и столкнулась с проблемой, решение которой не нашла в интернете. Суть задачи состоит в том, чтобы при нажатии на верхнюю кнопку у меню, оно скрывалось до определенного размера. Ничего подобного так и не встретила в уроках. Помогите!
Вот код меню:
<div id="header" class="skel-layers-fixed">
<div class="top">
<!-- Logo -->
<div id="logo">
<div class="image avatar"><img src="images/avatar.png" alt="" /></div>
</div>
<!-- Nav -->
<div class="menu">
<div class="menu_block"><a rel="menu1" href="#">КНОПКА МЕНЮ</span></a></div>
</div>
<div class="menu_block"><a rel="menu2" href="#"><span>КНОПКА МЕНЮ</span></a></div>
<div class="menu_block"><a rel="menu3" href="#"><span>КНОПКА МЕНЮ</span></a></div>
<div class="menu_block"><a rel="menu4" href="#"><span>КНОПКА МЕНЮ</span></a></div>
<div class="menu_block"><a rel="menu5" href="#"><span>КНОПКА МЕНЮ</span></a></div>
<div class="menu_block"><a rel="menu6" href="#"><span>КНОПКА МЕНЮ</span></a></div>
<div class="menu_block"><a rel="menu7" href="#"><span>КНОПКА МЕНЮ</span></a></div>
</div>
</div>
<div class="bottom">
</div>
</div>
#header
{
position: fixed;
top: 0;
left: 0;
width: 375px;
height: 100%;
background: #313235;
text-align: left;
-webkit-box-shadow: 5px 0px 10px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 5px 0px 10px 0px rgba(50, 50, 50, 0.25);
box-shadow: 5px 0px 10px 0px rgba(50, 50, 50, 0.25);
z-index: 3;
}
#header .top
{
position: absolute;
left: 0;
top: 0;
width: 100%;
}
#header .bottom
{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
#header .icons
{
font-size: 0.8em;
margin: 0 0 1em 0;
text-align: center;
}
#header .icons a
{
color: #41484c;
-moz-transition: color 0.35s ease-in-out;
-webkit-transition: color 0.35s ease-in-out;
-o-transition: color 0.35s ease-in-out;
-ms-transition: color 0.35s ease-in-out;
transition: color 0.35s ease-in-out;
}
#header .icons a:hover
{
color: #fff;
}
#logo
{
position: relative;
margin: 1.25em 1.25em 1.25em 1.25em;
min-height: 76px;
cursor: default;
}
#logo h1
{
position: relative;
color: #fff;
font-weight: 600;
font-size: 1em;
line-height: 1em;
}
#logo p
{
position: relative;
display: block;
font-size: 0.6em;
color: rgba(255,255,255,0.5);
line-height: 1.25em;
margin: 0.5em 0 0 0;
}
#logo .image
{
position: absolute;
left: 0;
top: 0;
}
#nav
{
font-family: 'Scada', sans-serif;
font-size: 16pt;
}
#nav ul
{
}
#nav ul li
{
}
#nav ul li a
{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
color: #6f7074;
text-decoration: none;
outline: 0;
border: 0;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;
}
#nav ul li a span
{
position: relative;
border-bottom: 1px dashed #6f7074;
font-size: 16pt;
}
#nav ul li a span:before
{
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 1.25em;
line-height: 1.75em;
}
#nav ul li a.active
{
background: #595a5d;
color: #cbcdd3;
}
#nav ul li a.active span
{
border-bottom: 1px dashed #595a5d !important;
}
#nav ul li a.active span:before
{
color: #e27689;
}
