800px in width blog

For those who build web

Animated pure css dropdown menu

Hi all. Since I posted a 3 level deep pure css menu I’ve been playing with it around. I thought it would be cool to add some animation on it, since CSS3 with it’s “transitions” is able to do so. It took around 1 hour to create a new version of pure css menu, with little bit of animations.

I want to inform you in advance that this menu is not ideal. Depended on its content it should be changed to work properly. So if you decided to use it on your site, I would recommend you to test how it works with your particular content. Let’s say that it is Alpha 0.1 version of pure css animated 3 level deep menu.

Let’s check it out, here is how it looks and works:

Read more

CSS3 only dropdown menu

Any site starts with its navigation. Considering the fact that content nowadays is waaay more complex than it was in the past – building a one level navigation menu is not enough in pretty much all cases. There are many examples of multi-level dropdown menus built with JavaScript. Using JS for this purpose is of course widely accepted practice. However, as for me, when we have an opportunity to avoid using extra JS code on our beautiful sites, we have to grab and use this opportunity for the next reasons:

  • extra JS could overload the DOM
  • JS could overload users RAM
  • JS affects overall perfomance

So if we could create a dropdown menu without help of JS why don’t we try it?

Read more