Standard reusable structures

As a frontend developer, you are always struggling with repeatable elements. In almost all cases, you feel as if you are trying to reinvent the wheel, so what can you do to not repeat yourself? Let's create a few standard and reusable structures.

Reusable multilevel menus

A multilevel menu is the most reusable code. All bigger websites have a menu that you can describe as reusable code.

Let's begin with the HTML code:

<ul class="menu-multilevel">
    <li>
        <a href="#">Level one - item one</a>
        <ul>
            <li><a href="#">Level two - item one</a></li>
            <li><a href="#">Level two - item two</a></li>
            <li><a href="#">Level two - item three</a></li>
            <li><a href="#">Level two - item four</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Level two - item one...