Subscirbe to Kodhus news letter and get new tips and tutorials right in your inbox by entering your email below

Notification panel with vertical timeline

Like & share to be notified of the new tips & tutorials:

Today we are going to take a look at how to create a notification panel that contains a vertical timeline for notifications. It has elements such as number of unread notifications on the notification icon on the top right hand side of the page and also the actual notification timeline.

HTML markup structure

We create a header that contains our notification panel trigger which is a link on the top hand side. We use Ionicons for the icon. Then we create our panel with an unordered list that represents our vertical timeline.

Styling our interface

Let’s start with the header. We have .header, .notification-trigger for opening and closing the panel using jQuery and the .notification-num which shows the number of unread notifications.

Now let’s take a look at our .panel styles. We use css media queries to change the styles of the panel for different devices, in our case mobile and desktop. When using media queries, It’s a good practice to style the responsive elements first in the mobile version, and then using media queries to change them for the bigger screens.

As you can see in the above, in order to have a full height panel we have used position: absolute, set the top to 0 and then used height: 100% to set the height of the panel. also you can see that the width is set to 100%.The reason is that as I said, we first need to think about the styles for the mobile and in mobile version, we want it to be filling the full width of the browser. Then we use the following media query to set the style of the panel for desktop version.

The display is set to none, so that using .panel.visible, we show it when clicking on the trigger icon on top right(We use jQuery to achieve that).

Alright, Now to the fun part of the vertical timeline.

We have used Pesudo element :after on the parent ul for the vertical line and also for the li for the lines after each circle to the actual notifications text.

Finally we use jQuery to toggle the .visible class on the .panel to toggle it’s visibility.