В адаптивном дизайне вместо обычного сайдбара добавил сайдбар, который открывается плавно справа при нажатии на соответствующую кнопку. Реализация только на Html и Css. Вот код html:
<div class="sidebar-hide">
<input type="radio" name="menu-state" id="hidden" checked />
<input type="radio" name="menu-state" id="visible" />
<label class="show-menu" for="visible">Открыть блок</label>
<label class="overlay" for="hidden"></label>
<div class="menu-over">
<label class="close-menu" for="hidden">Закрыть блок</label>
<aside id="block-right" style="padding-right: 20px; margin-top: 60px;">
<div class="login-sidebar">
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar')) : ?>
<p>текст</p>
<?php endif; ?>
</div>
<div id="sidebar-gorod" class="sidebar-misto-hide">
<h2>Город</h2>
<ul>
<li><a href="/">Город1</a></li>
<li><a href="/">Город2</a></li>
<li><a href="/" >Город3</a></li>
<li><a href="/">Город4</a></li>
<li><a href="/">Город5</a></li>
</ul>
</div>
Вот css-код:
input[name="menu-state"] {
position: absolute;
left: -10000px;
}
input[name="menu-state"]:focus ~ .show-menu,
input[name="menu-state"]:focus ~ .menu .close-menu{
box-shadow: 0 0 1px 2px rgba(0,127,255,.5);
}
.show-menu,
.close-menu {
display: inline-block;
padding: .5em;
vertical-align: top;
background: black;
color:white;
cursor: hand;
cursor: pointer;
-webkit-transition: 0.2s ease;
transition: 0.2s ease;
-moz-transition: 0.2s ease;
-o-transition: 0.2s ease;
font-weight: bold;
}
.show-menu:hover,
.close-menu:hover {
background-color: #e74c3c;
}
.close-menu {
position: absolute;
top: 10px;
right: 10px;
}
.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
display: none;
background-color: #333;
transition: opacity .3s;
}
#visible:checked ~ .overlay {
opacity: .5;
display: block;
}
.menu-over {
position: absolute;
left: -280px;
top: 0;
bottom: 0;
width: 280px;
height: 1200px;
background-color: #ddd;
transition: left .3s;
}
#visible:checked ~ .menu-over {
left: 0;
}
.sidebar-hide {
display: none;
}
В этом блоке у меня размещена еще форма авторизации. Вопрос: как сделать так, чтобы, когда пользователь откроет блок и решит авторизироваться, то после перезагрузки страницы этот блок был открытым.
Т.е. чтобы он закрывался, только когда пользователь сам нажмет на "Закрыть"? Подскажите уже с реализацией, ajax, jquery или как?
Простой