个人中心
gpt4 book ai didi

css - 带有居中标志的响应式 HTML5 导航栏 "popping"out

转载 作者：太空宇宙 更新时间：2023-11-03 19:28:51 24 4
gpt4 key购买 nike

我正在尝试为桌面版本构建一个如下图所示的响应式导航栏，而在移动版本中，我希望它转换为下拉式汉堡菜单。我还希望 Logo 在其外部“弹出”并覆盖导航栏下的一些内容。

navbar with logo "popping" out

我是初学者，所以我正在考虑修改 Bootstrap 导航栏以满足我的需要，但我遇到了以下困难:

  1. 我不知道如何将内容居中并保持响应(我不介意 Logo 是否在移动版本的汉堡菜单中可见)。
  2. 我不知道如何使 Logo “弹出”在导航栏之外并覆盖它下面的一些内容
  3. 我还没有完成将事件选项卡显示为红色的部分，但我也需要一些帮助

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

到目前为止，您可以在下面看到我的代码，但我不确定它有多好。祝大家有个美好的一天:)

#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;
}
<!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>

最佳答案

我不知道任何 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:这个也很简单，你所要做的就是给它一个“active”的id给first 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>

希望这对您有所帮助!

关于css - 带有居中标志的响应式 HTML5 导航栏 "popping"out，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41030379/

24 4 0
文章推荐： c# - 修改某些页面的 session 超时的最佳方法
文章推荐： python - 同步时未记录的 Exchange ActiveSync 状态
文章推荐： python - 在 python 中使用 HTML.py 制作表格时遇到问题
文章推荐： c# - 尝试调用 Web 服务时出现 channel 超时错误