Проблема с отображением выпадающего меню в виде блока на адаптивной панели навигации - PullRequest
Новая
       5

Проблема с отображением выпадающего меню в виде блока на адаптивной панели навигации

0 голосов
/ 22 декабря 2018

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

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

Я включил код HTML, CSS и JavaScript,Я использую для панели навигации.Помогите!Спасибо всем. 

<html>
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <meta http-equiv="X-UA-Compatible" content="ie=edge">
                    <title>X</title>
                    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i" rel="stylesheet">
                        <link rel="shortcut icon" href="images/favicon.ico" />
                        <link rel="stylesheet" type="text/css" href="styles/main.css">
                            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                            </head>
                            <body>
                                <div class="topnav" id="myTopnav">
                                    <nav role="banner">
                                        <a href="#">
                                            <img id="topnavLogo" src="images/logo-navbar-white.png" width="240" height="180">
                                            </a>
                                            <ul>
                                                <li>
                                                    <a class="page-icon" href="#">Log in</a>
                                                </li>
                                                <li>
                                                    <a class="page-icon" href="#">Sign up</a>
                                                </li>
                                                <li>
                                                    <a class="page-icon" href="#">About</a>
                                                </li>
                                            </ul>
                                            <a href="javascript:void(0);" class="icon" onclick="myFunction()">
                                                <i class="fa fa-bars"></i>
                                            </a>
                                        </nav>
                                    </div>
                                    <style>
            #topnavLogo{
                float:left;
                color: #fff;
                text-align: left;
                text-decoration: none;
                font-variant: small-caps;
                padding-top:-50px;
                padding-bottom: 15px;
                padding-left: 30px;
                margin:-55px;
            }

            .topnav {
                width: 100%;
                height: 60px;
                background-color: #0008;
                line-height: 60px;
                position: fixed;
                display:inline-block;
              }

            ul li{
                  display:inline;
                  float:right;
              }

              .active {
                background-color: #4CAF50;
                color: white;
              }

              .topnav .icon {
                display: none;
              }

              .page-icon{
                color: #fff;
                text-align: center;
                padding: 5px 5px;
                text-decoration: none;
                font-size: 17px;
                margin-right: 30px;
                font-family: 'Lato', sans-serif;
                font-variant: small-caps;
              }

              .page-icon:hover {
                color: #9bc0d3;
              }

              @media screen and (max-width: 600px) {
                .topnav li a {display: none;}
                .topnav a.icon {
                  float: right;
                  display: block;
                  padding: 0 1em 0 0;
                  color: #fff;
                  font-size: 1.5em;
                }
                  .topnav a.icon:hover {
                    color: #9bc0d3;
                }
              }

              @media screen and (max-width: 600px) {
                .topnav.responsive {position: relative;}
                .topnav.responsive a.icon {
                  position: absolute;
                  right: 0;
                  top: 0;
                }

                .topnav.responsive a {
                    float: none;
                    display: block;
                    text-align: left;
                    color: #9bc0d3;  
                }
              }
            </style>
<script>

            function myFunction() {
                var x = document.getElementById("myTopnav");
                if (x.className === "topnav") {
                  x.className += " responsive";
                } else {
                  x.className = "topnav";
                }
              }
        </script>
    </body>
</html>

Ответы [ 2 ]

0 голосов
/ 22 декабря 2018

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

Дайте мне знать, если это не то, на что вы надеялись. 

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
body {
  margin: 0px;
}

#topnavLogo {
  float: left;
  color: #fff;
  text-align: left;
  text-decoration: none;
  font-variant: small-caps;
  padding-left: 30px;
  max-height: 60px;
  width: 240px;
  height: 50px;
  margin: 5px 5px 5px 25px;
  background-image: url('https://via.placeholder.com/240x80.png/09f/fff');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}

.topnav {
  width: 100%;
  height: 60px;
  background-color: #0008;
  line-height: 60px;
  position: fixed;
  display: inline-block;
}

.topnav ul {
  margin: 0px;
}

ul li {
  display: inline;
  float: right;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.page-icon {
  color: #fff;
  text-align: center;
  padding: 5px 5px;
  text-decoration: none;
  font-size: 17px;
  margin-right: 30px;
  font-family: 'Lato', sans-serif;
  font-variant: small-caps;
}

.page-icon:hover {
  color: #9bc0d3;
}

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

  .topnav.responsive a.icon {
    color: #9bc0d3;
  }
  
  .topnav li a {
    display: none;
    margin: 0px;
    float: none;
  }
  
  .topnav.responsive li a {
    display: inherit;
  }
  
  .topnav a.icon {
    float: right;
    display: block;
    padding: 0 1em 0 1em;
    color: #fff;
    font-size: 1.5em;
  }
  
  .topnav a.icon {
    position: absolute;
    right: 0px;
    top: 0px;
    padding-left: 15px;
  }
  
  .topnav a.icon:hover {
    color: #9bc0d3;
  }
  
  .topnav ul {
    width: 100%;
    position: fixed;
    top: 60px;
    bottom: 0px;
    right: 0px;
    background: #0008;
    display: none;
    overflow-y: scroll;
  }
  
  .topnav.responsive ul {
    display: inherit;
  }
  
  nav ul li {
    width: 100%;
  }
  
}
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav" id="myTopnav">
  <nav role="banner">
    <a href="#" id="topnavLogo">

    </a>
    <ul>
      <li>
        <a class="page-icon" href="#">Log in</a>
      </li>
      <li>
        <a class="page-icon" href="#">Sign up</a>
      </li>
      <li>
        <a class="page-icon" href="#">About</a>
      </li>
    </ul>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </nav>
</div>
0 голосов
/ 22 декабря 2018

Вы устанавливали display: block и display: none для элемента <a> вместо его оболочки <li>.

Чтобы ваше меню отображалось правильно, вам необходимо добавить эти 2 правила: 

@media screen and (max-width: 600px) {
  .topnav ul > li {display: none;}
  .topnav.responsive ul > li {width:100%; display: block;}
}
...