• Horizontal CSS Menus
• Vertical CSS Menus
• Image CSS
• Form CSS
• DIVs and containers
• Links & Buttons
• CSS3 demos
• Other
• Browse All

• Hosting Discounts

• Layouts Index
• Two Columns
• Three Columns
• Fixed layouts
• Liquid Layouts
• CSS Frames

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:

• Home
• Tools
• CSS
• Forums
• JavaScript

The CSS:

<link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'> <style> ul.sonarmenu{ /* Inspired by http://tympanus.net/codrops/2013/08/06/creative-link-effects */ list-style: none; } ul.sonarmenu li{ display: inline; } ul.sonarmenu a{ position: relative; display: inline-block; color: black; /* font color */ text-decoration: none; margin: 10px 20px; text-transform: uppercase; font-family: 'Raleway', sans-serif; /* font style (uses Google fonts) */ font-size: 22px; /* font size */ letter-spacing: 2px; /* letter spacing */ border-bottom: 2px solid transparent; /* Bottom border style */ } ul.sonarmenu a:hover, ul.sonarmenu a:focus{ outline: none; border-bottom: 2px solid #eee; /* Bottom border style on hover */ } ul.sonarmenu a::before, ul.sonarmenu a:after{ /* shared style for two circles */ position: absolute; top: 50%; left: 50%; width: 70px; /* width of outer circle */ height: 70px; /* height of outer circle */ border: 12px double rgba(0,0,0,0.1); /* style and color of circles */ border-radius: 50%; content: ''; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); } ul.sonarmenu a:after{ /* inner circle specific CSS */ width: 60px; /* width of inner circle */ height: 60px; /* width of inner circle */ border-width: 6px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); } ul.sonarmenu a:hover:before, ul.sonarmenu a:hover:after{ -webkit-animation: pulsate 1.2s infinite; /* animation name duration loop etc */ -moz-animation: pulsate 1.2s infinite; -ms-animation: pulsate 1.2s infinite; animation: pulsate 1.2s infinite; } /* ### Keyframe animations ### */ @-webkit-keyframes pulsate{ 30%{ opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); } 100%{ opacity: 0.3; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.5); } } @-moz-keyframes pulsate{ 30%{ opacity: 1; -moz-transform: translateX(-50%) translateY(-50%) scale(1); } 100%{ opacity: 0.3; -moz-transform: translateX(-50%) translateY(-50%) scale(0.5); } } @-ms-keyframes pulsate{ 30%{ opacity: 1; -ms-transform: translateX(-50%) translateY(-50%) scale(1); } 100%{ opacity: 0.3; -ms-transform: translateX(-50%) translateY(-50%) scale(0.5); } } @-keyframes pulsate{ 30%{ opacity: 1; transform: translateX(-50%) translateY(-50%) scale(1); } 100%{ opacity: 0.3; transform: translateX(-50%) translateY(-50%) scale(0.5); } } </style>

The HTML:

<ul class="sonarmenu"> <li><a href="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://tools.dynamicdrive.com">Tools</a></li> <li><a href="http://www.cssdrive.com">CSS</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://www.javascriptkit.com">JavaScript</a></li> </ul>

Copyright 2006-2016 Dynamic Drive