如何使我的汉堡菜单变成9点? [英] How do i make my burger menu into 9 dots?

问题描述

我目前正在制作Google主页，我需要制作一个便当菜单，换句话说就是9点菜单.

Im currently making the google homepage and I need to make a bento menu with other words a 9 doted menu.

我尝试通过首先制作汉堡菜单并添加 text-decoration:点缀； 来实现此目的的方法.我认为这会使菜单中的字符串点缀成点，但是并没有.

The way I tried to make it was by first making a burger menu and adding text-decoration: dotted; I thought this would make the strings in my menu dotted but it didnt.

.bento-string {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

<div class="bento-menu">
  <div class="bento-string"></div>
  <div class="bento-string"></div>
  <div class="bento-string"></div>
</div>

推荐答案

要实现类似于便当菜单"的功能，图标，例如，您可以尝试使用CSS网格.看看下面的内容.

To achieve something looking like a "bento-menu" icon you can try css grid for example. Take a look at the following.

.bento-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  height : 22px;
  width : 22px;
}

.bento-dot {
  width : 6px;
  height: 6px;
  border-radius: 999px;
  background:#000000;
  overflow: hidden;
}

<div class="bento-menu">
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
  <div class="bento-dot"></div>
</div>

但是我强烈建议您使用通用的svg图标(如果只是用作图标).取决于您要如何处理它.

But I would strongly suggest using a common svg icon, if it is just used as icon. Depends on what are you trying to do with it.

这篇关于如何使我的汉堡菜单变成9点?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！