Tạo menu hình tròn tuyệt đẹp bằng HML và CSS3

13/06/16
Mrlee
Bài viết này sẽ hướng dẫn các bạn cách tạo menu hình tròn tuyệt đẹp bằng cách kết hợp HTML, CSS và Javascript

Menu là phần không thể thiếu trong mỗi website, hôm nay thuthuattienich.vn sẽ hướng dẫn các bạn cách tạo menu hình tròn ấn tượng bằng cách sử dụng html, css và javascript.

Trước tiên các bạn tạo file html với nội dung như dưới đây

HTML

  1. <div class="container">
  2.   <div class="component">
  3.     <h2>THUTHUATTIENICH.VN</h2>
  4.     <!-- Start Nav Structure -->
  5.     <button class="cn-button" id="cn-button">Menu</button>
  6.     <div class="cn-wrapper" id="cn-wrapper">
  7.       <ul>
  8.         <li>
  9.           <a href="#">
  10.             <span>Home</span>
  11.             <svg class="caticon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  12.                  width="35px" height="70px" viewBox="0 0 512 512" enable-background="new 0 0 50 50" xml:space="preserve">
  13.               <path fill="white" id="shop-3-icon" d="M79.792,217.25v235h352.75v-235H79.792z M397.542,381.75h-282.75v-129.5h282.75V381.75z M220.62,59.75
  14.                                         l-17.798,85.332h-0.081v17.34c0,18.314-14.847,33.161-33.161,33.161s-33.16-14.847-33.16-33.161v-17.34l50.841-85.332H220.62z
  15.                                         M168.232,59.75l-51.91,85.332v17.34c0,18.314-14.847,33.161-33.161,33.161S50,180.736,50,162.422v-17.34l83.666-85.332H168.232z
  16.                                         M462,145.082v17.34c0,18.314-14.847,33.161-33.161,33.161s-33.161-14.847-33.161-33.161v-17.34l-51.91-85.332h34.566L462,145.082z
  17.                                         M289.08,145.082h0.081v17.34c0,18.314-14.847,33.161-33.161,33.161s-33.161-14.847-33.161-33.161v-17.34h0.081l16.729-85.332
  18.                                         h32.703L289.08,145.082z M324.739,59.75l50.841,85.332v17.34c0,18.314-14.846,33.161-33.16,33.161s-33.161-14.847-33.161-33.161
  19.                                         v-17.34h-0.081L291.38,59.75H324.739z"/>
  20.             </svg>
  21.           </a>        </li>
  22.         <li><a href="#"><span>Furniture</span></a></li>
  23.         <li><a href="#"><span>Transport</span></a></li>
  24.         <li><a href="#"><span>Gift</span></a></li>
  25.         <li><a href="#"><span>Clothes</span></a></li>
  26.         <li><a href="#"><span>Games</span></a></li>
  27.         <li><a href="#"><span>Stationary</span></a></li>
  28.         <li><a href="#"><span>Toys</span></a></li>
  29.         <li><a href="#"><span>Books</span></a></li>
  30.         <li><a href="#"><span>Login</span></a></li>
  31.         <li><a href="#"><span>Register</span></a></li>
  32.         <li><a href="#"><span>Sell</span></a></li>
  33.       </ul>
  34.     </div>
  35.     <!-- End of Nav Structure -->
  36.   </div>
  37. </div><!-- /container -->

Tiếp đó bạn tạo ra 2 file javascript và kết nối với html với nội dung lần lượt như sau

Javascript 1

  1. window.Modernizr=function(e,t,n){function r(e){b.cssText=e}function o(e,t){return r(S.join(e+";")+(t||""))}function a(e,t){return typeof e===t}function i(e,t){return!!~(""+e).indexOf(t)}function c(e,t){for(var r in e){var o=e[r];if(!i(o,"-")&&b[o]!==n)return"pfx"==t?o:!0}return!1}function s(e,t,r){for(var o in e){var i=t[e[o]];if(i!==n)return r===!1?e[o]:a(i,"function")?i.bind(r||t):i}return!1}function l(e,t,n){var r=e.charAt(0).toUpperCase()+e.slice(1),o=(e+" "+k.join(r+" ")+r).split(" ");return a(t,"string")||a(t,"undefined")?c(o,t):(o=(e+" "+T.join(r+" ")+r).split(" "),s(o,t,n))}function u(){m.input=function(n){for(var r=0,o=n.length;o>r;r++)M[n[r]]=n[r]in E;return M.list&&(M.list=!!t.createElement("datalist")&&!!e.HTMLDataListElement),M}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),m.inputtypes=function(e){for(var r,o,a,i=0,c=e.length;c>i;i++)E.setAttribute("type",o=e[i]),r="text"!==E.type,r&&(E.value=w,E.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(o)&&E.style.WebkitAppearance!==n?(g.appendChild(E),a=t.defaultView,r=a.getComputedStyle&&"textfield"!==a.getComputedStyle(E,null).WebkitAppearance&&0!==E.offsetHeight,g.removeChild(E)):/^(search|tel)$/.test(o)||(r=/^(url|email)$/.test(o)?E.checkValidity&&E.checkValidity()===!1:E.value!=w)),P[e[i]]=!!r;return P}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var f,d,p="2.8.3",m={},h=!0,g=t.documentElement,v="modernizr",y=t.createElement(v),b=y.style,E=t.createElement("input"),w=":)",x={}.toString,S=" -webkit- -moz- -o- -ms- ".split(" "),C="Webkit Moz O ms",k=C.split(" "),T=C.toLowerCase().split(" "),j={svg:"http://www.w3.org/2000/svg"},N={},P={},M={},A=[],L=A.slice,$=function(e,n,r,o){var a,i,c,s,l=t.createElement("div"),u=t.body,f=u||t.createElement("body");if(parseInt(r,10))for(;r--;)c=t.createElement("div"),c.id=o?o[r]:v+(r+1),l.appendChild(c);return a=["&#173;",'<style id="s',v,'">',e,"</style>"].join(""),l.id=v,(u?l:f).innerHTML+=a,f.appendChild(l),u||(f.style.background="",f.style.overflow="hidden",s=g.style.overflow,g.style.overflow="hidden",g.appendChild(f)),i=n(l,e),u?l.parentNode.removeChild(l):(f.parentNode.removeChild(f),g.style.overflow=s),!!i},z=function(){function e(e,o){o=o||t.createElement(r[e]||"div"),e="on"+e;var i=e in o;return i||(o.setAttribute||(o=t.createElement("div")),o.setAttribute&&o.removeAttribute&&(o.setAttribute(e,""),i=a(o[e],"function"),a(o[e],"undefined")||(o[e]=n),o.removeAttribute(e))),o=null,i}var r={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return e}(),D={}.hasOwnProperty;d=a(D,"undefined")||a(D.call,"undefined")?function(e,t){return t in e&&a(e.constructor.prototype[t],"undefined")}:function(e,t){return D.call(e,t)},Function.prototype.bind||(Function.prototype.bind=function(e){var t=this;if("function"!=typeof t)throw new TypeError;var n=L.call(arguments,1),r=function(){if(this instanceof r){var o=function(){};o.prototype=t.prototype;var a=new o,i=t.apply(a,n.concat(L.call(arguments)));return Object(i)===i?i:a}return t.apply(e,n.concat(L.call(arguments)))};return r}),N.flexbox=function(){return l("flexWrap")},N.canvas=function(){var e=t.createElement("canvas");return!!e.getContext&&!!e.getContext("2d")},N.canvastext=function(){return!!m.canvas&&!!a(t.createElement("canvas").getContext("2d").fillText,"function")},N.webgl=function(){return!!e.WebGLRenderingContext},N.touch=function(){var n;return"ontouchstart"in e||e.DocumentTouch&&t instanceof DocumentTouch?n=!0:$(["@media (",S.join("touch-enabled),("),v,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(e){n=9===e.offsetTop}),n},N.geolocation=function(){return"geolocation"in navigator},N.postmessage=function(){return!!e.postMessage},N.websqldatabase=function(){return!!e.openDatabase},N.indexedDB=function(){return!!l("indexedDB",e)},N.hashchange=function(){return z("hashchange",e)&&(t.documentMode===n||t.documentMode>7)},N.history=function(){return!!e.history&&!!history.pushState},N.draganddrop=function(){var e=t.createElement("div");return"draggable"in e||"ondragstart"in e&&"ondrop"in e},N.websockets=function(){return"WebSocket"in e||"MozWebSocket"in e},N.rgba=function(){return r("background-color:rgba(150,255,150,.5)"),i(b.backgroundColor,"rgba")},N.hsla=function(){return r("background-color:hsla(120,40%,100%,.5)"),i(b.backgroundColor,"rgba")||i(b.backgroundColor,"hsla")},N.multiplebgs=function(){return r("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(b.background)},N.backgroundsize=function(){return l("backgroundSize")},N.borderimage=function(){return l("borderImage")},N.borderradius=function(){return l("borderRadius")},N.boxshadow=function(){return l("boxShadow")},N.textshadow=function(){return""===t.createElement("div").style.textShadow},N.opacity=function(){return o("opacity:.55"),/^0.55$/.test(b.opacity)},N.cssanimations=function(){return l("animationName")},N.csscolumns=function(){return l("columnCount")},N.cssgradients=function(){var e="background-image:",t="gradient(linear,left top,right bottom,from(#9f9),to(white));",n="linear-gradient(left top,#9f9, white);";return r((e+"-webkit- ".split(" ").join(t+e)+S.join(n+e)).slice(0,-e.length)),i(b.backgroundImage,"gradient")},N.cssreflections=function(){return l("boxReflect")},N.csstransforms=function(){return!!l("transform")},N.csstransforms3d=function(){var e=!!l("perspective");return e&&"webkitPerspective"in g.style&&$("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(t){e=9===t.offsetLeft&&3===t.offsetHeight}),e},N.csstransitions=function(){return l("transition")},N.fontface=function(){var e;return $('@font-face {font-family:"font";src:url("https://")}',function(n,r){var o=t.getElementById("smodernizr"),a=o.sheet||o.styleSheet,i=a?a.cssRules&&a.cssRules[0]?a.cssRules[0].cssText:a.cssText||"":"";e=/src/i.test(i)&&0===i.indexOf(r.split(" ")[0])}),e},N.generatedcontent=function(){var e;return $(["#",v,"{font:0/0 a}#",v,':after{content:"',w,'";visibility:hidden;font:3px/1 a}'].join(""),function(t){e=t.offsetHeight>=3}),e},N.video=function(){var e=t.createElement("video"),n=!1;try{(n=!!e.canPlayType)&&(n=new Boolean(n),n.ogg=e.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),n.h264=e.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),n.webm=e.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,""))}catch(r){}return n},N.audio=function(){var e=t.createElement("audio"),n=!1;try{(n=!!e.canPlayType)&&(n=new Boolean(n),n.ogg=e.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),n.mp3=e.canPlayType("audio/mpeg;").replace(/^no$/,""),n.wav=e.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),n.m4a=(e.canPlayType("audio/x-m4a;")||e.canPlayType("audio/aac;")).replace(/^no$/,""))}catch(r){}return n},N.localstorage=function(){try{return localStorage.setItem(v,v),localStorage.removeItem(v),!0}catch(e){return!1}},N.sessionstorage=function(){try{return sessionStorage.setItem(v,v),sessionStorage.removeItem(v),!0}catch(e){return!1}},N.webworkers=function(){return!!e.Worker},N.applicationcache=function(){return!!e.applicationCache},N.svg=function(){return!!t.createElementNS&&!!t.createElementNS(j.svg,"svg").createSVGRect},N.inlinesvg=function(){var e=t.createElement("div");return e.innerHTML="<svg/>",(e.firstChild&&e.firstChild.namespaceURI)==j.svg},N.smil=function(){return!!t.createElementNS&&/SVGAnimate/.test(x.call(t.createElementNS(j.svg,"animate")))},N.svgclippaths=function(){return!!t.createElementNS&&/SVGClipPath/.test(x.call(t.createElementNS(j.svg,"clipPath")))};for(var F in N)d(N,F)&&(f=F.toLowerCase(),m[f]=N[F](),A.push((m[f]?"":"no-")+f));return m.input||u(),m.addTest=function(e,t){if("object"==typeof e)for(var r in e)d(e,r)&&m.addTest(r,e[r]);else{if(e=e.toLowerCase(),m[e]!==n)return m;t="function"==typeof t?t():t,"undefined"!=typeof h&&h&&(g.className+=" "+(t?"":"no-")+e),m[e]=t}return m},r(""),y=E=null,function(e,t){function n(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function r(){var e=y.elements;return"string"==typeof e?e.split(" "):e}function o(e){var t=v[e[h]];return t||(t={},g++,e[h]=g,v[g]=t),t}function a(e,n,r){if(n||(n=t),u)return n.createElement(e);r||(r=o(n));var a;return a=r.cache[e]?r.cache[e].cloneNode():m.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function i(e,n){if(e||(e=t),u)return e.createDocumentFragment();n=n||o(e);for(var a=n.frag.cloneNode(),i=0,c=r(),s=c.length;s>i;i++)a.createElement(c[i]);return a}function c(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return y.shivMethods?a(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+r().join().replace(/[\w\-]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(y,t.frag)}function s(e){e||(e=t);var r=o(e);return y.shivCSS&&!l&&!r.hasCSS&&(r.hasCSS=!!n(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),u||c(e,r),e}var l,u,f="3.7.0",d=e.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,m=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,h="_html5shiv",g=0,v={};!function(){try{var e=t.createElement("a");e.innerHTML="<xyz></xyz>",l="hidden"in e,u=1==e.childNodes.length||function(){t.createElement("a");var e=t.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(n){l=!0,u=!0}}();var y={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:f,shivCSS:d.shivCSS!==!1,supportsUnknownElements:u,shivMethods:d.shivMethods!==!1,type:"default",shivDocument:s,createElement:a,createDocumentFragment:i};e.html5=y,s(t)}(this,t),m._version=p,m._prefixes=S,m._domPrefixes=T,m._cssomPrefixes=k,m.hasEvent=z,m.testProp=function(e){return c([e])},m.testAllProps=l,m.testStyles=$,m.prefixed=function(e,t,n){return t?l(e,t,n):l(e,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(h?" js "+A.join(" "):""),m}(this,this.document),function(e,t,n){function r(e){return"[object Function]"==g.call(e)}function o(e){return"string"==typeof e}function a(){}function i(e){return!e||"loaded"==e||"complete"==e||"uninitialized"==e}function c(){var e=v.shift();y=1,e?e.t?m(function(){("c"==e.t?d.injectCss:d.injectJs)(e.s,0,e.a,e.x,e.e,1)},0):(e(),c()):y=0}function s(e,n,r,o,a,s,l){function u(t){if(!p&&i(f.readyState)&&(b.r=p=1,!y&&c(),f.onload=f.onreadystatechange=null,t)){"img"!=e&&m(function(){w.removeChild(f)},50);for(var r in T[n])T[n].hasOwnProperty(r)&&T[n][r].onload()}}var l=l||d.errorTimeout,f=t.createElement(e),p=0,g=0,b={t:r,s:n,e:a,a:s,x:l};1===T[n]&&(g=1,T[n]=[]),"object"==e?f.data=n:(f.src=n,f.type=e),f.width=f.height="0",f.onerror=f.onload=f.onreadystatechange=function(){u.call(this,g)},v.splice(o,0,b),"img"!=e&&(g||2===T[n]?(w.insertBefore(f,E?null:h),m(u,l)):T[n].push(f))}function l(e,t,n,r,a){return y=0,t=t||"j",o(e)?s("c"==t?S:x,e,t,this.i++,n,r,a):(v.splice(this.i++,0,e),1==v.length&&c()),this}function u(){var e=d;return e.loader={load:l,i:0},e}var f,d,p=t.documentElement,m=e.setTimeout,h=t.getElementsByTagName("script")[0],g={}.toString,v=[],y=0,b="MozAppearance"in p.style,E=b&&!!t.createRange().compareNode,w=E?p:h.parentNode,p=e.opera&&"[object Opera]"==g.call(e.opera),p=!!t.attachEvent&&!p,x=b?"object":p?"script":"img",S=p?"script":x,C=Array.isArray||function(e){return"[object Array]"==g.call(e)},k=[],T={},j={timeout:function(e,t){return t.length&&(e.timeout=t[0]),e}};d=function(e){function t(e){var t,n,r,e=e.split("!"),o=k.length,a=e.pop(),i=e.length,a={url:a,origUrl:a,prefixes:e};for(n=0;i>n;n++)r=e[n].split("="),(t=j[r.shift()])&&(a=t(a,r));for(n=0;o>n;n++)a=k[n](a);return a}function i(e,o,a,i,c){var s=t(e),l=s.autoCallback;s.url.split(".").pop().split("?").shift(),s.bypass||(o&&(o=r(o)?o:o[e]||o[i]||o[e.split("/").pop().split("?")[0]]),s.instead?s.instead(e,o,a,i,c):(T[s.url]?s.noexec=!0:T[s.url]=1,a.load(s.url,s.forceCSS||!s.forceJS&&"css"==s.url.split(".").pop().split("?").shift()?"c":n,s.noexec,s.attrs,s.timeout),(r(o)||r(l))&&a.load(function(){u(),o&&o(s.origUrl,c,i),l&&l(s.origUrl,c,i),T[s.url]=2})))}function c(e,t){function n(e,n){if(e){if(o(e))n||(f=function(){var e=[].slice.call(arguments);d.apply(this,e),p()}),i(e,f,t,0,l);else if(Object(e)===e)for(s in c=function(){var t,n=0;for(t in e)e.hasOwnProperty(t)&&n++;return n}(),e)e.hasOwnProperty(s)&&(!n&&!--c&&(r(f)?f=function(){var e=[].slice.call(arguments);d.apply(this,e),p()}:f[s]=function(e){return function(){var t=[].slice.call(arguments);e&&e.apply(this,t),p()}}(d[s])),i(e[s],f,t,s,l))}else!n&&p()}var c,s,l=!!e.test,u=e.load||e.both,f=e.callback||a,d=f,p=e.complete||a;n(l?e.yep:e.nope,!!u),u&&n(u)}var s,l,f=this.yepnope.loader;if(o(e))i(e,0,f,0);else if(C(e))for(s=0;s<e.length;s++)l=e[s],o(l)?i(l,0,f,0):C(l)?d(l):Object(l)===l&&c(l,f);else Object(e)===e&&c(e,f)},d.addPrefix=function(e,t){j[e]=t},d.addFilter=function(e){k.push(e)},d.errorTimeout=1e4,null==t.readyState&&t.addEventListener&&(t.readyState="loading",t.addEventListener("DOMContentLoaded",f=function(){t.removeEventListener("DOMContentLoaded",f,0),t.readyState="complete"},0)),e.yepnope=u(),e.yepnope.executeStack=c,e.yepnope.injectJs=function(e,n,r,o,s,l){var u,f,p=t.createElement("script"),o=o||d.errorTimeout;p.src=e;for(f in r)p.setAttribute(f,r[f]);n=l?c:n||a,p.onreadystatechange=p.onload=function(){!u&&i(p.readyState)&&(u=1,n(),p.onload=p.onreadystatechange=null)},m(function(){u||(u=1,n(1))},o),s?p.onload():h.parentNode.insertBefore(p,h)},e.yepnope.injectCss=function(e,n,r,o,i,s){var l,o=t.createElement("link"),n=s?c:n||a;o.href=e,o.rel="stylesheet",o.type="text/css";for(l in r)o.setAttribute(l,r[l]);i||(h.parentNode.insertBefore(o,h),m(n,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};

Javascript 2

  1. (function(){
  2.  
  3. 	var button = document.getElementById('cn-button'),
  4.     wrapper = document.getElementById('cn-wrapper');
  5.  
  6.     //open and close menu when the button is clicked
  7. 	var open = false;
  8. 	button.addEventListener('click', handler, false);
  9.  
  10. 	function handler(){
  11. 	  if(!open){
  12. 	    this.innerHTML = "Close";
  13. 	    classie.add(wrapper, 'opened-nav');
  14. 	  }
  15. 	  else{
  16. 	    this.innerHTML = "Menu";
  17. 		classie.remove(wrapper, 'opened-nav');
  18. 	  }
  19. 	  open = !open;
  20. 	}
  21. 	function closeWrapper(){
  22. 		classie.remove(wrapper, 'opened-nav');
  23. 	}
  24.  
  25. })();
  26.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             /*!
  27.  * classie - class helper functions
  28.  * from bonzo https://github.com/ded/bonzo
  29.  * 
  30.  * classie.has( elem, 'my-class' ) -> true/false
  31.  * classie.add( elem, 'my-new-class' )
  32.  * classie.remove( elem, 'my-unwanted-class' )
  33.  * classie.toggle( elem, 'my-class' )
  34.  */
  35.  
  36. /*jshint browser: true, strict: true, undef: true */
  37. /*global define: false */
  38.  
  39. ( function( window ) {
  40.  
  41. 'use strict';
  42.  
  43. // class helper functions from bonzo https://github.com/ded/bonzo
  44.  
  45. function classReg( className ) {
  46.   return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  47. }
  48.  
  49. // classList support for class management
  50. // altho to be fair, the api sucks because it won't accept multiple classes at once
  51. var hasClass, addClass, removeClass;
  52.  
  53. if ( 'classList' in document.documentElement ) {
  54.   hasClass = function( elem, c ) {
  55.     return elem.classList.contains( c );
  56.   };
  57.   addClass = function( elem, c ) {
  58.     elem.classList.add( c );
  59.   };
  60.   removeClass = function( elem, c ) {
  61.     elem.classList.remove( c );
  62.   };
  63. }
  64. else {
  65.   hasClass = function( elem, c ) {
  66.     return classReg( c ).test( elem.className );
  67.   };
  68.   addClass = function( elem, c ) {
  69.     if ( !hasClass( elem, c ) ) {
  70.       elem.className = elem.className + ' ' + c;
  71.     }
  72.   };
  73.   removeClass = function( elem, c ) {
  74.     elem.className = elem.className.replace( classReg( c ), ' ' );
  75.   };
  76. }
  77.  
  78. function toggleClass( elem, c ) {
  79.   var fn = hasClass( elem, c ) ? removeClass : addClass;
  80.   fn( elem, c );
  81. }
  82.  
  83. var classie = {
  84.   // full names
  85.   hasClass: hasClass,
  86.   addClass: addClass,
  87.   removeClass: removeClass,
  88.   toggleClass: toggleClass,
  89.   // short names
  90.   has: hasClass,
  91.   add: addClass,
  92.   remove: removeClass,
  93.   toggle: toggleClass
  94. };
  95.  
  96. // transport
  97. if ( typeof define === 'function' && define.amd ) {
  98.   // AMD
  99.   define( classie );
  100. } else {
  101.   // browser global
  102.   window.classie = classie;
  103. }
  104.  
  105. })( window );
  106. // EventListener | @jon_neal | //github.com/jonathantneal/EventListener
  107. !window.addEventListener && window.Element && (function () {
  108.     function addToPrototype(name, method) {
  109.         Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method;
  110.     }
  111.  
  112.     var registry = [];
  113.  
  114.     addToPrototype("addEventListener", function (type, listener) {
  115.         var target = this;
  116.  
  117.         registry.unshift({
  118.             __listener: function (event) {
  119.                 event.currentTarget = target;
  120.                 event.pageX = event.clientX + document.documentElement.scrollLeft;
  121.                 event.pageY = event.clientY + document.documentElement.scrollTop;
  122.                 event.preventDefault = function () { event.returnValue = false };
  123.                 event.relatedTarget = event.fromElement || null;
  124.                 event.stopPropagation = function () { event.cancelBubble = true };
  125.                 event.relatedTarget = event.fromElement || null;
  126.                 event.target = event.srcElement || target;
  127.                 event.timeStamp = +new Date;
  128.  
  129.                 listener.call(target, event);
  130.             },
  131.             listener: listener,
  132.             target: target,
  133.             type: type
  134.         });
  135.  
  136.         this.attachEvent("on" + type, registry[0].__listener);
  137.     });
  138.  
  139.     addToPrototype("removeEventListener", function (type, listener) {
  140.         for (var index = 0, length = registry.length; index < length; ++index) {
  141.             if (registry[index].target == this && registry[index].type == type && registry[index].listener == listener) {
  142.                 return this.detachEvent("on" + type, registry.splice(index, 1)[0].__listener);
  143.             }
  144.         }
  145.     });
  146.  
  147.     addToPrototype("dispatchEvent", function (eventObject) {
  148.         try {
  149.             return this.fireEvent("on" + eventObject.type, eventObject);
  150.         } catch (error) {
  151.             for (var index = 0, length = registry.length; index < length; ++index) {
  152.                 if (registry[index].target == this && registry[index].type == eventObject.type) {
  153.                     registry[index].call(this, eventObject);
  154.                 }
  155.             }
  156.         }
  157.     });
  158. })();

Cuối cùng là file CSS

  1. @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
  2.  
  3. * { 
  4.   position: relative;
  5. 	-moz-box-sizing: border-box;
  6. 	box-sizing: border-box;
  7. 	margin: 0;
  8. 	padding: 0;
  9. 	list-style: none;
  10. }
  11.  
  12. html,
  13. body {
  14. 	height: 100%;
  15. }
  16.  
  17. body {
  18. 	background: #52be7f;
  19. 	color: #fff;
  20. }
  21.  
  22. .component {
  23. 	position: relative;
  24. 	margin-bottom: 3em;
  25. 	height: 15em;
  26. 	background: rgba(0,0,0,0.05);
  27. 	font-family: 'Lato', Arial, sans-serif;
  28. }
  29.  
  30. .component > h2 {
  31. 	position: absolute;
  32. 	overflow: hidden;
  33. 	width: 100%;
  34. 	text-align: center;
  35. 	text-transform: uppercase;
  36. 	white-space: nowrap;
  37. 	font-weight: 300;
  38. 	font-style: italic;
  39. 	font-size: 6em;
  40. 	opacity: 0.1;
  41. 	cursor: default;
  42. }
  43.  
  44. .cn-button {
  45. 	position: absolute;
  46. 	top: 100%;
  47. 	left: 50%;
  48. 	z-index: 11;
  49. 	margin-top: -2.25em;
  50. 	margin-left: -2.25em;
  51. 	padding-top: 0;
  52. 	width: 4.5em;
  53. 	height: 4.5em;
  54. 	border: none;
  55. 	border-radius: 50%;
  56. 	background: none;
  57. 	background-color: #fff;
  58. 	color: #52be7f;
  59. 	text-align: center;
  60. 	font-weight: 700;
  61. 	font-size: 1.5em;
  62. 	text-transform: uppercase;
  63. 	cursor: pointer;
  64. 	-webkit-backface-visibility: hidden;
  65. }
  66.  
  67. .csstransforms .cn-wrapper {
  68. 	position: absolute;
  69. 	top: 100%;
  70. 	left: 50%;
  71. 	z-index: 10;
  72. 	margin-top: -13em;
  73. 	margin-left: -13.5em;
  74. 	width: 27em;
  75. 	height: 27em;
  76. 	border-radius: 50%;
  77. 	background: transparent;
  78. 	opacity: 0;
  79. 	-webkit-transition: all .3s ease 0.3s;
  80. 	-moz-transition: all .3s ease 0.3s;
  81. 	transition: all .3s ease 0.3s;
  82. 	-webkit-transform: scale(0.1);
  83. 	-ms-transform: scale(0.1);
  84. 	-moz-transform: scale(0.1);
  85. 	transform: scale(0.1);
  86. 	pointer-events: none;
  87. 	overflow: hidden;
  88. }
  89.  
  90. /*cover to prevent extra space of anchors from being clickable*/
  91. .csstransforms .cn-wrapper:after{
  92.   content:".";
  93.   display:block;
  94.   font-size:2em;
  95.   width:6.2em;
  96.   height:6.2em;
  97.   position: absolute;
  98.   left: 50%;
  99.   margin-left: -3.1em;
  100.   top:50%;
  101.   margin-top: -3.1em;
  102.   border-radius: 50%;
  103.   z-index:10;
  104.   color: transparent;
  105. }
  106.  
  107. .csstransforms .opened-nav {
  108. 	border-radius: 50%;
  109. 	opacity: 1;
  110. 	-webkit-transition: all .3s ease;
  111. 	-moz-transition: all .3s ease;
  112. 	transition: all .3s ease;
  113. 	-webkit-transform: scale(1);
  114. 	-moz-transform: scale(1);
  115. 	-ms-transform: scale(1);
  116. 	transform: scale(1);
  117. 	pointer-events: auto;
  118. }
  119.  
  120. .csstransforms .cn-wrapper li {
  121. 	position: absolute;
  122. 	top: 50%;
  123. 	left: 50%;
  124. 	overflow: hidden;
  125. 	margin-top: -1.3em;
  126. 	margin-left: -10em;
  127. 	width: 10em;
  128. 	height: 10em;
  129. 	font-size: 1.5em;
  130. 	-webkit-transition: all .3s ease;
  131. 	-moz-transition: all .3s ease;
  132. 	transition: all .3s ease;
  133. 	-webkit-transform: rotate(75deg) skew(62deg); 
  134. 	-moz-transform: rotate(75deg) skew(62deg); 
  135. 	-ms-transform: rotate(75deg) skew(62deg); 
  136. 	transform: rotate(75deg) skew(62deg); 
  137. 	-webkit-transform-origin: 100% 100%;
  138. 	-moz-transform-origin: 100% 100%;
  139. 	transform-origin: 100% 100%;
  140. 	pointer-events: none;
  141. }
  142.  
  143. .csstransforms .cn-wrapper li a {
  144. 	position: absolute;
  145.  
  146. 	right: -7.25em;
  147. 	bottom: -7.25em;
  148. 	display: block;
  149. 	width: 14.5em;
  150. 	height: 14.5em;
  151. 	border-radius: 50%;
  152. 	background: #429a67;
  153. 	background: -webkit-radial-gradient(transparent 35%, #429a67 35%);
  154. 	background: -moz-radial-gradient(transparent 35%, #429a67 35%);
  155. 	background: radial-gradient(transparent 35%, #429a67 35%);
  156. 	color: #fff;
  157. 	text-align: center;
  158. 	text-decoration: none;
  159. 	font-size: 1.2em;
  160. 	line-height: 2;
  161. 	-webkit-transform: skew(-62deg) rotate(-75deg) scale(1);
  162. 	-moz-transform: skew(-62deg) rotate(-75deg) scale(1);
  163. 	-ms-transform: skew(-62deg) rotate(-75deg) scale(1);
  164. 	transform: skew(-62deg) rotate(-75deg) scale(1);
  165. 	-webkit-backface-visibility: hidden;
  166. 	backface-visibility: hidden;
  167. 	pointer-events: auto;
  168. }
  169.  
  170. .csstransforms .cn-wrapper li a span {
  171. 	position: relative;
  172. 	top: 1em;
  173. 	display: block;
  174. 	font-size: .5em;
  175. 	font-weight: 700;
  176. 	text-transform: uppercase;
  177. }
  178.  
  179. .csstransforms .cn-wrapper li a:hover,
  180. .csstransforms .cn-wrapper li a:active,
  181. .csstransforms .cn-wrapper li a:focus {
  182. 	background: -webkit-radial-gradient(transparent 35%, #449e6a 35%);
  183. 	background: -moz-radial-gradient(transparent 35%, #449e6a 35%);
  184. 	background: radial-gradient(transparent 35%, #449e6a 35%);
  185. }
  186.  
  187. .csstransforms .opened-nav li {
  188. 	-webkit-transition: all .3s ease .3s;
  189. 	-moz-transition: all .3s ease .3s;
  190. 	transition: all .3s ease .3s;
  191. }
  192.  
  193. .csstransforms .opened-nav li:first-child {
  194. 	-webkit-transform: skew(62deg);
  195. 	-moz-transform: skew(62deg);
  196. 	-ms-transform: skew(62deg);
  197. 	transform: skew(62deg); 
  198. }
  199.  
  200. .csstransforms .opened-nav li:nth-child(2) {
  201. 	-webkit-transform: rotate(30deg) skew(62deg);
  202. 	-moz-transform: rotate(30deg) skew(62deg);
  203. 	-ms-transform: rotate(30deg) skew(62deg);
  204. 	transform: rotate(30deg) skew(62deg);
  205. }
  206.  
  207. .csstransforms .opened-nav  li:nth-child(3) {
  208. 	-webkit-transform: rotate(60deg) skew(62deg);
  209. 	-moz-transform: rotate(60deg) skew(62deg);
  210. 	-ms-transform: rotate(60deg) skew(62deg);
  211. 	transform: rotate(60deg) skew(62deg);
  212. }
  213.  
  214. .csstransforms .opened-nav li:nth-child(4) {
  215. 	-webkit-transform: rotate(90deg) skew(62deg);
  216. 	-moz-transform: rotate(90deg) skew(62deg);
  217. 	-ms-transform: rotate(90deg) skew(62deg);
  218. 	transform: rotate(90deg) skew(62deg);
  219. }
  220.  
  221. .csstransforms .opened-nav li:nth-child(5) {
  222. 	-webkit-transform: rotate(120deg) skew(62deg);
  223. 	-moz-transform: rotate(120deg) skew(62deg);
  224. 	-ms-transform: rotate(120deg) skew(62deg);
  225. 	transform: rotate(120deg) skew(62deg);
  226. }
  227.  
  228. .csstransforms .opened-nav li:nth-child(6) {
  229. 	-webkit-transform: rotate(150deg) skew(62deg);
  230. 	-moz-transform: rotate(150deg) skew(62deg);
  231. 	-ms-transform: rotate(150deg) skew(62deg);
  232. 	transform: rotate(150deg) skew(62deg);
  233. }
  234.  
  235. .csstransforms .opened-nav li:nth-child(7) {
  236. 	-webkit-transform: rotate(180deg) skew(62deg);
  237. 	-moz-transform: rotate(180deg) skew(62deg);
  238. 	-ms-transform: rotate(180deg) skew(62deg);
  239. 	transform: rotate(180deg) skew(62deg);
  240. }
  241.  
  242. .csstransforms .opened-nav li:nth-child(8) {
  243. 	-webkit-transform: rotate(210deg) skew(62deg);
  244. 	-moz-transform: rotate(210deg) skew(62deg);
  245. 	-ms-transform: rotate(210deg) skew(62deg);
  246. 	transform: rotate(210deg) skew(62deg);
  247. }
  248. .csstransforms .opened-nav li:nth-child(9) {
  249. 	-webkit-transform: rotate(240deg) skew(62deg);
  250. 	-moz-transform: rotate(240deg) skew(62deg);
  251. 	-ms-transform: rotate(240deg) skew(62deg);
  252. 	transform: rotate(240deg) skew(62deg);
  253. }
  254. .csstransforms .opened-nav li:nth-child(10) {
  255. 	-webkit-transform: rotate(270deg) skew(62deg);
  256. 	-moz-transform: rotate(270deg) skew(62deg);
  257. 	-ms-transform: rotate(270deg) skew(62deg);
  258. 	transform: rotate(270deg) skew(62deg);
  259. }
  260. .csstransforms .opened-nav li:nth-child(11) {
  261. 	-webkit-transform: rotate(300deg) skew(62deg);
  262. 	-moz-transform: rotate(300deg) skew(62deg);
  263. 	-ms-transform: rotate(300deg) skew(62deg);
  264. 	transform: rotate(300deg) skew(62deg);
  265. }
  266. .csstransforms .opened-nav li:nth-child(12) {
  267. 	-webkit-transform: rotate(330deg) skew(62deg);
  268. 	-moz-transform: rotate(330deg) skew(62deg);
  269. 	-ms-transform: rotate(330deg) skew(62deg);
  270. 	transform: rotate(330deg) skew(62deg);
  271. }
  272. .no-csstransforms .cn-wrapper {
  273. 	overflow: hidden;
  274. 	margin: 10em auto;
  275. 	padding: .5em;
  276. 	text-align: center;
  277. }
  278.  
  279. .no-csstransforms .cn-wrapper ul {
  280. 	display: inline-block;
  281. }
  282.  
  283. .no-csstransforms .cn-wrapper li {
  284. 	float: left;
  285. 	width: 5em;
  286. 	height: 5em;
  287. 	background-color: #fff;
  288. 	text-align: center;
  289. 	font-size: 1em;
  290. 	line-height: 5em;
  291. }
  292.  
  293. .no-csstransforms .cn-wrapper li a {
  294. 	display: block;
  295. 	width: 100%;
  296. 	height: 100%;
  297. 	color: inherit;
  298. 	text-decoration: none;
  299. }
  300.  
  301. .no-csstransforms .cn-wrapper li a:hover,
  302. .no-csstransforms .cn-wrapper li a:active,
  303. .no-csstransforms .cn-wrapper li a:focus {
  304. 	background-color: #f8f8f8;
  305. }
  306.  
  307. .no-csstransforms .cn-wrapper li.active a{
  308. 	background-color: #6F325C;
  309. 	color: #fff;
  310. }
  311.  
  312. .no-csstransforms .cn-button {
  313. 	display: none;
  314. }
  315.  
  316. @media only screen and (max-width: 620px) {
  317. 	.no-csstransforms li {
  318. 		width: 4em;
  319. 		height: 4em;
  320. 		line-height: 4em;
  321. 	}
  322. }
  323.  
  324. @media only screen and (max-width: 500px) {
  325. 	.no-ccstransforms .cn-wrapper {
  326. 		padding: .5em;
  327. 	}
  328.  
  329. 	.no-csstransforms .cn-wrapper li {
  330. 		width: 4em;
  331. 		height: 4em;
  332. 		font-size: .9em;
  333. 		line-height: 4em;
  334. 	}
  335. }
  336.  
  337. @media only screen and (max-width: 480px) {
  338. 	.csstransforms .cn-wrapper {
  339. 		font-size: .68em;
  340. 	}
  341.  
  342. 	.cn-button {
  343. 		font-size: 1em;
  344. 	}
  345. }
  346.  
  347. @media only screen and (max-width:420px) {
  348. 	.no-csstransforms .cn-wrapper li {
  349. 		width: 100%;
  350. 		height: 3em;
  351. 		line-height: 3em;
  352. 	}
  353. }

Và

  1. /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input,select{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
Demo
Package icon menu-hinh-tron.zip

Có thể bạn quan tâm

Run là gì? những lệnh run cơ bản bạn nên biết

Hướng dẫn thay đổi màu nền trong Word

Cách tạo chữ ký trong Gmail

Cách chuyển ngôn ngữ Facebook sang tiếng Việt

Cách cố định hàng, cột trong Excel 2007, 2010, 2013

Vô hiệu hóa tính năng SmartScreen trên Windows 8/8.1

Tại sao Windows 7 bị màn hình đen? Cách sửa lỗi màn hình đen trên Windows 7

Cách gõ chỉ số trên dưới trong Word, Exel 2003, 2007, 2010, 2013

Tổng hợp cách khởi động Command Prompt trên Windows 7

OpenGL là gì?