Como eu posso fazer esses dois menus?
Eu peguei do site do Twitter, mas não queria pegar os códigos deles, como eu posso fazer isso? de forma que eu possa adicionar infinitos numeros com suas respectivas descrições..
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadePara fazer isso é necessário utilizar a função counter()
da propriedade content
dentro de pseudo-elemento CSS ::before
de cada item da lista. (Documentação).
Para o posicionamento utilize margens, padding e posicionamento absoluto. Para o circulo, utilize a propriedade border-radius
. Na opção horizontal é só reposicionar os <li>
com display: inline-block;
e alterar os valores de posição e espaço. Para ficar igual só faltou remover os "excessos" dos lados.
ol {
counter-reset: item;
list-style-type: none;
padding-left: 20px;
margin-left: 20px;
border-style: solid;
border-color: blue;
border-width: 0 0 0 1px;
}
li {
position: relative;
line-height: 30px;
margin-bottom: 30px;
}
li::before {
counter-increment: item;
content: counter(item);
position: absolute;
left: -37px;
width: 30px;
height: 30px;
border-radius: 15px;
border: 1px blue solid;
background-color: #fff;
color: blue;
text-align: center;
}
ol.hori {
display: inline-block;
border-width: 1px 0 0 0;
margin: 0;
padding: 15px 0 0;
}
ol.hori li {
display: inline-block;
margin: 0 15px;
}
ol.hori li::before {
top: -30px;
left: 50%;
margin-left: -15px;
}
<ol>
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ol>
<ol class="hori">
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ol>