This article will show some techniques to create effects using CSS3 on the example of the menus. The beauty of my idea is that it would simply compose elements, such as icons of the main title and secondary title, which will be animated by the cursor moving using only CSS transitions and CSS animation. We will consider a few different effects for the elements.

Icons that are being used in the demo are the typeface of Web symbols. The typeface is created by Just Be Nice studio.

HTML Layout

HTML menu structure will be as an unordered list where each element is a link, which includes the span with an icon and div with the main and secondary title:

<ul class="ca-menu">

<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main">Articles</h2>
<h3 class="ca-sub">Web development articles</h3>
</div>

...
</ul>

As we use the font for the icons, we will write the corresponding letter for the icon.