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: 2019-12-09 01:52:07
Language: css
Highlight Mode: css
|
| Copy Codes: Use Free Notepad ++ |
|
Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor
|
|
Copied To Clipboard!
<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 https://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>
|
