Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
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.


The CSS:


Code Info

Rate this code:

Date Posted: 02/04/2015

Revision History: None

Usage Terms: Click here

Your Comments (0)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.