04/10/2018, 20:05
Tạo Side Menu theo phong cách iOS 7 với jQuery và CSS3
Fly Side Menu là một jQuery plugin cực cool được dùng để tạo menu với sự hỗ trợ của CSS3. Trong bài viết này, mình sẽ chia sẻ cho các bạn một menu có hiệu ứng 3D tượng tự như menu được dùng trong iOS7. Xem Demo | Download Đầu tiên , các bạn chèn khai báo đoạn code sau bên trong thẻ head ...
Fly Side Menu là một jQuery plugin cực cool được dùng để tạo menu với sự hỗ trợ của CSS3. Trong bài viết này, mình sẽ chia sẻ cho các bạn một menu có hiệu ứng 3D tượng tự như menu được dùng trong iOS7.
Xem Demo | Download
Đầu tiên , các bạn chèn khai báo đoạn code sau bên trong thẻ head :
<link href="fly_sidemenu.css" rel="stylesheet" type="text/css" />
Các ban có thể download file fly_sidemenu.css ở mục download có trong bài viết.
Kế tiếp chèn đoạn html sau để tạo menu :
<ul class="sidemenu"> <li><a href="http://www.thuthuatweb.net/wordpress">WordPress</a></li> <li><a href="http://www.thuthuatweb.net/joomla">Joomla</a></li> <li><a href="http://www.thuthuatweb.net/photoshop">Photoshop</a></li> <li><a href="http://www.thuthuatweb.net/thu-thuat-html5">HTML5</a></li> <li><a href="http://www.thuthuatweb.net/javacript">Javascript</a></li> </ul>
CSS
Các bạn chèn thêm đoạn css sau vào bên trong thẻ <head>
html {
height: 100%;
}
body {
background: #272D30;
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
a {
text-decoration: none;
}
h1, h2 {
awidth: 100%;
float: left;
}
h1 {
margin-top: 100px;
color: #000;
margin-bottom: 5px;
font-size: 70px;
letter-spacing: -4px;
}
h2 {
letter-spacing: 2px;
color: #000;
font-weight: 100;
margin-top: 10px;
margin-bottom: 10px;
}
.pointer {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: fixed;
top: 62px;
left: 25px;
}
pre {
margin: 80px auto;
}
pre code {
padding: 35px;
border-radius: 5px;
font-size: 15px;
background: rgba(0,0,0,0.1);
border: rgba(0,0,0,0.05) 5px solid;
max-awidth: 500px;
}
.main {
float: left;
awidth: 100%;
margin: 0 auto;
}
.main h1 {
padding: 20px 50px 10px;
float: left;
awidth: 100%;
font-size: 60px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 100;
margin: 0;
padding-top: 25px;
font-family: 'open sans';
letter-spacing: -3px;
text-transform: uppercase;
}
.main h1.demo1 {
background: #1ABC9C;
}
.reload.bell {
font-size: 12px;
padding: 20px;
awidth: 45px;
text-align: center;
height: 47px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
.reload.bell #notification {
font-size: 25px;
line-height: 140%;
}
.reload, .btn {
display: inline-block;
border: 4px solid #A2261E;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #CC3126;
display: inline-block;
line-height: 100%;
padding: 0.7em;
text-decoration: none;
color: #fff;
awidth: 100px;
line-height: 140%;
font-size: 17px;
font-family: open sans;
font-weight: bold;
}
.reload:hover {
background: #A2261E;
}
.btn {
awidth: 200px;
color: #fff;
border: none;
margin-left: 10px;
background: #00B0FF;
}
.clear {
awidth: auto;
}
.btn:hover, .btn:hover {
background: #00CDFF;
}
.btns {
awidth: 410px;
margin: 50px auto;
}
.credit {
background: #f6f6f6;
text-align: center;
color: #000;
padding: 10px;
margin: 0 0 40px 0;
float: left;
awidth: 100%;
letter-spacing: 1px;
}
.credit a {
color: #000;
text-decoration: none;
font-weight: bold;
}
.back {
position: absolute;
top: 0;
left: 0;
text-align: center;
display: block;
padding: 7px;
awidth: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: #00B0FF;
font-weight: bold;
font-size: 13px;
color: #fff;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.back:hover {
background: #00CDFF;
}
.fsm-sidebar {
position: fixed;
}
.fsm-button {
font-size: 24px;
color: #000;
top: 36px;
line-height: 100%;
}
.page-container {
max-awidth: 700px;
margin: auto;
}
.page-container p {
font-size: 21px;
font-weight: 100;
line-height: 180%;
}
.page-container h3 {
font-family: "noto serif";
font-size: 23px;
}
jQuery
Sau đó , chèn khai báo sau trước thẻ đóng </body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.fly_sidemenu.js"></script>
Rồi khởi tạo plugin với những khai báo như sau :
<script>
$(document).ready( function() {
$(".sidemenu").fly_sidemenu({
btnContent: "=", // This option let you define what appears inside the side menu button. You can add your custom icon here. This option accepts all HTML tags. The default value is "=" string.
position: "left", // This option will let you define where the sidebar will appear on the page. Available options are "top", "left", "right", "bottom". The default value is "left"
customSelector: "li", // In case you do not want to use lists, simply define your own css selector here. The default value is "li".
hideButton: false // You can disable the auto creation of toggle button by changing this to true. The default value is false.
});
});
</script>
Chỉ vậy là xong, để hiểu rõ hơn, tốt nhất các bạn nên download toàn bộ file mà mình chia sẻ cho các bạn trong bài viết này ở link download.
Chúc các bạn thành công !
Chuyên Mục: Css, Javascript
Bài viết được đăng bởi webmaster
