Sebelum aku meluncurkan template Material Design yang sedang aku buat kali ini aku akan membagikan satu serpihan dari template tersebut yaitu : Menu Navigasi.
Sebelum lanjut ke tutorial Apa itu Material Design?
Material Design yakni material sederhana dari kertas dan tinta. Kertas dianggap sebagai elemen antarmuka, sedangkan tinta ialah warna, animasi yakni riak, dinamika ialah gerak, dan talenta dalam desain.
Source Google.com
Sebelum lanjut ke tutorial Apa itu Material Design?
Material Design yakni material sederhana dari kertas dan tinta. Kertas dianggap sebagai elemen antarmuka, sedangkan tinta ialah warna, animasi yakni riak, dinamika ialah gerak, dan talenta dalam desain.
Source Google.com
Menu Navigasi yang akan aku bagikan kali ini memakai jQuery dan Font Awesome, maka pastikan sudah terdapat jQuery dan Font Awesome pada blog sobat.
Pada tutorial ini aku akan menunjukkan bonus tutorial berupa "Membuat Efek Waves/Ripple pada Elemen" sebab pengaruh ini juga masuk kedalam struktur Menu Navigasi pada tutorial ini.
Membuat Material Design Menu Navigation
Langkah pertama buka Blogger.com > Template > Edit HTML
Klik Kolom HTML dan cari arahan
<body memakai Ctrl + F kemudian letakan arahan HTML di bawah ini sempurna di bawah arahan tersebut.<div class='darkshadow'></div> <nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'> <div class='wrapper'> <div class='profilemenu'> <img alt='Admin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCMh-EE2X1Dwx7o6hyphenhyphenLIuVaA7ZpP9-ErzeSR5wZPowkZUXH_FOMem1GCXVXxy_5EaEcEfcERHsno5d4yjC02xM_ZRRuhOT6wRrLCgYr934Jf2-dn0osPUsAoxNs3BJTgMOlcobm2zbmI/s1600/noimage.png' title='Admin'/> <h3>Nama Admin</h3> <a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'></i></a> <p>emailkamu@gmail.com</p> <ul id='nav-menu1'> <li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Google+</span></a></li> <li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Facebook</span></a></li> <li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Twitter</span></a></li> </ul> </div> <ul class='nav nav-menu2'> <li><a class='waves-effect' href='/' itemprop='url' expr:title='data:blog.title'><span itemprop='name'><i class='fa fa-home'></i> Home</span></a></li> <li class='sub-menu'> <a class='dropdown waves-effect' href='javascript:;' title='Ranking'><i class='fa fa-trophy'></i> Ranking</a> <ul class='sub'> <li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Players</span></a></li> <li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Groups</span></a></li> <li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Company</span></a></li> </ul> </li> <li><a class='waves-effect' href='#' itemprop='url' title='News'><span itemprop='name'><i class='fa fa-newspaper-o'></i> News</span></a></li> <li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><span itemprop='name'><i class='fa fa-inbox'></i> Inbox</span></a></li> <h2>Submenu</h2> <li><a class='waves-effect' href='#' itemprop='url' title='Settings'><span itemprop='name'><i class='fa fa-gear'></i> Settings</span></a></li> <li><a class='waves-effect' href='#' itemprop='url' title='My File'><span itemprop='name'><i class='fa fa-file'></i> My File</span></a></li> <li><a class='waves-effect' href='#' itemprop='url' title='Upload'><span itemprop='name'><i class='fa fa-cloud-upload'></i> Upload</span></a></li> </ul> </div> </nav>Selanjutnya Cari arahan
]]></b:skin> atau </style> dan letakan arahan CSS di bawah ini sempurna di atas arahan tersebut./* Material Design Navigation */ .toggleMenu{color:#fff;padding:10px;font-size:25px;float:left;margin-right:20px}h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0} .dropdowns{font:normal normal 14px Roboto,Arial,sans-serif;background:#fff;overflow:auto;position:fixed;z-index:99;bottom:0;width:300px;left:-400px;transition:all .7s ease-in-out;top:0;border-top:1px solid #ddd;line-height:48px;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} .nav-menu2{list-style:none;margin:0;*zoom:1;float:left;padding:0} .nav-menu2:before,.nav-menu2:after{content:" ";display:table} .nav-menu2:after{clear:both}.sub-menu{transition:all .5s ease-in-out} .nav-menu2 ul{list-style:none;margin:0;width:auto;white-space:nowrap} .nav-menu2 a{display:block;padding:0 15px} .nav-menu2 li{position:relative;margin:0} .nav-menu2 > li{float:left;width:100%} .nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#666} .nav-menu2 > li:hover > a{background:#E6E6E6} .nav-menu2 li ul{background:#fff;display:none;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;padding:0} .nav-menu2 li li ul{left:100%;top:-1px} .nav-menu2 li li a.click ul{visibility:visible;opacity:10} .nav-menu2 li li a{display:block;color:#666;position:relative;padding-left:53px;line-height:40px} .nav-menu2 li li a:hover{background:#f0f0f0} .nav-menu2 li li li a{background:#fff;z-index:20;color:#333} .nav-menu2 li .dropdown:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;position:absolute;top:0;right:20px;color:#444} .nav-menu2 li .dropdown.open:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit} .nav-menu2 li .dropdown:hover:after{color:#000} .nav-menu2 li i{font-size:18px;width:35px}.nav li a.click{opacity:1} .nav-menu2 h2{font-size:14px;font-weight:normal!important;padding:0 20px;margin:0;overflow:hidden;border-top:1px solid #ddd;color:#999} .dropdowns h3,.dropdowns p{padding:0;margin:0;font-weight:400!important} .dropdowns .profilemenu{padding:10px;background:#f8f8f8;border-bottom:1px solid #ddd;line-height:2} .dropdowns h3{font-size:14px}.nav-menu2 p{font-size:13px} .dropdowns img{width:70px;height:70px;border-radius:100%} #info2{float:right;border-radius:100%;padding:0 10px;color:#999} #info2:hover{background:#ddd} #nav-menu1{visibility:hidden;position:absolute;background:#fff;list-style:none;right:30px;top:135px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)} #nav-menu1 li{width:100%} #nav-menu1 li a{padding:8px 15px;width:100%;font-weight:300;color:#666} #nav-menu1 li a:hover{background:#e1e1e1} #nav-menu1.shows{visibility:visible;width:200px;height:130px} .dropdowns.shows{left:0;opacity:1} .darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0, 0, 0, 0.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out} .darkshadow.shows{visibility:visible;opacity:1}Javascript letakan di atas arahan
</body><script type='text/javascript'> $(document).ready(function(){$("#info2").click(function(){$("#nav-menu1").toggleClass("shows");});}); $(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});}); $(document).ready(function(){$(".darkshadow").click(function(){$(".dropdowns").removeClass("shows");});}); $(document).ready(function(){$(".darkshadow").click(function(){$(".darkshadow").removeClass("shows");});}); $(document).ready(function(){$(".toggleMenu").click(function(){$(".darkshadow").toggleClass("shows");});}); //<![CDATA[ // Sub Nav var Script=function(){jQuery('.nav-menu2 .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.nav-menu2'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".nav-menu2").scrollTo("-="+Math.abs(diff),500);else $(".nav-menu2").scrollTo("+="+Math.abs(diff),500)})}(); //]]> </script>Untuk Memunculkan Menu dari samping kiri, tambahkan HTML button dibawah ini di daerah yang sahabat inginkan, jikalau galau silahkan letakan di bawah arahan
<body<a class='toggleMenu ripple' href='javascript:;'><i class='fa fa-bars'></i></a>Tutorial Menambah Efek Waves dan Ripple
Cari arahan
]]></b:skin> atau </style> dan masukan arahan CSS di bawah ini sempurna di atas arahan tersebut./* Material Design Effect */ .waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;z-index:1;will-change:opacity, transform;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out} .waves-effect .waves-ripple{position:absolute;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;opacity:0;background:rgba(0,0,0,0.2);-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;-ms-transition:all 0.7s ease-out;transition:all 0.7s ease-out;-webkit-transition-property:-webkit-transform, opacity;-moz-transition-property:-moz-transform, opacity;-o-transition-property:-o-transform, opacity;transition-property:transform, opacity;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);pointer-events:none} .waves-effect.waves-light .waves-ripple{background-color:rgba(255,255,255,0.45)} .waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none !important;transition:none !important} .waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle, white 100%, black 100%)} .waves-input-wrapper{border-radius:0.2em;vertical-align:bottom;width:100%} .waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1} .waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%;-webkit-mask-image:none} .waves-block{display:block} a.waves-effect .waves-ripple{z-index:-1} .ripple{display:inline-block;text-decoration:none;overflow:hidden;position:relative;z-index:0} .ink{display:block;position:absolute;background:rgba(255,255,255,0.4);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.animate{-webkit-animation:ripple .55s linear;-moz-animation:ripple .55s linear;-ms-animation:ripple .55s linear;-o-animation:ripple .55s linear;animation:ripple .55s linear} @-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}} @-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}} @-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}} @keyframes ripple{100%{opacity:0;transform:scale(2.5)}}Masukan Javascript di bawah ini sempurna di atas arahan
</body><script type='text/javascript'> //<![CDATA[ // New Waves !function(t){"use strict";function e(t){return null!==t&&t===t.window}function n(t){return e(t)?t:9===t.nodeType&&t.defaultView}function a(t){var e,a,i={top:0,left:0},o=t&&t.ownerDocument;return e=o.documentElement,void 0!==t.getBoundingClientRect&&(i=t.getBoundingClientRect()),a=n(o),{top:i.top+a.pageYOffset-e.clientTop,left:i.left+a.pageXOffset-e.clientLeft}}function i(t){var e="";for(var n in t)t.hasOwnProperty(n)&&(e+=n+":"+t[n]+";");return e}function o(t){if(!1===d.allowEvent(t))return null;for(var e=null,n=t.target||t.srcElement;null!==n.parentElement;){if(!(n instanceof SVGElement||-1===n.className.indexOf("waves-effect"))){e=n;break}if(n.classList.contains("waves-effect")){e=n;break}n=n.parentElement}return e}function r(e){var n=o(e);null!==n&&(c.show(e,n),"ontouchstart"in t&&(n.addEventListener("touchend",c.hide,!1),n.addEventListener("touchcancel",c.hide,!1)),n.addEventListener("mouseup",c.hide,!1),n.addEventListener("mouseleave",c.hide,!1))}var s=s||{},u=document.querySelectorAll.bind(document),c={duration:750,show:function(t,e){if(2===t.button)return!1;var n=e||this,o=document.createElement("div");o.className="waves-ripple",n.appendChild(o);var r=a(n),s=t.pageY-r.top,u=t.pageX-r.left,d="scale("+n.clientWidth/100*10+")";"touches"in t&&(s=t.touches[0].pageY-r.top,u=t.touches[0].pageX-r.left),o.setAttribute("data-hold",Date.now()),o.setAttribute("data-scale",d),o.setAttribute("data-x",u),o.setAttribute("data-y",s);var l={top:s+"px",left:u+"px"};o.className=o.className+" waves-notransition",o.setAttribute("style",i(l)),o.className=o.className.replace("waves-notransition",""),l["-webkit-transform"]=d,l["-moz-transform"]=d,l["-ms-transform"]=d,l["-o-transform"]=d,l.transform=d,l.opacity="1",l["-webkit-transition-duration"]=c.duration+"ms",l["-moz-transition-duration"]=c.duration+"ms",l["-o-transition-duration"]=c.duration+"ms",l["transition-duration"]=c.duration+"ms",l["-webkit-transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",l["-moz-transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",l["-o-transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",l["transition-timing-function"]="cubic-bezier(0.250, 0.460, 0.450, 0.940)",o.setAttribute("style",i(l))},hide:function(t){d.touchup(t);var e=this,n=(e.clientWidth,null),a=e.getElementsByClassName("waves-ripple");if(!(a.length>0))return!1;var o=(n=a[a.length-1]).getAttribute("data-x"),r=n.getAttribute("data-y"),s=n.getAttribute("data-scale"),u=350-(Date.now()-Number(n.getAttribute("data-hold")));u<0&&(u=0),setTimeout(function(){var t={top:r+"px",left:o+"px",opacity:"0","-webkit-transition-duration":c.duration+"ms","-moz-transition-duration":c.duration+"ms","-o-transition-duration":c.duration+"ms","transition-duration":c.duration+"ms","-webkit-transform":s,"-moz-transform":s,"-ms-transform":s,"-o-transform":s,transform:s};n.setAttribute("style",i(t)),setTimeout(function(){try{e.removeChild(n)}catch(t){return!1}},c.duration)},u)},wrapInput:function(t){for(var e=0;e<t.length;e++){var n=t[e];if("input"===n.tagName.toLowerCase()){var a=n.parentNode;if("i"===a.tagName.toLowerCase()&&-1!==a.className.indexOf("waves-effect"))continue;var i=document.createElement("i");i.className=n.className+" waves-input-wrapper";var o=n.getAttribute("style");o||(o=""),i.setAttribute("style",o),n.className="waves-button-input",n.removeAttribute("style"),a.replaceChild(i,n),i.appendChild(n)}}}},d={touches:0,allowEvent:function(t){var e=!0;return"touchstart"===t.type?d.touches+=1:"touchend"===t.type||"touchcancel"===t.type?setTimeout(function(){d.touches>0&&(d.touches-=1)},500):"mousedown"===t.type&&d.touches>0&&(e=!1),e},touchup:function(t){d.allowEvent(t)}};s.displayEffect=function(e){"duration"in(e=e||{})&&(c.duration=e.duration),c.wrapInput(u(".waves-effect")),"ontouchstart"in t&&document.body.addEventListener("touchstart",r,!1),document.body.addEventListener("mousedown",r,!1)},s.attach=function(e){"input"===e.tagName.toLowerCase()&&(c.wrapInput([e]),e=e.parentElement),"ontouchstart"in t&&e.addEventListener("touchstart",r,!1),e.addEventListener("mousedown",r,!1)},t.Waves=s,document.addEventListener("DOMContentLoaded",function(){s.displayEffect()},!1)}(window); //]]> </script> <script type='text/javascript'> //<![CDATA[ // Effect $(function() { var ink, d, x, y; $(".ripple").click(function(e) { if ($(this).find(".ink").length === 0) { $(this).prepend("<span class='ink'></span>"); } ink = $(this).find(".ink"); ink.removeClass("animate"); if (!ink.height() && !ink.width()) { d = Math.max($(this).outerWidth(), $(this).outerHeight()); ink.css({ height: d, width: d }); } x = e.pageX - $(this).offset().left - ink.width() / 2; y = e.pageY - $(this).offset().top - ink.height() / 2; ink.css({ top: y + 'px', left: x + 'px' }).addClass("animate"); }); }); //]]> </script>Script Pada Google Drive diatas, Copy kemudian simpan dalam format .js dan Upload ke Google Drive sendiri untuk mengantisipasi terjadinya error.
Simpan Template.
Untuk Memasang Efek Waves dan Ripple pada Suatu Konten/Link anda hanya perlu menambah class pada tag HTML. Contoh : class='namaclass'
waves-effect = Untuk menambah pengaruh gelombang dikala di klik/focuswaves-light = Untuk merubah warna pengaruh gelombang menjadi terangripple = Untuk menambah pengaruh dikala di klikPenggunaan waves-light harus digabungkan dengan waves-effect. Menjadi :
class='waves-effect waves-light'Result :
<a class='waves-effect waves-light' href='#link'>Button</a> Itulah Tutorial yang sanggup aku bagikan kali ini. Tunggu template Material Design yang akan aku luncurkan.. Terimakasih. Sumber https://www.idblanter.com
