html unordered list

The use of HTML <ul> element and its <li> element customization

intro

In a HTML file an unordered list of items, which is typically rendered as a bulleted list, is represented by the <ul> HTML element ¹ with the items represented by some <li> elements ². Marker for the bullet of <li> element can be set to disc, circle, square, or without marker using CSS list-style-type property of the element ³. Further customization using CSS makes the choices for the bullet unlimited ⁴ and it is also possible to change the <li> elements layout, e.g. arranged in horizontal direction ⁵, for website navigation bar ⁶.

Some simple examples of using <ul> and <li> elements, with default style using only HTML, advanced by CSS only, also further with the help of CSS selectors ⁷, are given here.

default

Following HTML code

There are some animals that able to
<ul>
<li>fly</li>
<li>swim</li>
<li>run</li>
</ul>
and many others.

will produce

as the result. An unordered list can also be placed in other an unordered list. Let us advance the previous as follow

There are some animals that able to
<ul>
  <li>fly</li>
  <ul>
    <li>bird</li>
    <li>bat</li>
    <li>butterfly</li>
  </ul>
  <li>swim</li>
  <ul>
    <li>fish</li>
    <li>octopus</li>
    <li>cetacean</li>
    <ul>
      <li>dolphin</li>
      <li>porpoise</li>
      <li>whale</li>
      <ul>
        <li>orca</li>
        <li>narwhal</li>
        <li>beluga</li>
      </ul>
    </ul>
    <li>crocodile</li>
  </ul>
  <li>run</li>
  <ul>
    <li>ostrich</li>
    <li>cheetah</li>
    <li>lizard</li>
    <li>spider</li>
  </ul>
</ul>
and do many others.

to produce

In a <ul> element every <li> element can be substitued with another <ul> element, which makes nested unordered list. Notice that indentations are used just to make the code easier to read but do not affect the result, e.g.

There are some animals that able to
<ul>
  <li>fly</li>
  <ul><li>bird</li><li>bat</li><li>butterfly</li></ul>
  <li>swim</li>
  <ul><li>fish</li><li>octopus</li><li>cetacean</li>
    <ul><li>dolphin</li><li>porpoise</li><li>whale</li>
      <ul><li>orca</li><li>narwhal</li><li>beluga</li></ul>
    </ul>
    <li>crocodile</li>
  </ul>
  <li>run</li>
  <ul><li>ostrich</li><li>cheetah</li><li>lizard</li><li>spider</li></ul>
</ul>
and do many others.

will produce the same as previous result, but as it can be seen, it is not so easy to read compared to previous code.

border

Before using CSS to customize a unordered list, let us first use CSS to show area of <ul> and <li> elements. Following code

<style>
ul.fruit0 {
  border: 1px solid blue;
  > li {
    border: 1px solid red;
  }
}
</style>

<ul class="fruit0">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cucumber</li>
  <li>Durian</li>
</ul>

will produce

showing area of <ul> and <li> elements with blue and red borders, respectively.

margin

Let us modify margin of the <ul> element first from its default value to 50px 40px 30px 20px and

is the result. Top-margin is 50px, right-margin is 40px, bottom-margin is 30px, and left-margin is 20px. These margins if from its parent element. The modified sytle is

ul.fruit1 {
  border: 1px solid blue;
  margin: 50px 40px 30px 20px;
  > li {
    border: 1px solid red;
  }
}

Notice the difference from previous <style> element. From now, if other HTML elements are the same, only content of <style> element is showed.

Let us now change only margin of <li> element as follow

ul.fruit2 {
  border: 1px solid blue;
  > li {
    border: 1px solid red;
    margin: 0px 100px 10px 40px;
  }
}

and get

as the result. Notice that those margins affecting layout of <li> elements inside its parent element, which is the <ul> element. It also affecting between elements within the same parent element.

padding

After studying margin style in brief, let us now do that for padding.

Following style

ul.fruit3 {
  border: 1px solid blue;
  padding: 40px 30px 20px 10px;
  > li {
    border: 1px solid red;
  }
}

will produce

as the result. Notice that padding is affecting its child elements, where in this case are the <li> elements.

Then following result is obtained

using

ul.fruit4 {
  border: 1px solid blue;
  > li {
    border: 1px solid red;
    padding: 40px 30px 20px 10px;
  }
}

as the style. Since child element of a <li> element is fruit name, then in it adds padding inside the element.

margin, border, padding

The three CSS properties, margin, border, and padding, have same value formats, which are

• all-sides, e.g. margin: 10px;,
• top-bottom right-left, e.g. border: 4px 8px;,
• top right bottom left, e.g. padding: 10px 30px 5px 20px;.

Or it can also be set for each side separetely

• top side only, e.g. border-top: 10px;,
• right side only, e.g. padding-right: 2px;,
• bottom side only, e.g. margin-bottom: 5px;,
• left side only, e.g. border-left: 4px;.

markers

There are four default options for <li> element bullet, which are three markers disc, circle, square, and addition no marker none. Let us use following code, where the style is set in each <li> element directly.

