时间戳

首页 > 解决方案 > 标题中有两个导航和一个徽标

html - 标题中有两个导航和一个徽标

问题描述

我有一个问题，我需要做，左侧有两个导航和一个徽标。我需要你可以在下面的图片中看到

我需要有效和响应式地做，当浏览器缩小时，间隙会逐渐缩小，直到它跳转到汉堡菜单。

下面你看看我现在的样子，我需要的图片，但我不知道怎么做

在此处输入图像描述

.site-nav {
  width: 100%;
  height: 100px;
  display: flex;
}
.site-nav .nav-logo {
  width: 200px;
  height: 100px;
  float: left;
  display: flex;
}
.site-nav .nav-logo img {
  width: 97px;
  height: 47px;
  margin: auto 0;
}
.site-nav .nav-links {
  height: 100px;
  float: right;
  flex-grow: 1;
}
.site-nav .nav-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100px;
  display: flex;
}
.site-nav .nav-links ul li {
  float: left;
  margin: auto;
  padding-left: 16px;
}
.site-nav .nav-links ul li:not(:last-child) {
  padding-right: 16px;
}
<nav class="site-nav">
        <div class="container">
            <div class="nav-logo">
                <img src="logo.png" alt="">
            </div>
            <div class="nav-links">
                <ul class="nav-list">
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                    <li><a href="/">Home</a></li>
                </ul>
            </div>
        </div>
    </nav>

标签： htmlcss

解决方案

您可以使用嵌套的弹性框和媒体查询来获得所需的结果。我为徽标和汉堡使用了虚拟图像。

ul {
  list-style: none;
  margin: 0;
}

.site-nav {
  width: 100%;
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}

.nav-links {
  display: none;
}

.nav-links .nav-list {
  display: flex;
  flex-wrap: no-wrap;
}

.mobile-menu {
  position: relative;
}

.mobile-menu .nav-list {
  display: none;
  position: absolute;
  bottom: -90px;
  left: -40px;
}

.mobile-menu:hover>.nav-list {
  display: inline-block;
}

.nav-links .nav-list>li:not(:last-child) {
  margin-right: 1rem;
}

@media screen and (min-width: 500px) {
  .mobile-menu {
    display: none;
  }
  .nav-links {
    display: inline-block;
  }
}
<nav class="site-nav">
  <div class="container">
    <div class="nav-logo">
      <img src="https://via.placeholder.com/50x50" alt="">
    </div>
    <div class="mobile-menu">
      <img src="https://via.placeholder.com/30x30" alt="">
      <ul class="nav-list">
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
      </ul>
    </div>
    <div class="nav-links">
      <ul class="nav-list">
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
      </ul>
    </div>
    <div class="nav-links">
      <ul class="nav-list">
        <li><a href="/">Home</a></li>
        <li><a href="/">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

推荐阅读