Menu with vertical and horizontal balls

Question

Menu with vertical and horizontal balls

Navigation

#1 by (3 votes)

2

How can I make these two menus?

I got it from the Twitter site but did not want to get their codes, how can I do it? so that I can add infinite numbers with their respective descriptions ..

html css

asked by anonymous 28.08.2015 / 01:10

1 answer

Extract PDF information through position using PHP Problem displaying layout on multiple devices

score 3 · Accepted Answer

To do this you need to use the counter() function of the content property within the CSS% pseudo-element of each list item. ( Documentation ).

For positioning use margins, padding and absolute positioning. For the circle, use the ::before property. In the horizontal option, just reposition border-radius with <li> and change position and space values. To stay the same, it was only necessary to remove the "excesses" from the sides.

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>