fleche dropdown bootstrap

Par Flohw, il y a 14 ans

Les bases HTML/CSS

Bonjour,

n'étant pas un grand amateur de css et dans un élant d'intérêt et de curiosité, je souhaiterais savoir comment faire la petite fleche du menu qui apparait d'un dropdown du bootstrap twitter.

Si quelqu'un veut bien venir en aide d'un développeur php qui laisse le design à ceux qui s'en occupe :) (pas parce qu'il déteste ca, mais parce que la créativité, l'association des propriétés css et les gouts et les couleurs ne sont pas son fort !)

merci à vous :)

3 réponses

Vinzgore, il y a 14 ans

Vraisemblablement, et d'après le site, ce serait :

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

Mais le site précise bien :
"Button dropdowns require the Bootstrap dropdown plugin to function."

Donc je ne sais pas quel bootstrap tu utilise, mais le mieux serait d'en faire un personnalisé (possible sur le site !)

Flohw, il y a 14 ans

je n'ai pas du etre assez clair :)
voici ce que je coudrais savoir faire : la petite fleche qui est au dessus du mot "action", je connais le code html du bootstrap, mais comment je fais moi pour le code css et html, je n'arrive pas a trouver

Xuishak, il y a 14 ans

Visiblement ce serait ce morceau de css qui créerait la flèche :

.navbar .dropdown-menu::after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
position: absolute;
top: -6px;
left: 10px;
}
.navbar .dropdown-menu::before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #CCC;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 9px;
}