Tạo menu slideout bằng CSS3

Đây là menu rất hay mà mình muốn chia sẻ với các bạn, menu này chạy tốt trên các trình duyệt như Firefox, Chrome, Safary, và Opera, Nhưng với trình duyệt IE thì không hoạt động (thuộc tính transitions không được hỗ trợ) . Tuy nhiên mình có hack một chút để có thể chạy được trên IE nhưng có điều không được mượt cho lắm. Các bạn có thể kiểm chứng bằng việc xem demo bài viết.
Bây giờ chúng ta cùng bắt tay làm menu nào

Bước 1 : HTML

</pre>
<div>
<ul>
	<li> 
<ul>
	<li><a href="http://www.thuthuatweb.net/"><strong>Home</strong>
custom description here

<em></em></a></li>
	<li><a href="#"><strong>Tutorials</strong>
custom description here

<em></em></a></li>
	<li><a href="#"><strong>Resources</strong>
custom description here

<em></em></a></li>
	<li><a href="#"><strong>About</strong>
custom description here

<em></em></a></li>
	<li><a href="http://www.thuthuatweb.net/css/"><strong>Back</strong>
custom description here

<em></em></a></li>
</ul>
 </li>
</ul>
<div style="clear: both;"></div>
</div>
<pre>

Bước 2 : CSS

/* demo page styles */
body {
background:#eee;
margin:0;
padding:0;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}
.example {
position:relative;
background:#fff url(images/background.jpg);
awidth:650px;
height:382px;
border:1px #000 solid;
margin:20px auto;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
/* main menu styles */
ul.nav {
list-style:none;
height:120px;
margin:0;
padding:0;
}
ul.nav table {
border-collapse:collapse;
awidth:0;
height:0;
margin:-1px 0 -5px -1px;
}
ul.nav > li {
float:right;
height:120px;
awidth:40px;
position:relative;
overflow:hidden;
-webkit-transition-duration:.5s;
-moz-transition-duration:.5s;
-o-transition-duration:.5s;
}
* html ul.nav > li {
awidth:auto;
}
ul.nav > li a.ie6 {
float:left;
height:120px;
awidth:39px;
position:relative;
overflow:hidden;
}
ul.sub {
list-style:none;
height:120px;
awidth:600px;
background:url(images/panel.png) no-repeat right top;
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}
ul.sub li {
float:left;
}
ul.sub li:first-child {
margin-left:45px;
}
ul.sub li a {
display:block;
awidth:110px;
height:120px;
float:left;
overflow:hidden;
position:relative;
text-decoration:none;
color:#000;
}
ul.sub li a b {
font-weight:700;
display:block;
padding:15px 15px 5px;
}
ul.sub li a p {
font-size:12px;
display:block;
margin:0;
padding:0 10px;
}
ul.sub li a i {
display:block;
awidth:64px;
height:64px;
position:absolute;
right:10px;
bottom:10px;
background:url(images/post.png);
opacity:0.1;
filter:alpha(opacity = 10);
-webkit-transition-duration:.5s;
-moz-transition-duration:.5s;
-o-transition-duration:.5s;
}
ul.nav > li:hover {
awidth:600px;
}
ul.nav > li a.ie6:hover {
direction:ltr;
awidth:600px;
}
ul.sub li a:hover i {
opacity:1.0;
}

Các bạn có thể save những hình ảnh được dùng trong menu từ demo . Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster