Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Horizontal CSS Menus: Here

CSS3 Sonar Menu

Author: Dynamic Drive

CSS3 Sonar Menu is a horizontal list menu that highlights each menu link with a pulsating sonar effect. Inside each menu link, a :before and :after pseudo element generates two circles (by setting their border-radius to 50% ) with "double" borders to form the sonar look. CSS3 keyframe animation is then used to animate the sonar's scale (via CSS3 transform), creating a moving, pulsating effect.

The sonar effect works in IE10+ and all modern versions of Firefox and Chrome, with the exception of Safari. In Safari, the browser currently has trouble animating pseudo elements unfortunately.

Demo:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: None

Usage Terms: Click here

Your Comments
Copyright 2006-2016 Dynamic Drive