Блог

Я использовал W3Schools для кодирования оверлейного меню sidenavhttps://www.w3schools.com/howto/howto_js_sidenav.asp с гармошкой https://www.w3schools.com/howto/howto_js_accordion.asp. Я пытаюсь выяснить, как сделать его адаптивным, но мне не везет.

Я пытался исправить это с помощью #menu, но все меню исчезает. Я не знаю, связано ли это с тем, что я не использую ul или li для своих ссылок или нет.

 <header>
   <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">amp;times;</a>
      <a href="index.html">Home</a>
      <a class="accordion" href="#">Design amp;#9663;</a>
      <div class="panel">
         <a href="mobile.html">Mobile</a>
         <a href="#">Web</a>
      </div>
      <a href="photography.html">Photography</a>
      <a href="branding.html">Branding</a>
      <a href="about.html">About | Contact</a>
   </div>
   <span class="opening" onclick="openNav()"><i class="fas fa-stream"></i></span>
</header>
  

 .sidenav {
    position: fixed;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 4rem;
    z-index: 1;
    transition: 0.5s;
    overflow-x: hidden;
    background-color: ghostwhite;
    float: left;
}

.sidenav a {
    display: block;
    padding: 10px 10px 10px 32px;
    transition: 0.3s;
    font-size: 1rem;
    font-family: mr-eaves-xl-modern,sans-serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 1.5px;
    text-decoration: none;
    text-align: left;
    color: #504E4E;
}

.sidenav a:hover {
    font-style: italic;
}

.opening {
    position: absolute;
    top: 1.5rem;
    left: 5%;
    font-size: 1.3rem;
    color: #504E4E;
    float: left;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 5%;
    margin-left: 20%;
    float: left;
}

.accordion {
    width: 100%;
    padding: 18px;
    border: none;
    outline: none;
    transition: 0.4s;
    font-size: 1rem;
    text-align: left;
    color: #504E4E;
}

.active .accordion:hover{
    font-style: italic;
}

.panel {
    max-height: 0;
    padding: 0 18px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: ghostwhite;
    font-size: 1rem;
    font-family: mr-eaves-xl-modern,sans-serif;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: #504E4E;
}
  

Я бы хотел, чтобы это было горизонтальное меню при масштабировании до рабочего стола.

Использование ul и li не должно иметь эффекта.

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

Чтобы настроить таргетинг на все экраны, ширина которых больше или равна 1024 пикселям, используйте @media ( min-width: 1024px ) . Для настройки экранов шириной меньше или равной 1024 пикселям используйте @media ( max-width: 1024px ) .

Одна из причин, по которой ваше меню не отображается, заключается в том, что вы установили ширину в 0 в .sidenav селекторе. Удалите эту строку. Чтобы меню отображалось на рабочем столе во всю ширину, вы можете добавить следующий код в свой CSS-файл:

 @media ( min-width: 1000px ) {
    .sidenav {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-end;
    }
    .sidenav > a {
        width: auto;
    }
}
  

Это не будет хорошо отображать аккордеон; возможно, вам потребуется реструктурировать ваш HTML. Однако это должно помочь вам начать работу с медиа-запросами и использованием разных стилей при разных размерах экрана.