3
votes

Comment espacer uniformément trois points en tant qu'icône de menu de hamburgers maigre?

Je veux que le code affiche les 3 barres et que les 3 points deviennent éventuellement des options de liste déroulante. Pour une raison quelconque, le premier des 3 points ne veut pas être espacé correctement.

<div id="dropdown">
  <div id="dot"></div>
  <div id="bar"></div>
  <div id="dot"></div>
  <div id="bar"></div>
  <div id="dot"></div>
  <div id="bar"></div>
</div>

#dropdown {
  background: #3f51b5;
  padding: 30px;
  margin: 0px;
}

#dot {
  width: 5px;
  height: 5px;
  background: white;
  border-radius: 50%;
  float: right;
}

#bar {
  width: 25px;
  height: 3px;
  background: white;
  margin: 5px;
}

Image de ce qui est renvoyé:

p >

html css dropdown

1 commentaires

Veuillez fournir un exemple reproductible minimal

3 Réponses :

7
votes

C'est une chose difficile à faire avec les flotteurs. Une solution possible pourrait être d'envelopper les points et les barres dans un div. Ensuite, vous pouvez positionner ces divs d'emballage dans le style que vous aimez. J'ai utilisé flexbox pour cela dans l'extrait de code suivant.

<div id="dropdown">
  <div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
  <div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

#dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #3f51b5;
  padding: 30px;
  margin: 0px;
}

.dot {
  width: 5px;
  height: 5px;
  margin: 5px;
  background: white;
  border-radius: 50%;
}

.bar {
  width: 25px;
  height: 3px;
  background: white;
  margin: 5px;
}

p.s .: vous devez utiliser le mot-clé class au lieu de id pour les éléments répétitifs. Cela peut toujours fonctionner, mais est considéré comme une mauvaise pratique et pourrait casser les implémentations javascript en utilisant cet id.

0 commentaires

3
votes

Vous pouvez facilement le faire avec un élément pour chaque:

<div id="dropdown">
  <div id="bar"></div>
  <div id="dot"></div>
</div>

#dropdown {
  background: #3f51b5;
  padding: 10px 50px;
  overflow:hidden;
}

#dot {
  width: 5px;
  height: 5px;
  margin: 15px 0;
  background:#fff;
  border-radius:50%;
  float: right;
  position:relative;
}
#dot:before,
#dot:after{
  content:"";
  position:absolute;
  height:inherit;
  width:100%;
  left:0;
  background:inherit;
  border-radius:inherit;
  top:-8px;
}
#dot:after {
  bottom:-8px;
  top:auto;
}
#bar {
  width: 25px;
  height: 3px;
  margin: 15px 0;
  background:#fff;
  float:left;
  box-sizing:border-box;
  position:relative;
}
#bar:before,
#bar:after{
  content:"";
  position:absolute;
  height:inherit;
  width:100%;
  left:0;
  background:inherit;
  top:-8px;
}
#bar:after {
  bottom:-8px;
  top:auto;
}

Voici une autre idée:

<div id="dropdown">
  <div id="bar"></div>
  <div id="dot"></div>
</div>

#dropdown {
  background: #3f51b5;
  padding: 10px 50px;
  overflow:hidden;
}

#dot {
  width: 5px;
  height: 5px;
  background:#fff;
  box-shadow:
    0 10px 0 #fff,
    0 20px 0 #fff;
  border-radius:50%;
  float: right;
}

#bar {
  width: 25px;
  height: 23px;
  padding:7px 0;
  margin: 4px 0;
  border-top:3px solid #fff;
  border-bottom:3px solid #fff;
  background:#fff content-box;
  float:left;
  box-sizing:border-box;
}

Aussi comme ceci avec un pseudo élément:

<div id="dropdown">
  <div id="bar"></div>
  <div id="dot"></div>
</div>

#dropdown {
  background: #3f51b5;
  padding: 10px 50px;
  overflow:hidden;
}

#dot {
  width: 10px;
  height: 30px;
  background: 
   radial-gradient(5px 5px at center, white 57%, transparent 61%) top/10px 10px;
  float: right;
}

#bar {
  width: 25px;
  height: 22px;
  margin: 4px 0;
  background: 
    linear-gradient(#fff,#fff) top/100% 3px,
    linear-gradient(#fff,#fff) center/100% 3px,
    linear-gradient(#fff,#fff) bottom/100% 3px;
  background-repeat:no-repeat;
  float:left;
}

3 commentaires

Les deux approches sont intéressantes, mais à certains niveaux de zoom de la page, le rendu est loin d'être parfait (espacement irrégulier pour la première / hauteur de barre inégale pour la seconde).

Je ne vois pas cela dans Chrome. Quel navigateur?

Chrome 71, Win10 x64. Peut-être que je dois apprendre à accepter quelque chose, cela arrive pour toutes vos variantes (à certains niveaux de zoom de la page), également pour l'autre réponse + pour le html / css de la question.

0
votes

Utilisez quelque chose comme si vous voulez vérifier le premier point spécifique

#dropdown div:first-child { 
  position:relative;
  top:4px
}

0 commentaires