نویسنده : میدوری
میدوری
مدالهای میدوری
دسترسی به میدوری اطلاعات میدوری
تاریخ عضویت: 05 November 2011
ارسال ها:
1,800
شماره کاربری:
1 میزان
اعتبار:
محل سکونت:
تهران
ماه تولد:
جنسيت:
آخرین دیدار :
تماس با میدوری
حالت میدوری صفحه های میدوری
یک ساید بار زیبا و سریع با کدهای CSS3 اين سايد بار از چپ براست باز می شود و بدون نیاز به تصویر است . بسیار سریع عمل می کند و تداخلی هم با سایر کدها پیدا نخواهد کرد . نخست نمونه ی زنده ی زیر را ببینید در صورت علاقه از کدهای داده شده استفاده کنید . مورد استفاده و تغییرات بعهده ی شماست .
کد HTML:
<!doctype html >
<html>
<head>
<title> Demo: Pure CSS Drawer Menu</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
<meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" />
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
}
/* Makes sure that everything is 100% height */
html,body {
height: 100%;
overflow: hidden;
}
/* gets the actual input out of the way; we're going to style the label instead */
#drawer-toggle {
position: absolute;
opacity: 0;
}
#drawer-toggle-label {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
left: 0px;
height:50px;
width: 50px;
display: block;
position: fixed;
background: rgba(255,255,255,.0);
z-index: 1;
}
/* adds our "hamburger" menu icon */
#drawer-toggle-label:before {
content: '';
display: block;
position: absolute;
height: 2px;
width: 24px;
background: #8d8d8d;
left: 13px;
top: 18px;
box-shadow: 0 6px 0 #8d8d8d, 0 12px 0 #8d8d8d;
}
header {
width: 100%;
position: fixed;
left: 0px;
background: #efefef;
padding: 10px 10px 10px 50px;
font-size: 30px;
line-height: 30px;
z-index: 0;
}
/* drawer menu pane - note the 0px width */
#drawer {
position: fixed;
top: 0;
left:-300px;
height: 100%;
width: 300px;
background: #2f2f2f;
overflow-x: hidden;
overflow-y: scroll;
padding: 20px;
-webkit-overflow-scrolling: touch;
}
/* actual page content pane */
#page-content {
margin-left: 0px;
margin-top: 50px;
width: 100%;
height: calc(100% - 50px);
overflow-x:hidden;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
padding: 20px;
}
/* checked styles (menu open state) */
#drawer-toggle:checked ~ #drawer-toggle-label {
height: 100%;
width: calc(100% - 300px);
background: rgba(255,255,255,.8);
}
#drawer-toggle:checked ~ #drawer {
left:0;
}
#drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header {
left: 300px;
}
#drawer-toggle:checked ~ #page-content {
margin-left: 300px;
}
/* Menu item styles */
#drawer ul {
list-style-type:none;
}
#drawer ul a {
display:block;
padding:10px;
color:#c7c7c7;
text-decoration:none;
}
#drawer ul a:hover {
color:white;
}
/* Responsive MQ */
@media all and (max-width:350px) {
#drawer-toggle:checked ~ #drawer-toggle-label {
height: 100%;
width: 50px;
}
#drawer-toggle:checked ~ #drawer-toggle-label, #drawer-toggle:checked ~ header {
left: calc(100% - 50px);
}
#drawer {
width:calc(100% - 50px);
left: -100%;
}
#drawer-toggle:checked ~ #page-content {
margin-left: calc(100% - 50px);
}
}
</style>
</head>
<body>
<input type = "checkbox" id = "drawer-toggle" name = "drawer-toggle" />
<label for = "drawer-toggle" id = "drawer-toggle-label" > </label>
<header> عنوان سایت شما</header>
<nav id = "drawer" >
<ul>
<li> <a href = "demos/pure-css-drawer-menu.html#" > منوی یکم</a> </li>
<li> <a href = "demos/pure-css-drawer-menu.html#" > منوی دوم</a> </li>
<li> <a href = "demos/pure-css-drawer-menu.html#" > منوی سوم</a> </li>
<li> <a href = "demos/pure-css-drawer-menu.html#" > منوی چهارم</a> </li>
</ul>
</nav>
<div id = "page-content" >
<p> یک ساید بار زیبا و سریع برای استفاده در سایت ها فقط با استفاده از کدهای سی اس اس</p>
</div>
</body>
</html> 1
محل حضور کاربر در تالار : میدوری
ديدگاه کاربران برای مطلب : (روی آیکون مورد نظر کلیک کنید تا دیدگاه شما ثبت شود . در صورت انصراف تا دوبار می توانید دیدگاه خود را ثبت کنید . برای پاک کردن دیدگاه روی همان آیکون یک بار کلیک کنید تا دیدگاه شما پاک شود .)
برچسب ها :
21 - January - 2015 09 : 12 AM
»
یک ساید بار زیبا و سریع با کدهای CSS3
محفوظ است .
قدرت گرفته از 
.
پارسی سازی توسط 
:
:
:
