Сделать так, чтобы панель навигации исчезала, когда окно становится меньше

Я создал свой веб-сайт с нуля, используя HTML и CSS. Я хочу иметь отдельные разделы. Панель навигации и основной раздел. Панель навигации должна прокручиваться вместе с окном при прокрутке по оси Y. Мне удалось сделать это с помощью CSS «position: fixed;». Но при прокрутке по оси x панель навигации перемещается по оси x, перекрывая основной раздел. Когда размер окна изменяется и становится слишком маленьким для правильного отображения всего, панель навигации перекрывает основной раздел.

Теперь моя цель — зафиксировать панель навигации на оси Y, но не на оси X. И когда окно становится слишком маленьким, чтобы отображать все сразу, панель навигации должна исчезнуть и снова появиться, когда окно снова станет больше.

Вы можете взглянуть на мой сайт здесь: https://f3mic.github.io/

Я не могу точно сказать, что сделано, чтобы попытаться решить эту проблему.

репрекс

html {
  scroll-behavior: smooth;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto;  
}

.item-sidebar {
  position: fixed;
  top: 10%;
  font-size: 90%;
}

.item-main {
  width: 80%;
  max-width: 80%;
  margin-left: 15%;
  font-size: 110%;
  hyphens: auto; 
    text-align: justify
}

body {
  background-color: #1f1f1f;
  color: white;
  font-weight: normal;
  font-family: monospace;
}

ol {
  margin-left: -11%;
  counter-reset: item;
  list-style-type: none;
}

ol.first {
  margin-left: -10%;
 }

ol li::before {
  counter-increment: item;
  content: counters(item, ".") ". ";
}
<body>
    <div class="grid-container">
        <div class="item-sidebar">
            <ol>
                <li><a href="index.html#intro">Introduction</a></li>
                <li><a href="index.html#prep">Preparations</a></li>
                    <ol class="first">
                        <li><a href="index.html#Fallout2_Installation">Installation - Fallout2</a></li>
                        <li><a href="index.html#Fallout2_.dat_files">File handling - .dat files</a></li>
                        <li><a href="index.html#Tools_Data_Exploring">Tools - .dat Extractor</a></li>
                        <li><a href="index.html#Extracting_.dat_files">Extracting - .dat files</a></li>
                        <li><a href="index.html#Tools_Scripting">Tools - Scripting</a></li>
                        <li><a href="index.html#Config_sFall_Script_Editor">Config - sFall Script Editor</a></li>
                        <li><a href="index.html#Tools_Mapping">Tools - Mapping</a></li>
                        <li><a href="index.html#Config_BIS_Mapper">Config - BIS Mapper</a></li>
                    </ol>
                <li><a href="index.html#mapping">Mapping</a></li>
                    <ol class="first">
                        <li><a href="index.html#BIS_Mapper_explained">BIS Mapper explained</a></li>
                            <ol>
                                <li><a href="index.html#hotkeys">Hotkeys</a></li>
                            </ol>
                        <li><a href="index.html#build_map">How to build a map</a></li>
                            <ol>
                                <li><a href="index.html#FloorWall">Floors and walls</a></li>
                                <li><a href="index.html#SceneryCritter">Scenery and critters</a></li>
                                <li><a href="index.html#LadderStair">Ladders and stairs</a></li>
                                <li><a href="index.html#ScrollBlocker">Scroll blocker</a></li>
                                <li><a href="index.html#MapExit">Map exits</a></li>
                                <li><a href="index.html#Worldmap">Worldmap</a></li>
                            </ol>
                        <li><a href="index.html#New_Critter">Make new prototype</a></li>
                    </ol>
                <li><a href="index.html#basic">Scripting (Basics)</a></li>  
                    <ol class="first">
                        <li><a href="index.html#ssl">Scripting language</a></li>
                        <li><a href="index.html#script">Script</a></li>
                        <li><a href="index.html#header">Header File</a></li>
                        <li><a href="index.html#define">Define</a></li>
                        <li><a href="index.html#procedure">Procedure</a></li>
                        <li><a href="index.html#function">Function</a></li>
                        <li><a href="index.html#argument">Argument</a></li>
                        <li><a href="index.html#variable">Variable</a></li>
                        <li><a href="index.html#constant">Constant</a></li>
                        <li><a href="index.html#macro">Macro</a></li>
                        <li><a href="index.html#operator">Operator</a></li>
                        <li><a href="index.html#statement">Statement</a></li>
                        <li><a href="index.html#semicolon">Semicolon</a></li>
                    </ol>
                <li><a href="index.html#advanced">Scripting (Advanced)</a></li>
                    <ol class="first">
                        <li><a href="index.html#compiling">Compiling</a></li>
                        <ol>
                            <li><a href="index.html#Scripts.h">SCRIPTS.H</a></li>
                        </ol>
                        <li><a href="index.html#TestScript">Test your script</a></li>
                        <ol>
                            <li><a href="index.html#Scripts.lst">SCRIPTS.LST</a></li>
                        </ol>
                        <li><a href="index.html#AssignScript">Assign script to object</a></li>
                        <li><a href="index.html#dialog">Dialog</a></li>
                        <li><a href="index.html#pipboy">Add quest to pipboy</a></li>
                        <li><a href="index.html#MakeTrader">Make trader</a></li>
                        <ol>
                            <li><a href="index.html#StoreRestock">Store restock</a></li>
                        </ol>
                    </ol>
                <li><a href="index.html#complex">Scripting (Complex)</a></li>
                    <ol class="first">
                    </ol>
                <li><a href="index.html#sFall">Scripting (SFall) (Optional)</a></li>
                    <ol class="first">
                    </ol>
                <li><a href="index.html#art">Art (Optional)</a></li>    
                    <ol class="first">
                        <li><a href="index.html#talkhead">Talking Heads</a></li>
                        <!--<li><a href="index.html#tiles">Make new tiles</a></li>
                        <li><a href="index.html#walls">Make new walls</a></li>
                        <li><a href="index.html#fot">FOT Critters In FO2</a></li>-->
                    </ol>
                <li><a href="index.html#addendum">Addendum</a></li>
                <li><a href="index.html#source">Sources</a></li>
            </ol>
        </div>  

    <div class="item-main">
        <header>
            <h1>Fallout 2 Modding Guide</h1>
            <br>
                <p>Written by Femic et al.</p>
                <img src="images\Header\Please_stand_by_Fallout.jpg" alt="Please stand by">
                <p><em>Shot a child in the face after he pickpocketed me. Turned the whole town hostile. Ran away to New Reno. Became a Pornstar.
            <br>
                Fallout 2 in a nutshell.
            <br>        
                11/10</em></p>--Rat Prik (Steam review)
        </header>
    <br>
    <hr>
    <hr>

Привет Femic, добро пожаловать в SO! Сначала начните с помещения <div class="grid-container"> внутрь <body>. И обязательно разместите минимальный воспроизводимый пример, люди не собираются отлаживать вашу онлайн-страницу...

Rene van der Lende 21.11.2022 15:50

Привет Рене. Спасибо за прием. Я сделал, как ты сказал. Переместил <div class="grid-container"> внутрь <body> и получил репрекс исходного кода.

Femic 21.11.2022 16:16
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
5 распространенных ошибок, которых следует избегать при начале работы с HTML
5 распространенных ошибок, которых следует избегать при начале работы с HTML
Приветствую вас, изучающие HTML! Я составил список распространенных ошибок, которые часто допускают студенты, начинающие изучать HTML. Пожалуйста,...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:
1
2
69
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

TLDR: я собрал codepen, чтобы предоставить вам демоверсию, на основе которой вы можете строить. Я сделал несколько альтернативных решений. Тот, который использует position: fixed, и тот, который использует значение grid-template-columns вашего контейнера сетки.

Другие материалы, которые, вероятно, стоит прочитать:

Сделать так, чтобы панель навигации исчезала, когда окно становится меньше

Это можно сделать с помощью медиазапросов. По сути, вы придадите своему сайту/боковой панели разные стили в зависимости от ширины области просмотра пользователя. Это позволит вам использовать CSS, чтобы скрыть боковую панель на маленьких экранах/узких окнах браузера и показать ее на больших экранах. Конечно, вам, вероятно, понадобится способ показать его, пока он скрыт.

Зафиксируйте панель навигации на оси Y

Использование position: fixed, как вы сделали, является прекрасным способом достижения вашей цели, однако оно делает .grid-container ненужным, поскольку position: fixed удалит элемент из потока документов. Больше информации о позиционировании CSS.

Если вы используете это решение, вам нужно будет добавить немного padding (вместо этого можно использовать margin) к основному контенту, чтобы боковая панель не перекрывала его.

Если вы хотите продолжать использовать контейнер сетки, вы можете вместо этого использовать position:sticky на .item-sidebar. Это позволит сохранить боковую панель в первом столбце контейнера сетки, как вы изначально планировали, но позволит вам сохранить ее в пределах области просмотра аналогично position: fixed.

Общее замечание относительно вашего CSS: не используйте % как единицу так часто, как у вас. Постарайтесь выбрать наиболее подходящую единицу для работы. Ширина .item-main с использованием % в качестве вашей единицы хороша, в меньшей степени для полей в списках. Дело не в том, что % для полей списка неверен, просто есть другие, которые обычно считаются более подходящими (например, rem). Больше информации о единицах CSS.

Наслаждайтесь созданием остальной части вашего сайта.

Здравствуйте Андрей. Большое спасибо за ваши усилия. Я горю желанием реализовать ваши предложения. До тех пор.

Femic 22.11.2022 14:47

Не беспокойся, @Femic. Предполагая, что вы довольны ответом, не могли бы вы отметить его как принятый. Спасибо и удачи

Andrew 22.11.2022 18:35

Другие вопросы по теме