Above result is obtained using following code

<ul>
  <li>Default</li>
  <li style='list-style-type: disc;'>Apple</li>
  <li style='list-style-type: circle;'>Banana</li>
  <li style='list-style-type: square;'>Coconut</li>
  <li style='list-style-type: none;'>Durian</li>
</ul>

Notice that default marker is disc.

Is it possible to user other markers for <li> element? Yes, it is possible. Even each <li> element can have different marker. See following result.

Above result is obtained using following code

<style>
ul.food0 {
  list-style-type: none;
  > li:nth-child(1)::before { content: "🥐 " }
  > li:nth-child(2)::before { content: "🍩 " }
  > li:nth-child(3)::before { content: "🍔 " }
  > li:nth-child(4)::before { content: "🍕 " }
  > li:nth-child(5)::before { content: "🍣 " }
  > li:nth-child(6)::before { content: "🌮 " }
}
</style>

<ul class="food0">
  <li>Croissant</li>
  <li>Doughnut</li>
  <li>Hamburger</li>
  <li>Pizza</li>
  <li>Sushi</li>
  <li>Taco</li>
</ul>

Notice that there is CSS selectors :nth-child() and ::before to select the right <li> element and apply certaint style, which is particular marker in this case. You can find other HTML entities representing food on &what; website and also other characters ⁸. What would happen when ::before is replaced with ::after? Explore this feature and get your understanding about it.

menu bar

Let us see the result first as follow.

As mouse is hovering an item on the menu bar, mouse cursor changes and also font and background colors. All are controlled using features supported by CSS. Required code for that is as follow.

<style>
ul.menu0 {
  list-style-type: none;
  overflow: hidden;
  background: #228;
  color: #ccc;
  padding-left: 0px;
  border-radius: 8px;
  > li {
    float: left;
    padding: 2px 16px;
  }
  > li:hover {
    color: white;
    cursor: pointer;
    background: #88f;
  }
}
</style>

<ul class="menu0">
  <li>File</li>
  <li>Edit</li>
  <li>Layout</li>
  <li>Style</li>
  <li>View</li>
  <li>Help</li>
</ul>

How the style changes as the mouse hovering an element is set using :hover selector. After it leaving the element styles become the default again.

circular menu

Based on previous knowledge about CSS, let us make a circular or radial menu as follow.

The menu is showing Gardner’s mutliple intelligences ⁹. It has features as in previous example, that is changing mouse cursor and also menu option text and background colors. The differences are it set each <li> elements with different position absolute to its parent element, whose relatively is positioned to futher parent element, the <body> element.

<style>
ul.menu1 {
  list-style-type: none;
  position: relative;
  margin-top: 0px;
  height: 210px;
  > li {
    border: 1px solid black;
    width: 120px;
    text-align: center;
    border-radius: 8px;
    color: white;
    background: black;
    position: absolute;
  }
  > li:hover {
    color: black;
    cursor: pointer;
    background: white;
  }
  > li:nth-child(1) { left: 200px; top: 0px; }
  > li:nth-child(2) { left: 280px; top: 50px; }
  > li:nth-child(3) { left: 300px; top: 100px; }
  > li:nth-child(4) { left: 280px; top: 150px; }
  > li:nth-child(5) { left: 200px; top: 200px; }
  > li:nth-child(6) { left: 120px; top: 150px; }
  > li:nth-child(7) { left: 100px; top: 100px; }
  > li:nth-child(8) { left: 120px; top: 50px; }
}
</style>

<ul class="menu1">
  <li>Visual</li>
  <li>Liguistic</li>
  <li>Logical</li>
  <li>Kinesthetic</li>
  <li>Musical</li>
  <li>Interpersonal</li>
  <li>Intrapersonal</li>
  <li>Naturalistic</li>
</ul>

Above code is for previous circular menu. Notice the parts with CSS selector :nth-child(), which are containing left and top position of all <li> elements. You can modify these values to obtain different layout other than circular menu.

what’s next

I believe, using given knowledge about <ul> and <li> elements accompanied by CSS with its selector features you can make any kind of menus that you want, where only imagination is the limit. Furthermore, there are hundreds of inspiration of menus using only CSS, or enhanced with JS, available to learn ¹⁰.

The use of JS, which is out of scope of this post, will make the process of creating menu easier. You can just define array for menu items, use for loop iterating over the array, create all items, and then add them to parent element. CSS selectors can also be used using JS, which make the use of them more convenient especially when they should be repeated for other elements.

closing

After read this post, you will be able to view the <ul> and <li> elements in different way, hopefully. Instead of using them as bulleted list, they can also serve as menu, where the structure might be clearer compare to the menu using nested <div> elements. There is not only single solution for something. You can make menu with many ways, e.g. an older way with <table>, <tr>, and <td> elements; here with <ul> and <li> elements; or next with nested <div> and <span> elements, where all aproaches should produce the same result but with different limitation and ease of maintenance.

notes