Home »

Hướng dẫn tạo Sliding Menu bằng jQuery

12 thg 9, 2013

Menu là một thành phần quan trọng trong tổng thể website và có nhiều cách để thể hiện. Hôm nay, Y2Graphic hướng dẫn các bạn tạo Sliding Menu đơn giản bằng jQuery. Dạng menu này sẽ tiết kiệm diện tích không gian, đặc biệt rất thích hợp với những giao diện trên thiết bị di động.

HTML

Chúng ta sẽ thêm đoạn code HTML đơn giản như sau:
?
1
2
3
4
5
6
7
8
9
10
11
<div id="menu">
<ul class="nav">
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">HTML & CSS</a></li>
<li><a href="#">Website</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>

CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
#menu {
background: #2e2e2e;
width: 150px;
padding: 30px;
position: fixed;
z-index: 99999;
box-shadow: 4px 0 10px rgba(0,0,0,0.25);
-moz-box-shadow: 4px 0 10px rgba(0,0,0,0.25);
-webkit-box-shadow: 4px 0 10px rgba(0,0,0,0.25);}
#menu {
left: 0;}
#menu:hover, #menu:focus {
left: 0 !important;}
Tiếp theo đoạn CSS này áp dụng cho phần tử <ul.nav>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
ul.nav {
position: relative;
top: 100px;list-style-type:none;}
ul.nav li a {
padding: 10px 5px;
border-bottom: 1px solid #575757;
display: block;
font-family:Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
font-weight:bold;}
ul.nav li a:hover {
color: #ee4e1d;}

jQuery

Khai báo đoạn script dưới đây và đặt vào trong phần <head>.
?
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu").height($(document).height());
});
</script>
<script type="text/javascript">
$(document).ready(function() {
setTimeout( function(){$('#menu').css('left','-180px');},0);
});
</script>
Cuối cùng ta thêm hiệu ứng transition khi rê chuột vào phần menu
?
1
2
3
4
5
#menu, ul.nav li  a {
transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;}
Hy vọng các bạn yêu thích dạng menu này. Trong thời gian tới, mình sẽ giới thiệu thêm 2 dạng menu độc lạ. Nhớ theo dõi nhé.
Tags:

Comments[ 0 ]


Đăng nhận xét