Скрыть или показать боковую панель

Я все еще работаю над простым шаблоном с двумя столбцами. Сегодня моя цель – скрыть «боковую панель», используемую для навигации.

Прощевым решением было бы добавить класс «D-None» к «боковой панели» (так как я использую начальную загрузку), но этого не будет достаточно, потому что «контент» не принимает всю ширину.

Пойдем шаг за шагом и посмотрим, что нам нужно сделать:

• Скрыть «боковая панель» => добавить в него класс «скрытый»,
• Сделайте «Контент» заполнить весь экран => класс «полной ширины».

На стороне HTML это будет похоже на:

    ...

И на стороне CSS:

#sidebar.hidden {
    display: none;
}
#content.full-width {
    width: 100%;
}

А также наоборот, когда мне нужно снова отобразить панель навигации:

    ...

Затем часть CSS:

#sidebar.visible {
    display: block;
}
#content.less-width {
    width: calc(100% - 299px);
}

Оно работает! Теперь давайте посмотрим, как получить такой же результат, но с меньшими осложнениями.

Моя первая попытка нуждается в 4 разных классах, тогда как в основном есть только 2 случая:

• Мы показываем «боковую панель» и «Контент» => (по умолчанию),
• Мы отображаем только «Контент» => (по требованию).

Что можно сделать с одним классом “No-Sidebar”:

• По умолчанию этот класс не используется => «Боковая панель» видна,
• И чтобы скрыть «боковую панель», мы просто должны добавить этот класс.

Чтобы быть умным, мы можем сделать это на уровне «обертка», который включает в себя «боковую панель» и «контент»:

И на этот раз мне нужно только два правила CSS:

.no-sidebar #sidebar {
    display: none;
}
.no-sidebar #content {
    width: 100%;
}

Намного лучше!

Теперь все, что нам нужно, это кнопка и немного JavaScript, чтобы показать или скрыть «боковую панель».

Masquer / Afficher

Код JavaScript действительно прост (потому что jQuery будет использоваться позже для форм):

Подводя итог, нам нужно всего лишь 4 элемента, чтобы построить шаблон с двумя столбцами, с переключаемой боковой панелью:

• Div “#Wrapper”, чтобы приложить все контент,
• «#SideBar» NAV для содержания навигационного меню,
• Div “#Content”, чтобы представить основной контент,
• Класс “. Не-sidebar”, когда вам нужно скрыть боковую панель.

И наконец , очень мало CSS (без стилей, используемых для презентации):

#wrapper {
    display: flex;
    width: 100%;
}

#sidebar {
    min-height: 100vh;
    position: fixed;
    width: 299px;
}

#content {
    min-height: 100vh;
    position: absolute;
    right: 0;
    width: calc(100% - 299px);
}

.no-sidebar #sidebar {
    display: none;
}

.no-sidebar #content {
    width: 100%;
}

А также При необходимости скрыть «боковую панель» при печати (так как она предназначена для содержания только навигационных элементов):

@media print {
    #sidebar { display: none;}
    #content { width: 100%; }
}

Мы также можем просто добавить начальную загрузку «D-Print-None» класс в «боковой панели».

Ура! Мой первый анимированный GIF на протяжении веков или, по крайней мере, с прошлого века (создан с https://ezgif.com/ ).

Это было не сложно … Так что я бы, вероятно, напишет третью часть, чтобы работать на «художественной» стороне:

• Используйте значок, чтобы показать или скрыть боковую панель,
• Добавьте анимацию, чтобы переключиться из одного состояния на другое.

Этот пост был первоначально опубликован в blog.pagesd.info Анкет Изображение обложки: Le Petit Musée de l’Errupteur Анкет

Оригинал: “https://dev.to/michelc/hide-or-show-sidebar-3955”