Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Menus & Navigation >> Pure CSS3 Ball Menu


Code Snippet </> Info


Snippet Name: Pure CSS3 Ball Menu

Description: Add a cool CSS3 ball menu that transitions in to a different color and expands in to many little menu balls on mouseover.
Example: View Code Demo

Note: Simply take the code and align the DIV class="menu" positioning on your page as needed.

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-07-02 04:34:27

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<html> <head> <title>Pure CSS3 Ball Menu</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> /* Begin Pure CSS3 Ball Menu */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Amit Datta : http://amitdatta.blogspot.in/ : https://developer.mozilla.org/en-US/profiles/amitdatta : Creative Commons License == */ BODY {margin:0 auto; width:auto; font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;} a.sub:link {color:#000000; text-decoration:none;} a.sub:visited {color:#000000;} a.sub:hover {color:#00ff00; text-decoration:underline;} a.sub:active {color:#ffff00;} .menu {position:relative;background:#e6e6e6;color:#000;height:100px;width:180px;margin-left:50%;top:120px;border-radius:90px;text-align:center;padding-top:80px;font-weight:bold;font-size:14px;} .submenu {display:none;position:absolute;background:rgba(0,48,255,0.9);height:60px;width:100px;border-radius:50px;padding-top:40px;font-size:12px;} .menu:hover {background:rgba(0,48,255,0.9);-moz-transition:all 1000ms ease;-webkit-transition:all 1000ms ease;-o-transition:all 1000ms ease;-ms-transition:all 1000ms ease;transition:all 1000ms ease;} .menu:hover > .submenu {display:block;-moz-animation:appear 1000ms normal 1 ease;-webkit-animation:appear 1000ms normal 1 ease;-o-animation:appear 1000ms normal 1 ease;-ms-animation:appear 1000ms normal 1 ease;animation:appear 1000ms normal 1 ease; } @-moz-keyframes appear {from {-moz-transform:scale(0); background:rgba(0,0,0,1);} to {-moz-transform:scale(1); background:rgba(0,48,255,0.9);} } @-webkit-keyframes appear {from {-webkit-transform:scale(0); background:rgba(0,0,0,1);} to {-webkit-transform:scale(1); background:rgba(0,48,255,0.9);} } @-o-keyframes appear {from {-o-transform:scale(0); background:rgba(0,0,0,1);} to {-o-transform:scale(1); background:rgba(0,48,255,0.9);} } @-ms-keyframes appear {from {-ms-transform:scale(0); background:rgba(0,0,0,1);} to {-ms-transform:scale(1); background:rgba(0,48,255,0.9);} } @keyframes appear {from {transform:scale(0); background:rgba(0,0,0,1);} to {transform:scale(1); background:rgba(0,48,255,0.9);} } .l1 {margin-left:-20px; margin-top:-157px;} .l2 {margin-left:100px; margin-top:-157px;} .l3 {margin-left:-80px; margin-top:-53px;} .l4 {margin-left:100px; margin-top:46px;} .l5 {margin-left:-20px; margin-top:46px;} .l6 {margin-left:160px; margin-top:-53px;} </style> </head> <body> <div id="content"> <h3 align="center">Pure CSS3 Ball Menu</h3> <div align="center">Roll your cursor over the ball below for an example. <br /> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_197.html">Pure CSS3 Ball Menu Code Snippet</a> page. ] </div> <div class="menu"> SnapBuilder <div class="submenu l1"><a href="#" class="sub">Link 1</a></div> <div class="submenu l2"><a href="#" class="sub">Link 2</a></div> <div class="submenu l3"><a href="#" class="sub">Link 3</a></div> <div class="submenu l4"><a href="#" class="sub">Link 4</a></div> <div class="submenu l5"><a href="#" class="sub">Link 5</a></div> <div class="submenu l6"><a href="#" class="sub">Link 6</a></div> </div> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library