Cách tạo Slide Out Panel với CSS3
Nhiều website có một panel ẩn với các thông tin như liên hệ, góp ý. Khi người dùng click hoặc đưa chuột vào một nút, panel này sẽ hiện ra với hiệu ứng đẹp mắt. Thông thường các website sử dụng jQuery, bài viết này sẽ hướng dẫn các bạn dùng CSS3.
Tạo file reset.css với nội dung sau
/* RESET */
/* ----------------------------------------- */
/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}
/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */
Tạo file styles.css với nội dung sau
@import url('reset.css');
body{
color: #484848;
background-color: #f7f7f7;
}
.clear {
clear: both;
}
h1{
font-size: 58px;
margin-bottom: 25px;
height: 68px;
}
h3{
font-size: 22px;
margin-bottom: 25px;
}
p{
text-align: left;
margin-bottom: 20px;
}
#slide-out {
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background-color: #686868;
height: 73px;
color: #fff;
position: relative ;
padding-top: 25px;
margin-top: -98px;
}
.page-wrap {
position: relative;
margin-right: auto;
margin-left: auto;
width: 635px;
}
#main-container{
border-top:thick solid #484848;
padding-top: 60px;
text-align: center;
}
.button{
background-image:url("../images/button.png");
bottom:-63px;
color:#FFFFFF;
display:block;
font-size:18px;
height:28px;
padding-top:5px;
position:absolute;
right:0;
text-align:center;
text-decoration:none;
width:105px;
z-index:100;
line-height: normal;
}
#slide-out:hover{
margin-top: 0px;
}
.button:hover #slide-out{
margin-top: 0px;
}
#subscribe{
line-height: 0px;
}
#subscribe ul li a{
background-repeat:no-repeat;
display:block;
float:left;
font-size:24px;
height:38px;
margin: 0px 20px;
padding: 10px 0px 0px 55px;
color: #d3d3d3;
text-decoration: none;
line-height: normal;
}
#subscribe ul li a:hover{
color: #fff;
}
.rss{
background-image: url('../images/rss.png');
}
.fb{
background-image: url('../images/facebook.png');
}
.twitter{
background-image: url('../images/twitter.png');
}
.mail{
background-image: url('../images/mail-rss.png');
margin: 0px;
}
Tạo file index.html với nội dung sau
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Create a cool slide out panel using CSS3 only</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<style>
#slide-out {
padding-top: 10px;
}
.button{
bottom:-64px;
}
#subscribe ul li a{
margin: 0px 15px;
padding: 10px 0px 0px 55px;
}
#slide-out{
margin-top: -83px;
}
</style>
<![endif]-->
</head>
<body>
<div id="slide-out">
<div id="subscribe" class="page-wrap">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/code-pal/">RSS</a></li>
<li ><a class="fb" href="http://www.facebook.com/pages/Code-pal/122517474443675">Facebook</a></li>
<li><a class="twitter" href="http://twitter.com/sumeetchawla">Twitter</a></li>
<li><a class="mail" href="http://feedburner.google.com/fb/a/mailverify?uri=code-pal&loc=en_US">Mail</a></li>
</ul>
<div class="clear"></div>
<a href="#" class="button">Subscribe!</a>
</div>
</div>
<div id="main-container">
<div class="page-wrap">
<h1>CSS3 : The Future is Near!</h1>
<h3>Hover over the subscribe button to see the cool slide effect created by using CSS3 purely.<small>Best viewed on Chrome and Safari</small></h3>
<p>Integer eu nunc in eros lobortis blandit. Suspendisse potenti. Donec sed dolor erat, eget egestas ligula. Suspendisse semper, mi nec lacinia bibendum, lorem neque vestibulum libero, at convallis felis nulla vel lectus. Donec urna massa, facilisis elementum egestas quis, imperdiet id risus. Mauris tellus metus, suscipit id venenatis nec, tempus sed nunc. Donec eu cursus quam. Sed magna lacus, lacinia faucibus mattis eu, bibendum ac sapien. Quisque feugiat, turpis eu hendrerit sodales, est leo dapibus justo, et dignissim quam ligula id purus. Pellentesque quis libero ac eros laoreet rutrum quis quis est. Morbi eu sapien dolor, sit amet commodo nunc. Proin et augue lacus. Ut consequat molestie urna at consectetur.</p>
<p>Nunc porta tellus nec velit vehicula sodales. Aliquam vel gravida sem. Curabitur sit amet mi risus, sit amet rhoncus tortor. Donec ornare, lacus interdum faucibus porta, ante est scelerisque elit, et adipiscing justo ligula at quam. Sed ante leo, dapibus non sollicitudin in, ultricies in urna. Vivamus id tempus lorem. Ut dignissim lacinia erat vel suscipit. Vestibulum placerat tempus aliquet. Proin vel nisl massa. Cras adipiscing, erat at vehicula varius, augue lacus auctor massa, ut egestas elit nunc eu massa.</p>
</div>
</div>
</body>
</html>
Thay đổi nội dung thẻ <div id="subscribe" class="page-wrap"> để hiển thị các thông tin bạn muốn khi người dùng đưa chuột vào nút "Subcribe!".
Chạy file index.html và xem kết quả. Bạn có thể xem bản demo và download source code của bài viết bên dưới.