Переключение на отображение / скрытие меню с помощью гибкого поля и элементов списка

ProgramBox

Переключение на отображение / скрытие меню с помощью гибкого поля и элементов списка

Post author:admin
Запись опубликована:15 марта, 2023
Post category:Вопросы по программированию

#html #css #mobile #flexbox #navigation

#HTML #css #Мобильный #flexbox #навигация

Вопрос:

РЕДАКТИРОВАТЬ: Спасибо за ответ! Я обновил codepen, чтобы отразить окончательный код, если кому-то интересно. Код в сообщении — это исходный код, который не работал.

К настоящему времени я просмотрел, вероятно, 15 руководств, но пока ни одно из них не работает.

Вот в чем проблема:

Я создал панель навигации для рабочего стола, используя неупорядоченный список для пунктов меню и упорядочивая их с помощью flexbox.

В мобильной версии я бы хотел, чтобы пункты меню скрывались / отображались нажатием переключателя. Я обнаружил, что большинство руководств делает это, добавляя div вокруг этих элементов, но это испортило бы flexbox.

tldr; Как я могу сделать так, чтобы панель навигации, состоящая из элементов списка в flexbox, появлялась / исчезала при нажатии переключателя?

Вот мой код:

Codepen

HTML

 <html>
<body>
<header>
<nav>
    <ul>
        <li><!--Logo in nav-->
            <a href="index.html">
            <div class="logo" id="pageTop">
                <img src="img/logo.png" alt="Company logo">
            </div></a>
        </li>
        <li class="nav"><a href="projects.html">Prosjekter</a></li>
        <li class="nav"><a href="consultants.html">Konsulenter</a></li>
        <li class="nav"><a href="about.html">Om Sirius</a></li>
        <li class="nav"><a href="blog.html">Blogg</a></li>
        <li class="nav"><a href="contact.html">Kontakt</a></li>
        <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
 <i class="fa fa-bars"></i>
          </li>
    </ul>
</nav>
</header>
  
  </body>
</html>

CSS

 html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: white;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}

header {
    background-color:#0f2530;
}

Nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
}

Nav li {
    color: white;
    font-size: 3.6vh;
    font-weight: bold;
    display: grid;
    align-items: end;
    text-align: center;
    padding: 3vh 0;
}

.nav-toggle {
  display: none;
}

li a:link, li a:visited {
    text-decoration: none;
    color: white;
}

li a:hover {
    opacity: 0.8;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

@media only screen and (max-width: 550px) {   

  .nav {
    display: none;
  }  
  
nav ul {
    display: block;
}

nav li {
    margin: 0 auto;
    text-align: center;
}
  
.nav-toggle {
  display: block;
}

Я представлял себе решение JS, похожее на слегка измененное из того, что предлагает здесь W3, но использующее class вместо ID для таргетинга на все элементы списка. Однако это не работает:

 function myFunction() {
  var x = document.getElementByClassName("nav");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Я чувствую, что должно быть простое решение, но я его еще не нашел. Любая помощь очень ценится!

1. Вы могли бы просто добавить класс к nav элементу и показать / скрыть его с помощью js.

2. @pistevw Да, это в основном то, что я хотел бы сделать! Однако я не настолько опытен в написании собственного JS. Вы знаете, как я мог бы сделать это простым способом?

3. Есть ли причина, по которой вы хотите показывать / скрывать при переключении? Обычно, если вы хотите показать / скрыть содержимое на маленьких экранах, вы делаете это с помощью css media queries.

4. @pistevw Да, обычно я бы использовал медиа-запрос. Однако я хотел использовать переключатель, потому что меню занимало много места на экране, поэтому я хотел скрыть его по умолчанию, но обеспечить легкий доступ с помощью переключателя.

Ответ №1:

Пожалуйста, используйте семантические элементы и правильный подход, чтобы создать панель навигации, которая работает на всех устройствах.

Пожалуйста, укажите <nav> элемент вместо <li>

Обновленный фрагмент :-

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mika's Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Titillium Web' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: white;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
}
header {
    background-color:#0f2530;
    min-height: 40px;
}
Nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
    padding: 0;
}
Nav li {
    color: white;
    font-size: 3.6vh;
    font-weight: bold;
    display: grid;
    align-items: end;
    text-align: center;
    padding: 3vh 0;
}
.nav-toggle {
    display: none;
}
li a:link, li a:visited {
    text-decoration: none;
    color: white;
}
li a:hover {
    opacity: 0.8;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.bar {
    background: #fff;
    margin: 0;
    position: absolute;
    right: 48px;
    top: 6px;
    padding: 3px 10px;
    display:none
}
 @media only screen and (max-width: 550px) {
 #nav {
display:none;
}
.bar {
display:block;
}
 nav ul {
 display: block;
}
 nav li {
 margin: 0 auto;
 text-align: center;
}
 .nav-toggle {
 display: block;
}
</style>
<body>
<header> <a href="index.html">
  <div class="logo" id="pageTop"> <img src="img/logo.png" alt="Company logo"> </div>
  </a> <a class="bar" href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i></a>
  <nav id="nav">
    <ul>
      <li class="nav"><a href="projects.html">Prosjekter</a></li>
      <li class="nav"><a href="consultants.html">Konsulenter</a></li>
      <li class="nav"><a href="about.html">Om Sirius</a></li>
      <li class="nav"><a href="blog.html">Blogg</a></li>
      <li class="nav"><a href="contact.html">Kontakt</a></li>
    </ul>
  </nav>
</header>
<script>


function myFunction() {
  var x = document.getElementById("nav");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

</script>
</body>
</html>