HD
Hướng dẫn tạo menu giao diện material bằng css và jquery
- Đăng bởi:
- Mạnh Cường - 22:10
- Các mẫu template sử dụng menu với rất nhiều giao diện khác nhau trong đó yếu tố phẳng thường được ưa chuộng đưa vào cho phù hợp với xu hướng...
1 Tỷ
1 lượt
N/A
2
6
Tắt Quảng Cáo
Bấm vào để gửi phim này cho bạn bè cùng xem !
Các mẫu template sử dụng menu với rất nhiều giao diện khác nhau trong đó yếu tố phẳng thường được ưa chuộng đưa vào cho phù hợp với xu hướng hiện nay. Các bạn có thể bắt gặp menu dạng này trong nền tảng mobile có trong ứng dụng của Google hay Facebook và trên trình duyệt web. Đặc điểm chung của menu dạng này có giao diện hiện đại, thiết kế phẳng, không chiếm nhiều không gian, dễ tùy biến..., và nếu bạn gõ tìm kiếm từ khóa material menu cũng có một số trang độc lập họ thiết kế sẵn và có hướng dẫn khi đưa vào sử dụng trong mẫu. Tuy nhiên nếu bạn là người hay tìm tòi tự làm thủ công thì bạn có thể tham khảo mẫu mình làm sẵn bên dưới và bạn có thể dựa vào mẫu này để thiết kế lại thành những mẫu khác phù hợp và đẹp hơn.
Xem Demo click vào nút bên dưới
Hướng dẫn cách làm:
B1: Chèn link sau thẻ <head> và trước <b:skin>
B2: CSS (chèn trước </b:skin>)
B3: javascript (chèn trước </body>)
B4: Sử dụng trong Html
Thay icon tại địa chỉ https://material.io/icons hoặc http://materializecss.com/icons
Xem Demo click vào nút bên dưới
Hướng dẫn cách làm:
B1: Chèn link sau thẻ <head> và trước <b:skin>
<link href='//fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' />
B2: CSS (chèn trước </b:skin>)
.material {
position: relative;
float: left;
}
.material a {
color: #333333
}
.sidenav {
background: #FFFFFF;
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
display: block;
font-size: 16px;
font-weight: 400;
height: 100%;
left: 0;
position: fixed;
overflow: auto;
transform: translate(-262px, 0);
transition: transform .3s;
top: 0;
width: 256px;
z-index: 100;
}
.sidenav.show {
transform: translate(0, 0);
}
.sidenav-brand {
background: url(https://i.imgur.com/H4dLoRj.jpg) center center no-repeat;
font-size: 13px;
font-weight: 400;
line-height: 21px;
padding: 20px 24px 24px;
height: 95px
}
.profile {
color:#FFFFFF
}
.sidenav-menu {
list-style: none;
margin: 0;
padding: 0;
}
.sidenav-menu li {
display: block;
position: relative;
}
.sidenav-menu a {
background: transparent;
color: #333333;
display: block;
line-height: 24px;
padding: 16px 32px;
text-decoration: none;
}
.sidenav-menu a:hover {
background: 0;
color: #333333;
}
.sidenav-menu a.active {
color: #333333;
}
.sidenav-menu a.active .sidenav-link-icon,.sidenav-menu a.active .sidenav-dropdown-icon {
color: #333333;
}
.sidenav-link-icon {
color: #757575;
display: block;
height: 24px;
left: 24px;
position: absolute;
text-align: center;
top: 16px;
width: 24px;
}
.sidenav-link-title {
display: block;
padding: 0 16px 0 40px;
}
.sidenav-dropdown {
border-bottom: 1px solid #424242;
display: none;
list-style: none;
margin: 0;
padding: 0;
}
.sidenav-dropdown a {
background: #191919;
color: #BDBDBD;
padding-left: 72px;
}
.sidenav-dropdown a:hover {
background: #616161;
color: #BDBDBD;
}
.sidenav-dropdown li:first-child a {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.sidenav-dropdown-icon {
color: #757575;
display: none;
height: 16px;
right: 16px;
position: absolute;
text-align: center;
top: 16px;
width: 16px;
}
.sidenav-dropdown-icon.show {
display: block;
}
.sidenav-overlay {
background: rgba(255, 255, 255, 0.8);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
.sidenav-no-scroll {
overflow: hidden !important;
}
B3: javascript (chèn trước </body>)
<script src='//cdn.rawgit.com/blogthuthuatwin10/js/master/sidenav.min.js' type='text/javascript'/>
<script>
//<![CDATA[
$('[data-sidenav]').sidenav();
//]]>
</script>
B4: Sử dụng trong Html
<div class='material'>
<a href="javascript:;" class="toggle" id="sidenav-toggle">
<i class="material-icons">menu</i>
</a>
</div>
<nav class='sidenav' data-sidenav='active' data-sidenav-toggle='#sidenav-toggle'>
<div class='sidenav-brand'>
<img alt="author" src="http://i.imgur.com/AJ8dMZJ.jpg" style='border-radius: 50%; height: 48px; width: 48px;margin-bottom: 10px;'></img>
<a class="profile" href='http://plus.google.com/+blogthuthuatwin10' target='_blank'>Nguyễn Tuấn</a>
<a class="profile" href='mailto:nguyenanhtuan2401@gmail.com'>nguyenanhtuan2401@gmail.com</a>
</div>
<ul class="sidenav-menu">
<li>
<a href="javascript:;" data-sidenav-dropdown-toggle class="active">
<span class="sidenav-link-icon">
<i class="material-icons">store</i>
</span>
<span class="sidenav-link-title">Sub Menu</span>
<span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon='active'>
<i class="material-icons">expand_more</i>
</span>
<span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon='active'>
<i class="material-icons">expand_less</i>
</span>
</a>
<ul class="sidenav-dropdown" data-sidenav-dropdown='active'>
<li><a href="javascript:;">Item 1</a></li>
<li><a href="javascript:;">Item 2</a></li>
<li><a href="javascript:;">Item 3</a></li>
</ul>
</li>
<li>
<a href="javascript:;" data-sidenav-dropdown-toggle='active'>
<span class="sidenav-link-icon">
<i class="material-icons">payment</i>
</span>
<span class="sidenav-link-title">Sub Menu</span>
<span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon='active'>
<i class="material-icons">expand_more</i>
</span>
<span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon='active'>
<i class="material-icons">expand_less</i>
</span>
</a>
<ul class="sidenav-dropdown" data-sidenav-dropdown='active'>
<li><a href="javascript:;">Item 1</a></li>
<li><a href="javascript:;">Item 2</a></li>
<li><a href="javascript:;">Item 3</a></li>
</ul>
</li>
<li>
<a href="javascript:;" data-sidenav-dropdown-toggle='active'>
<span class="sidenav-link-icon">
<i class="material-icons">shopping_cart</i>
</span>
<span class="sidenav-link-title">Sub Menu</span>
<span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon='active'>
<i class="material-icons">expand_more</i>
</span>
<span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon='active'>
<i class="material-icons">expand_less</i>
</span>
</a>
<ul class="sidenav-dropdown" data-sidenav-dropdown='active'>
<li><a href="javascript:;">Item 1</a></li>
<li><a href="javascript:;">Item 2</a></li>
<li><a href="javascript:;">Item 3</a></li>
</ul>
</li>
<li>
<li>
<a href="javascript:;" data-sidenav-dropdown-toggle='active'>
<span class="sidenav-link-icon">
<i class="material-icons">code</i>
</span>
<span class="sidenav-link-title">Sub Menu</span>
<span class="sidenav-dropdown-icon show" data-sidenav-dropdown-icon='active'>
<i class="material-icons">expand_more</i>
</span>
<span class="sidenav-dropdown-icon" data-sidenav-dropdown-icon='active'>
<i class="material-icons">expand_less</i>
</span>
</a>
<ul class="sidenav-dropdown" data-sidenav-dropdown='active'>
<li><a href="javascript:;">Item 1</a></li>
<li><a href="javascript:;">Item 2</a></li>
<li><a href="javascript:;">Item 3</a></li>
</ul>
</li>
<li>
<a href="javascript:;">
<span class="sidenav-link-icon">
<i class="material-icons">assignment_ind</i>
</span>
<span class="sidenav-link-title">Item 1</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="sidenav-link-icon">
<i class="material-icons">alarm</i>
</span>
<span class="sidenav-link-title">Item 2</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="sidenav-link-icon">
<i class="material-icons">backup</i>
</span>
<span class="sidenav-link-title">Item 3</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="sidenav-link-icon">
<i class="material-icons">settings</i>
</span>
<span class="sidenav-link-title">Item 4</span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="sidenav-link-icon">
<i class="material-icons">email</i>
</span>
<span class="sidenav-link-title">Item 5</span>
</a>
</li>
</ul>
</nav>
Thay icon tại địa chỉ https://material.io/icons hoặc http://materializecss.com/icons
