Question

我正在尝试为桌面版本构建一个响应式导航栏，如下图所示，在移动版本中，我希望它转换为下拉汉堡菜单。我还希望徽标能够弹出＆＃34; pop＆＃34;在它之外并覆盖导航栏下的一些内容。

我是初学者所以我正在考虑修改引导导航栏以满足我的需求，但我有以下困难：

我不知道如何集中内容并保持响应（我不介意在移动版本的汉堡菜单中看到徽标）。
我不知道如何制作徽标＆＃34; pop＆＃34;在导航栏之外并覆盖其下的一些内容
我还没有看到显示的部分和活动标签中的红色，但我也需要一些帮助

如果有人有时间阅读这篇文章并给我一些帮助或建议，我将非常感激。

下面你可以看到我的代码到目前为止，但我不确定它有多好。祝大家一切顺利：）

＆＃13;

#menu-wrapper {
  background: rgba(0,0,0,0.4) !important;
}


#burger-menu {
  color: #fbf9ff;
}

#nav-container {
text-align: center;
margin:0 auto;
display: inline-block;
position:fixed;
width:100%;
height:15%;
background:#c73a30;
}
.logo{
  top:-65px !important;
  height:150px !important;
  line-height:150px;
  overflow:hidden;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>navbar</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>


<section id="nav-container">
  <nav id="menu-wrapper" class="navbar navbar-fixed-top navbar-dark bg-inverse">
      <div class="navbar-header">
          <button id="burger-menu" class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false">
              &#9776;
          </button>
      </div>
      <div class="collapse navbar-toggleable-xs pull-sm-right" id="navbar">
          <ul class="nav navbar-nav">
              <li class="nav-item">
                  <a class="nav-link" href="#about-me">COMEDIANS</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#web-development">EVENTS</a>
              </li>
              <div class="logo">
                <img src="http://www.battleoftastings.com/wp-content/uploads/2013/03/seafood-placeholder150x150px.png"/>
              </div>
              <li class="nav-item">
                  <a class="nav-link" href="#gallery">GET IN TOUCH</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#gallery">GALLERY</a>
              </li>
          </ul>
      </div>
  </nav>
</section>



<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>

</body>

＆＃13;

Answer 1

我不知道任何bootstrap所以我将建议纯CSS3解决方案。首先，您需要创建如下的媒体查询：

@media (max-width: 600px) {

}

这将告诉CSS3如果窗口宽度小于600px，请运行一些代码。 @media代码将覆盖任何现有代码。要获得更深入的解释，请查阅任何@media教程。有很多教程解释如何正确使用@media查询。

问题＃1：

@media查询中的简单text-align:center;应该足够了。

问题＃2：在这里，您需要一份图像副本。您可以将该副本放在任何地方。为副本提供ID，因为您需要隐藏它。然后将display:none;放入ID中。如果你做得对，你应该得到这个结果：

#logocopy {
    display:none;
}

然后在@media查询中将图片副本设置为display:block;，同时将导航栏中的图像设置为display:none;。如果你做得对，你应该得到这个结果：

@media (max-width: 600px) {
   .logo {
       display:none;
   }
   #logoCopy {
       display: block;
   }
}

如果您想将图片居中，只需执行以下操作：#logoCopy {margin: 0 auto;}。当然，在媒体查询中这样做。如果一切都正确完成，您的图像应该能够跳出导航栏。现在，如果您希望图像覆盖某些文本，则必须编辑图像的包装点。

问题＃3：这个也很简单，你所要做的就是给它一个＆＃34;活跃的＃34;到第一个li（假设你在第一页）（id的名字可以是任何东西），然后编码：

#active {
    background-color: red;
}

如果您将自己的ID放在正确的位置，它应该如下所示：

<div class="collapse navbar-toggleable-xs pull-sm-right" id="navbar">
          <ul class="nav navbar-nav">
              <li class="nav-item" id="active">
                  <a class="nav-link" href="#about-me">COMEDIANS</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#web-development">EVENTS</a>
              </li>
              <div class="logo">
                <img src="http://www.battleoftastings.com/wp-content/uploads/2013/03/seafood-placeholder150x150px.png"/>
              </div>
              <li class="nav-item">
                  <a class="nav-link" href="#gallery">GET IN TOUCH</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#gallery">GALLERY</a>
              </li>
          </ul>
      </div>

希望这有帮助！

响应式HTML5导航栏，带有居中徽标＆＃34;弹出＆＃34;出

1 个答案: