check out path-like menu http://jsfiddle.net/u7cjj/1/ , click on orange button see menu fan out. effect accomplished toggling class using jquery , css animations.
the demo works in webkit-based browsers not on firefox. class toggled on click no menu items show. firefox not support type of css animations? there way make work using polyfill or javascript/jquery fallback?
css below:
/* global reset ------------------------------------------------------------------------------*/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 license: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .force3d, .animation-flyout, section.container div.button.expanded.cam, section.container div.button.expanded.friend, section.container div.button.expanded.location, section.container div.button.expanded.music, section.container div.button.expanded.comment, section.container div.button.expanded.status, .animation-flyin, section.container div.button.collapsed.cam, section.container div.button.collapsed.friend, section.container div.button.collapsed.location, section.container div.button.collapsed.music, section.container div.button.collapsed.comment, section.container div.button.collapsed.status { -webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform-style: preserve-3d; } .animation-flyout, section.container div.button.expanded.cam, section.container div.button.expanded.friend, section.container div.button.expanded.location, section.container div.button.expanded.music, section.container div.button.expanded.comment, section.container div.button.expanded.status { -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.3); -moz-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.3); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.3); -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } .animation-flyin, section.container div.button.collapsed.cam, section.container div.button.collapsed.friend, section.container div.button.collapsed.location, section.container div.button.collapsed.music, section.container div.button.collapsed.comment, section.container div.button.collapsed.status { -webkit-animation-timing-function: cubic-bezier(0.6, -0.3, 0.735, 0.045); -moz-animation-timing-function: cubic-bezier(0.6, -0.3, 0.735, 0.045); animation-timing-function: cubic-bezier(0.6, -0.3, 0.735, 0.045); -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes flyout-cam { 0% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg); -moz-transform: translate3d(0, 0, 0) rotate(0deg); -ms-transform: translate3d(0, 0, 0) rotate(0deg); -o-transform: translate3d(0, 0, 0) rotate(0deg); transform: translate3d(0, 0, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(0px, -136px, 0) rotate(360deg); -moz-transform: translate3d(0px, -136px, 0) rotate(360deg); -ms-transform: translate3d(0px, -136px, 0) rotate(360deg); -o-transform: translate3d(0px, -136px, 0) rotate(360deg); transform: translate3d(0px, -136px, 0) rotate(360deg); } } @-webkit-keyframes flyout-friend { 0% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg); -moz-transform: translate3d(0, 0, 0) rotate(0deg); -ms-transform: translate3d(0, 0, 0) rotate(0deg); -o-transform: translate3d(0, 0, 0) rotate(0deg); transform: translate3d(0, 0, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(42px, -129px, 0) rotate(360deg); -moz-transform: translate3d(42px, -129px, 0) rotate(360deg); -ms-transform: translate3d(42px, -129px, 0) rotate(360deg); -o-transform: translate3d(42px, -129px, 0) rotate(360deg); transform: translate3d(42px, -129px, 0) rotate(360deg); } } @-webkit-keyframes flyout-location { 0% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg); -moz-transform: translate3d(0, 0, 0) rotate(0deg); -ms-transform: translate3d(0, 0, 0) rotate(0deg); -o-transform: translate3d(0, 0, 0) rotate(0deg); transform: translate3d(0, 0, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(80px, -110px, 0) rotate(360deg); -moz-transform: translate3d(80px, -110px, 0) rotate(360deg); -ms-transform: translate3d(80px, -110px, 0) rotate(360deg); -o-transform: translate3d(80px, -110px, 0) rotate(360deg); transform: translate3d(80px, -110px, 0) rotate(360deg); } } @-webkit-keyframes flyout-music { 0% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg); -moz-transform: translate3d(0, 0, 0) rotate(0deg); -ms-transform: translate3d(0, 0, 0) rotate(0deg); -o-transform: translate3d(0, 0, 0) rotate(0deg); transform: translate3d(0, 0, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(110px, -80px, 0) rotate(360deg); -moz-transform: translate3d(110px, -80px, 0) rotate(360deg); -ms-transform: translate3d(110px, -80px, 0) rotate(360deg); -o-transform: translate3d(110px, -80px, 0) rotate(360deg); transform: translate3d(110px, -80px, 0) rotate(360deg); } } @-webkit-keyframes flyout-comment { 0% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg); -moz-transform: translate3d(0, 0, 0) rotate(0deg); -ms-transform: translate3d(0, 0, 0) rotate(0deg); -o-transform: translate3d(0, 0, 0) rotate(0deg); transform: translate3d(0, 0, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(129px, -42px, 0) rotate(360deg); -moz-transform: translate3d(129px, -42px, 0) rotate(360deg); -ms-transform: translate3d(129px, -42px, 0) rotate(360deg); -o-transform: translate3d(129px, -42px, 0) rotate(360deg); transform: translate3d(129px, -42px, 0) rotate(360deg); } } @-webkit-keyframes flyout-status { 0% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg); -moz-transform: translate3d(0, 0, 0) rotate(0deg); -ms-transform: translate3d(0, 0, 0) rotate(0deg); -o-transform: translate3d(0, 0, 0) rotate(0deg); transform: translate3d(0, 0, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(136px, 0px, 0) rotate(360deg); -moz-transform: translate3d(136px, 0px, 0) rotate(360deg); -ms-transform: translate3d(136px, 0px, 0) rotate(360deg); -o-transform: translate3d(136px, 0px, 0) rotate(360deg); transform: translate3d(136px, 0px, 0) rotate(360deg); } } @-webkit-keyframes flyin-cam { 0% { -webkit-transform: translate3d(0px, -136px, 0) rotate(0deg); -moz-transform: translate3d(0px, -136px, 0) rotate(0deg); -ms-transform: translate3d(0px, -136px, 0) rotate(0deg); -o-transform: translate3d(0px, -136px, 0) rotate(0deg); transform: translate3d(0px, -136px, 0) rotate(0deg); } 40% { -webkit-transform: translate3d(0px, -136px, 0) rotate(360deg); -moz-transform: translate3d(0px, -136px, 0) rotate(360deg); -ms-transform: translate3d(0px, -136px, 0) rotate(360deg); -o-transform: translate3d(0px, -136px, 0) rotate(360deg); transform: translate3d(0px, -136px, 0) rotate(360deg); } 100% { -webkit-transform: translate3d(0, 0, 0) rotate(360deg); -moz-transform: translate3d(0, 0, 0) rotate(360deg); -ms-transform: translate3d(0, 0, 0) rotate(360deg); -o-transform: translate3d(0, 0, 0) rotate(360deg); transform: translate3d(0, 0, 0) rotate(360deg); } } @-webkit-keyframes flyin-friend { 0% { -webkit-transform: translate3d(42px, -129px, 0) rotate(0deg); -moz-transform: translate3d(42px, -129px, 0) rotate(0deg); -ms-transform: translate3d(42px, -129px, 0) rotate(0deg); -o-transform: translate3d(42px, -129px, 0) rotate(0deg); transform: translate3d(42px, -129px, 0) rotate(0deg); } 40% { -webkit-transform: translate3d(42px, -129px, 0) rotate(360deg); -moz-transform: translate3d(42px, -129px, 0) rotate(360deg); -ms-transform: translate3d(42px, -129px, 0) rotate(360deg); -o-transform: translate3d(42px, -129px, 0) rotate(360deg); transform: translate3d(42px, -129px, 0) rotate(360deg); } 100% { -webkit-transform: translate3d(0, 0, 0) rotate(360deg); -moz-transform: translate3d(0, 0, 0) rotate(360deg); -ms-transform: translate3d(0, 0, 0) rotate(360deg); -o-transform: translate3d(0, 0, 0) rotate(360deg); transform: translate3d(0, 0, 0) rotate(360deg); } } @-webkit-keyframes flyin-location { 0% { -webkit-transform: translate3d(80px, -110px, 0) rotate(0deg); -moz-transform: translate3d(80px, -110px, 0) rotate(0deg); -ms-transform: translate3d(80px, -110px, 0) rotate(0deg); -o-transform: translate3d(80px, -110px, 0) rotate(0deg); transform: translate3d(80px, -110px, 0) rotate(0deg); } 40% { -webkit-transform: translate3d(80px, -110px, 0) rotate(360deg); -moz-transform: translate3d(80px, -110px, 0) rotate(360deg); -ms-transform: translate3d(80px, -110px, 0) rotate(360deg); -o-transform: translate3d(80px, -110px, 0) rotate(360deg); transform: translate3d(80px, -110px, 0) rotate(360deg); } 100% { -webkit-transform: translate3d(0, 0, 0) rotate(360deg); -moz-transform: translate3d(0, 0, 0) rotate(360deg); -ms-transform: translate3d(0, 0, 0) rotate(360deg); -o-transform: translate3d(0, 0, 0) rotate(360deg); transform: translate3d(0, 0, 0) rotate(360deg); } } @-webkit-keyframes flyin-music { 0% { -webkit-transform: translate3d(110px, -80px, 0) rotate(0deg); -moz-transform: translate3d(110px, -80px, 0) rotate(0deg); -ms-transform: translate3d(110px, -80px, 0) rotate(0deg); -o-transform: translate3d(110px, -80px, 0) rotate(0deg); transform: translate3d(110px, -80px, 0) rotate(0deg); } 40% { -webkit-transform: translate3d(110px, -80px, 0) rotate(360deg); -moz-transform: translate3d(110px, -80px, 0) rotate(360deg); -ms-transform: translate3d(110px, -80px, 0) rotate(360deg); -o-transform: translate3d(110px, -80px, 0) rotate(360deg); transform: translate3d(110px, -80px, 0) rotate(360deg); } 100% { -webkit-transform: translate3d(0, 0, 0) rotate(360deg); -moz-transform: translate3d(0, 0, 0) rotate(360deg); -ms-transform: translate3d(0, 0, 0) rotate(360deg); -o-transform: translate3d(0, 0, 0) rotate(360deg); transform: translate3d(0, 0, 0) rotate(360deg); } } @-webkit-keyframes flyin-comment { 0% { -webkit-transform: translate3d(129px, -42px, 0) rotate(0deg); -moz-transform: translate3d(129px, -42px, 0) rotate(0deg); -ms-transform: translate3d(129px, -42px, 0) rotate(0deg); -o-transform: translate3d(129px, -42px, 0) rotate(0deg); transform: translate3d(129px, -42px, 0) rotate(0deg); } 40% { -webkit-transform: translate3d(129px, -42px, 0) rotate(360deg); -moz-transform: translate3d(129px, -42px, 0) rotate(360deg); -ms-transform: translate3d(129px, -42px, 0) rotate(360deg); -o-transform: translate3d(129px, -42px, 0) rotate(360deg); transform: translate3d(129px, -42px, 0) rotate(360deg); } 100% { -webkit-transform: translate3d(0, 0, 0) rotate(360deg); -moz-transform: translate3d(0, 0, 0) rotate(360deg); -ms-transform: translate3d(0, 0, 0) rotate(360deg); -o-transform: translate3d(0, 0, 0) rotate(360deg); transform: translate3d(0, 0, 0) rotate(360deg); } } @-webkit-keyframes flyin-status { 0% { -webkit-transform: translate3d(136px, 0px, 0) rotate(0deg); -moz-transform: translate3d(136px, 0px, 0) rotate(0deg); -ms-transform: translate3d(136px, 0px, 0) rotate(0deg); -o-transform: translate3d(136px, 0px, 0) rotate(0deg); transform: translate3d(136px, 0px, 0) rotate(0deg); } 40% { -webkit-transform: translate3d(136px, 0px, 0) rotate(360deg); -moz-transform: translate3d(136px, 0px, 0) rotate(360deg); -ms-transform: translate3d(136px, 0px, 0) rotate(360deg); -o-transform: translate3d(136px, 0px, 0) rotate(360deg); transform: translate3d(136px, 0px, 0) rotate(360deg); } 100% { -webkit-transform: translate3d(0, 0, 0) rotate(360deg); -moz-transform: translate3d(0, 0, 0) rotate(360deg); -ms-transform: translate3d(0, 0, 0) rotate(360deg); -o-transform: translate3d(0, 0, 0) rotate(360deg); transform: translate3d(0, 0, 0) rotate(360deg); } } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } body, html { background: white; } body { font-family: "helvetica neue", helvetica, arial, sans-serif; } div.inner-wrapper { padding: 20px; } h1, h2, h3, h4, h5, h6 { font-family: "helvetica neue", helvetica, arial, sans-serif; font-weight: 100; } a, a:link, a:active, a:visited { color: #fc511d; text-decoration: none; } a:hover { color: #c93103; } ::selection { background: #fc511d; } ::-moz-selection { background: #fc511d; } section.container { width: 400px; margin: 200px auto; position: relative; } section.container div.open-button { background-color: #fc511d; -webkit-border-radius: 120px; -moz-border-radius: 120px; -ms-border-radius: 120px; -o-border-radius: 120px; border-radius: 120px; height: 40px; width: 40px; text-align: center; position: relative; } section.container div.button { background-color: #454545; -webkit-border-radius: 40px; -moz-border-radius: 40px; -ms-border-radius: 40px; -o-border-radius: 40px; border-radius: 40px; color: white; float: left; font-size: 11px; height: 32px; left: 4px; line-height: 3em; position: absolute; text-align: center; top: 4px; width: 32px; -webkit-transition-property: all; -moz-transition-property: all; -ms-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.15s; -moz-transition-duration: 0.15s; -ms-transition-duration: 0.15s; -o-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-delay: 0; -moz-transition-delay: 0; -ms-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } section.container div.button.expanded:hover { zoom: 1.2; } section.container div.button.expanded.cam { -webkit-animation-name: flyout-cam; -moz-animation-name: flyout-cam; animation-name: flyout-cam; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; animation-delay: 0s; } section.container div.button.expanded.friend { -webkit-animation-name: flyout-friend; -moz-animation-name: flyout-friend; animation-name: flyout-friend; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.05s; -moz-animation-delay: 0.05s; animation-delay: 0.05s; } section.container div.button.expanded.location { -webkit-animation-name: flyout-location; -moz-animation-name: flyout-location; animation-name: flyout-location; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } section.container div.button.expanded.music { -webkit-animation-name: flyout-music; -moz-animation-name: flyout-music; animation-name: flyout-music; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.15s; -moz-animation-delay: 0.15s; animation-delay: 0.15s; } section.container div.button.expanded.comment { -webkit-animation-name: flyout-comment; -moz-animation-name: flyout-comment; animation-name: flyout-comment; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; } section.container div.button.expanded.status { -webkit-animation-name: flyout-status; -moz-animation-name: flyout-status; animation-name: flyout-status; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s; } section.container div.button.collapsed.cam { -webkit-animation-name: flyin-cam; -moz-animation-name: flyin-cam; animation-name: flyin-cam; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.25s; -moz-animation-delay: 0.25s; animation-delay: 0.25s; } section.container div.button.collapsed.friend { -webkit-animation-name: flyin-friend; -moz-animation-name: flyin-friend; animation-name: flyin-friend; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; } section.container div.button.collapsed.location { -webkit-animation-name: flyin-location; -moz-animation-name: flyin-location; animation-name: flyin-location; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.15s; -moz-animation-delay: 0.15s; animation-delay: 0.15s; } section.container div.button.collapsed.music { -webkit-animation-name: flyin-music; -moz-animation-name: flyin-music; animation-name: flyin-music; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s; } section.container div.button.collapsed.comment { -webkit-animation-name: flyin-comment; -moz-animation-name: flyin-comment; animation-name: flyin-comment; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0.05s; -moz-animation-delay: 0.05s; animation-delay: 0.05s; } section.container div.button.collapsed.status { -webkit-animation-name: flyin-status; -moz-animation-name: flyin-status; animation-name: flyin-status; -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-delay: 0s; -moz-animation-delay: 0s; animation-delay: 0s; } div.open-button p {font-size:12px; padding-top:8px;}
you have specified key-frames -webkit-. should duplicate without prefix mozilla.
i did 1 you:
http://jsfiddle.net/abdiassoftware/u7cjj/2/
@keyframes flyout-cam { 0% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg); -moz-transform: translate3d(0, 0, 0) rotate(0deg); -ms-transform: translate3d(0, 0, 0) rotate(0deg); -o-transform: translate3d(0, 0, 0) rotate(0deg); transform: translate3d(0, 0, 0) rotate(0deg); } as can see works in firefox.
Comments
Post a Comment