css 添加汉堡图标，并使响应自定义导航栏与div块

0yg35tkg 于 2023-06-25 发布在其他

关注(0)|答案(2)|浏览(79)

我试图使以下自定义导航栏响应。我只使用div块创建它，因为它对我来说更容易理解，代码更短，更简单，而且是纯CSS。下面是Codepen的链接：https://codepen.io/familias/pen/WNYraNy。
下面是CSS：

.table-cell {
  display: table-cell;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%;
}

.superior {
  position: relative;
  display: inline-block;
}

.superior a {
  position: relative;
  display: inline-block;
  margin: none;
  padding: none;
  border: none;
  outline: none;
  font-size: 16px;
  color: #000000;
  text-transform: uppercase;
  text-decoration: none;
  height: 30px;
  line-height: 30px;
  text-align: center;
  padding: 8px 20px 8px 20px;
}

.superior a:hover {
  text-decoration: none;
  color: #e5633f;
  font-weight: 400;
}

.inferior {
  display: none;
  position: absolute;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 0px solid #000;
}

.inferior a {
  margin: none;
  padding: none;
  border: none;
  outline: none;
  display: block;
  font-size: 14px;
  font-weight: 400;
  padding-right: 30px;
  padding-left: 30px;
  color: #000000;
  text-transform: uppercase;
  text-decoration: none;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-bottom: 1px solid #000;
}

.inferior a:hover {
  font-weight: 400;
  text-decoration: none;
  color: #fff;
  background-color: #000;
}

.superior:hover .inferior {
  display: block;
}

<div id="table">
  <div id="table-row">
    <div class="table-cell">
      <div class="superior"><a href="#">News</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
      <div class="superior"><a href="#">Politics</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
      <div class="superior">
        <a href="#">Economy</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>

      <div class="superior"><a href="#">Culture</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
      <div class="superior"><a href="#">Health</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
      <div class="superior"><a href="#">Education</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
      <div class="superior"><a href="#">Live</a>
        <div class="inferior">
          <a href="#">This is the first link</a>
          <a href="#">This is the second link</a>
        </div>
      </div>
    </div>
  </div>
</div>

我需要的是菜单垂直显示时，在移动的上查看。我如何才能做到这一点？

css

来源：https://stackoverflow.com/questions/76489980/add-hamburger-icon-and-make-responsive-a-custom-navbar-made-with-div-blocks

2条答案

按热度按时间

eivgtgni1#

@media only screen and (max-width: 600px) 
{
 .superior {
   position:relative;
   display:block;
   }
}

您可以尝试这样做，“@media only screen和（max-width：600 px）”意味着只有当特定条件为真时才包括CSS属性块，在这种情况下，如果屏幕小于600 px。它将创建垂直菜单，你可以添加样式，你需要。

赞(0）回复(0）举报 2023-06-25

dsekswqp2#

下面是一个使用网格样式的选项，带有汉堡菜单的复选框标签：超级丑陋，但只是为了显示什么是在哪里。注意菜单上的悬停显示了相关的.inferior，但这可能更花哨;更多的只是功能在这里比超级漂亮只是为了展示它如何可以做到。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, sans-serif;
  background-color: #f4f4f4;
  font-size: 16px;
}

.wrapper {
  display: grid;
  grid-template-areas: "header header header" "main main main" "main main main" "footer footer footer";
  grid-template-rows: 1fr 10em 5em 2em;
  grid-template-columns: 1fr auto 1fr;
  background-color: #44dd4044;
  grid-gap: 0.25em;
}

.wrapper>* {
  /* just to show the contained elements */
  border: 1px solid orange;
}

.header {
  grid-area: header;
  display: grid;
  /* notice the 1em and 2em column for the entire header left and right "padding" */
  grid-template-columns: 1em 1fr 1fr auto 2em;
  grid-template-areas: ". logo check hamburger";
  grid-template-rows: 3.5em;
  align-items: center;
  background-color: #FFFFFF;
}

.header .logo {
  grid-area: logo;
  font-size: 1.5em;
  text-decoration: none;
}

.header .menu-btn {
  grid-area: check;
  /* hide or not this is the check that activates the menu via click on hamburger and css */
  display: none;
}

.header .menu-icon {
  grid-area: hamburger;
}

.container-menu {
  /* put the menu where you want and add style */
  background-color: #ffff00;
  grid-column: 2 / 4;
  grid-row: 2 / 5;
  display: none;
  z-index: 3;
}

.wrapper>main {
  grid-area: main;
  background-color: #d4ebf2;
}

.wrapper>footer {
  grid-column: 1/5;
  background-color: #ddd;
  text-align: center;
  align-self: center;
}

.container-menu .superior {
  background-color: #00FFFF20;
  color: #808000;
  text-align: center;
  line-height: 2em;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.container-menu .superior .main-link {
  text-decoration: none;
  color: #00BFFF;
  font-weight: 600;
}

.container-menu .superior .main-link:hover {
  background-color: #FF0000;
  color: #FFFF00;
}

.inferior {
  grid-column: 2;
  display: none;
}

.container-menu .superior:hover .inferior {
  display: flex;
  flex-direction: column;
}

.above {
  font-size: 1em;
  padding: 0.25em;
  text-align: center;
}

a {
  color: #000000;
}

.superior {
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr auto;
}

.header .menu-icon .navicon {
  /* style and color the svg hamburger as needed */
  border: solid 1px #00000040;
  border-radius: 0.25em;
  padding: 0.25em;
  height: 2em;
  width: 2em;
  color: #0000AA40;
  cursor: pointer;
  user-select: none;
}

.wrapper>.header .menu-btn:checked~.menu {
  max-height: 240px;
}

.wrapper:has( .header input#menu-btn:checked)>.container-menu.menu {
  display: grid;
  grid-template-columns: 10em auto;
  border: solid 1px lime;
}

input#menu-btn:has(+ label.menu-icon) {
  color: red;
}

<div class="above">I am above</div>
<div class="wrapper">
  <div class="header">
    <a href="#" class="logo">Oh Happy Day Nav</a>
    <input class="menu-btn" type="checkbox" id="menu-btn" />
    <label class="menu-icon" for="menu-btn">
      <svg class="navicon" height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" fill="currentColor" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
      </label>
  </div>

  <div class="container-menu menu">
    <div class="superior"><a class="main-link" href="#">News</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Politics</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Economy</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Culture</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Health</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Education</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
    <div class="superior"><a class="main-link" href="#">Live</a>
      <div class="inferior">
        <a href="#">This is the first link</a>
        <a href="#">This is the second link</a>
      </div>
    </div>
  </div>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 添加汉堡图标，并使响应自定义导航栏与div块

2条答案

相关问题

热门标签

最新问答