Как разделить html страницу на две части ( меню и рабочая зона)

Question

Например есть меню в левой части , а справа должно открываться рабочая зона того подменю которое выбрано прмер: Меню (с права область где срабатывают ссылки в меню, нажимаю на пункт продажи появляется например таблица с вводом товара) Меню статично а правая часть реагирует на ссылки)

Можно ли это сделать без js стандартным способом или все пути к js?

Answer 1

Вот пример, как делать. HTML+CSS.

Работает на псевдоклассах input[type="radio"].

label указывает на input, на который фокусировать/переводить событие при нажатии на label. Так можно определять кликабельную область.

input[type="radio"] скрытый, там не нужны точки. Но благодаря label состояние меняется. У input[type="radio"] одного меню должно быть одно название, иначе работать не будет. fieldset похоже не обязательный.

При активном input[type="radio"] становится активным псевдокласс :checked и теперь мы можем например отобразить следущий после input элемент.

Вот и все, в принципе.

А, да. Самы верхний label и input[type="radio"] отвечает за закрытие блока.

#menu {
  position: relative;
}

#menu label {
  width: 200px;
  display: block;
}

input[type="radio"],
input[type="radio"]+.faked-area {
  display: None;
}

input[type="radio"]:checked+.faked-area {
  display: block;
  position: absolute;
  left: 200px;
  top: 0;
  right: 0;
}

<label for="r0">
<input id="r0" type="radio" name="menu">
<fieldset id="menu">
  <label for="r1">
    <input id="r1" type="radio" name="menu">
    <div class="faked-area" style="background: #9ff;">
        Пункт 1 Зона с чем то там
    </div>
    Пункт 1
    </label>
<label for="r2">
  <input id="r2" type="radio" name="menu">  
  <div class="faked-area" style="background: #99f;">
    Пункт 2 Зона с чем то там
    <br>
    <input type="text" name="search_field" placeholder="введи текст просто так">
  </div>
  Пункт 2
  </label>

</fieldset>
<div id="area">
  Область
</div>
</label>

БЛОГ НА HUSL

Как разделить html страницу на две части ( меню и рабочая зона)

Ответы (1 шт):