@martuwka

Как сохранить блок открытым после перезагрузки страницы?

В адаптивном дизайне вместо обычного сайдбара добавил сайдбар, который открывается плавно справа при нажатии на соответствующую кнопку. Реализация только на 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 или как?
  • Вопрос задан
  • 1536 просмотров
Решения вопроса 1
Exploding
@Exploding
wtf?
Вариантов несколько, но если Вы говорите "После перезагрузки", то почему не выполнять проверку на php перед выводом html и открывать/скрывать блок используя css класс какой-то?
UPD: Не класс. У вас это чекбоксом реализовано, значит просто параметром checked у чекбокса.

Например:
$chk = "";
if($show) $chk = "checked";

<input type="radio" name="menu-state" id="hidden" <?= $chk?> />


Переменная $show в данном примере должна быть предопределена заранее или вообще заменена на Ваше условие.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Вопрос: как сделать так, чтобы, когда пользователь откроет блок и решит авторизироваться, то после перезагрузки страницы этот блок был открытым.
Используйте сохранение состояния: сессия пользователя, сохранение параметра ("флага") состояния в куках/localStorage.

Или можно сохранить состояние между запросами прямо в URL (после открытия меняйте URL через history и добавляйте в него параметр).
http://site.com/page24324.html?logon
проверяйте через JS этот параметр сразу после загрузки страницы и, если он присутствует, разверните нужный блок.
Ответ написан
Комментировать
@roxik
Предлагаю использовать LocalStorage. Example: https://developer.mozilla.org/ru/docs/Web/API/Wind...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы