Hướng dẫn tạo menu giao diện material bằng css và jquery version 2

Bạn muốn xem:

Ở bài viết hôm trước mình đã giới thiệu về menu với giao diện material, các bạn có thể xem bài viết hướng dẫn cách làm tại đây. Hôm nay mình tiếp tục giới thiệu cách tạo menu dạng này gọi là phiên bản v2. Trong bản này có thiết kế gần như tương tự với bản v1 nhưng được thiết kế lại một vài chỗ và giao diện cũng có đôi chỗ khác biệt nhưng vẫn lấy thiết kế material làm chủ đạo và sử dụng biểu tượng Material+Icons.

Xem Demo click vào nút bên dưới

Hướng dẫn thực hiện:

Bước 1: Chèn font bên dưới <:b/skin>

Copy

<script type='text/javascript'>

//<![CDATA[

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("//fonts.googleapis.com/icon?family=Material+Icons");

//]]>

</script>

Bước 2: Chèn css trước <:b/skin>

Copy

.toggleMenu{color:#333333;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-size:13px;color:#fff;font-weight:400!important}

.dropdowns .profilemenu{padding:10px;background:transparent url(https://i.imgur.com/JeNHxJ2.jpg);border-bottom:1px solid #ddd;line-height:2}

.dropdowns h3{font-size:13px;color:#fff}

.nav-menu2 p{font-size:13px}

.dropdowns img{width:48px;height:48px;border-radius:100%}

#info2{float:right;border-radius:100%;padding:0 10px;color:#fff}

#info2:hover{background:transparent}

#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}

.material-icons{vertical-align:text-bottom}

.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)}}

Bước 3: Chèn javascript trước thẻ đóng </body>

Copy

<script src='//cdn.rawgit.com/blogthuthuatwin10/js/master/material-menu.min.js' type='text/javascript' />

Bước 4: Chèn menu:

Copy

<a class='toggleMenu ripple' href='javascript:;'><i class="material-icons">menu</i></a>

<div class='darkshadow'></div>

<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

<div class='wrapper'>

<div class='profilemenu'>

<img alt='author' src='http://i.imgur.com/AJ8dMZJ.jpg' title='author'/>

<h3>Nguyễn Anh Tuấn</h3>

<a class='ripple' href='javascript:;' id='info2'><i class="material-icons" style="font-size:18px">arrow_drop_down</i></a>

<p>nguyenanhtuan2401@gmail.com</p>

<ul id='nav-menu1'>

<li><a class='waves-effect' href='#' itemprop='url'>Google+</span></a></li>

<li><a class='waves-effect' href='#' itemprop='url'>Facebook</span></a></li>

<li><a class='waves-effect' href='#' itemprop='url'>Twitter</span></a></li>

</ul>

</div>

<ul class='nav nav-menu2'>

<li><a class='waves-effect' href='/' itemprop='url' expr:title='data:blog.title'><i class="material-icons">home</i> Home</a></li>

<li class='submenu'>

<a class='dropdown waves-effect' href='javascript:;' title='sub menu'><span itemprop='name'><i class="material-icons">folder_shared</i> Sub Menu<span></a>

<ul class='sub'>

<li><a class='waves-effect' href='#' itemprop='url'>item-1</a></li>

<li><a class='waves-effect' href='#' itemprop='url'>item-2</a></li>

<li><a class='waves-effect' href='#' itemprop='url'>item-3</a></li>

</ul>

</li>

<li><a class='waves-effect' href='#' itemprop='url' title='News'><i class="material-icons">note</i> News</a></li>

<li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><i class="material-icons">mail</i></i> Inbox</a></li>

<h2>Submenu</h2>

<li><a class='waves-effect' href='#' itemprop='url' title='Settings'><i class="material-icons">settings</i> Settings</a></li>

<li><a class='waves-effect' href='#' itemprop='url' title='My File'><i class="material-icons">photo</i> Photos</a></li>

<li><a class='waves-effect' href='#' itemprop='url' title='Upload'><i class="material-icons">backup</i> Upload</a></li>

<li class='submenu'>

<a class='dropdown waves-effect' href='javascript:;' title='sub menu'><span itemprop='name'><i class="material-icons">folder_shared</i> Sub Menu<span></a>

<ul class='sub'>

<li><a class='waves-effect' href='#' itemprop='url'>item-1</a></li>

<li><a class='waves-effect' href='#' itemprop='url'>item-2</a></li>

<li><a class='waves-effect' href='#' itemprop='url'>item-3</a></li>

</ul>

</li>

</ul>

</div>

</nav>

Thay icon tại địa chỉ https://material.io/icons hoặc http://materializecss.com/icons