How to create a dialog interface in CSS

We want to create a dialog interface with multiple list item. First of all, let's build the list item first and wrap it with a div with a class dialog.

HTML

<div class="dialog">
    <ul>
        <li>
          <a href="#">Dashboard</a>
        </li>
        <li>
            <a href="#">Sign out</a>
        </li>
    </ul>
</div>

Let's style the element with the CSS. Change the background colour and text colour.

CSS

    .dialog {
        background-color: #1c3d5a;
        border-radius: .25rem;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
        margin-left: .5rem;
        margin-right: .5rem;
        width: 300px;
        margin: 0 auto;
    }

We should add some style into the list item. So, we want to change the colour into white and remove the bullet.

.dialog ul {
        list-style: none;
    padding: 0;
    width: 100%;
}

.dialog li {
        padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
}


.topNav-dropdown li a {
    color: #fff;
}

Seems good. Now, we need to add a little triangle at the bottom to make it looks it comes out from the bottom. Let's add another div with the class arrow inside the .dialog element and add some CSS to style the new element.

<div class="dialog">
    <ul>
        <li>
          <a href="#">Dashboard</a>
        </li>
        <li>
            <a href="#">Sign out</a>
        </li>
    </ul>
    <div class="arrow"></div>
</div>

.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #1c3d5a;
    position: relative;
    top: .6rem;
}

Hmm. Now we can see the little triangle at the bottom. We need to centre the position. Since, it's wrapped in one div (.dialog), let's align with the power of the flexbox. Add new rules in the .dialog class.

    .dialog {
        background-color: #1c3d5a;
        border-radius: .25rem;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
        margin-left: .5rem;
        margin-right: .5rem;
        width: 300px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

Seems good. Let's add some animation to make it pop up. Create a new animation property in the CSS and assign it into .dialog class.

@keyframes popout {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
@-webkit-keyframes popout {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

    .dialog {
        background-color: #1c3d5a;
        border-radius: .25rem;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
        margin-left: .5rem;
        margin-right: .5rem;
        width: 300px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      animation: popout 0.7s ease;
    }

Hopefully, you enjoyed this little tutorial. If you want to grab a code, feel free to grab it on my CodePen.

Original submitted from my blog