Question

我正在尝试构建一个响应式导航栏。一切似乎都工作正常，但是一旦缩小屏幕并显示按钮，则单击按钮后菜单无法正确显示。

答案可能非常简单，但是我才刚刚起步，似乎无法弄清楚。我试图修改CSS代码以获得适当的结果，这意味着菜单应该在按钮下方以块显示，但是我尝试的任何方法似乎都没有效果。

我包括了用于导航栏的HTML，CSS和Javascript代码。救命！谢谢大家。

      //if you want to set data on back press button ,it means you have previous 
        // activity 
     // so first of all when you start Setting activity,
     // use this to satrt settingActivity -
     Intent i = new Intent(this, SettingActivity.class);
     startActivityForResult(i, 1);

     // in SettingActivity when name updated 

    Intent returnIntent = new Intent();
    returnIntent.putExtra("new_Name",name);
    setResult(Activity.RESULT_OK,returnIntent);
   // finish();

    //override this one in your previous activity where you want to set new name
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {

      if (requestCode == 1) {
        if(resultCode == Activity.RESULT_OK){
          String name=data.getStringExtra("new_Name");
          //set this name where you want
          }
         if (resultCode == Activity.RESULT_CANCELED) {
            //Write your code if there's no result
         }
      }
     }

Answer 1

您将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;}
}

Answer 2

下面的代码在按下小屏幕菜单按钮时，菜单在标题下方显示为全角。在较大的屏幕上时，它充当普通标题。我还玩弄了标志图像，但显示不正确。

让我知道这是否不是您想要的。

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>

在响应式导航栏中将下拉菜单显示为块的问题

2 个答案: