سورس کد سایدبار سایت با بوت استرپ
پروژه مدیریت سیستم مدرسه با سی شارپ و sql server
21 فروردین 1396
نرم افزارهای موبایلی آموزش انواع زبان های برنامه نویسی
13 اردیبهشت 1396
سورس کد سایدبار سایت با بوت استرپ ، ستون کناری یا sidebar یکی از بهترین ابزار ها در طراحی وب سایت برای نمایش امکانات سایت است که در اکثر مواقع در صفحات بخش ادمین برای جابجایی راحت ادمین بین امکانات و ویژگی های سایت استفاده میشود.
سورس کد ساید بار با بوت استرپ
برای ایجاد sidebar با bootstrap تنها کافیست رفرنس های بوت استرپ را به صفحه html خود اضافه کرده و با کدهای ساده ای که در ادامه آموزش خواهیم داد یک ساید بار ساده و کارا در سمت راست یا چپ بنا به سلیقه خود ایجاد میکنیم.
ما بوت استرپ را در پروژه خود نصب کرده و رفرنس های مورد نیاز را بدین صورت به قسمت head فایل html اضافه میکنیم به علاوه کدهای html که در نتیجه تمامی کدهای html بصورت زیر میشود
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>آموزش ساید بار</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="../Content/bootstrap.min.css" rel="stylesheet" /> <link href="../Content/MainCss.css" rel="stylesheet" /> <script src="../Scripts/jquery-1.9.1.min.js"></script> <script src="../Scripts/bootstrap.min.js"></script> </head> <body> <header> <nav class="navbar" role="navigation" style="background-color: #824009;"> <div class="container" style="background-color: #d4c1a6; border-radius: 30px 0 30px 0"> <div class="navbar-header"> <a id="menu-toggle" href="#" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span style="background-color: #153282;" class="icon-bar"></span> <span style="background-color: #153282;" class="icon-bar"></span> <span style="background-color: #153282;" class="icon-bar"></span> </a> <a href="#" class="navbar-brand"> Site Logo </a> </div> <div id="sidebar-wrapper" style="background-color:#d4c1a6" class="sidebar-toggle"> <ul class="sidebar-nav"> <li style="color:white"> <a href="#item1"><i class="glyphicon glyphicon-home"> </i>خانه</a> </li> <li> <a href="#item1"><i class="glyphicon glyphicon-euro"> </i>حسابداری</a> </li> <li> <a href="#item1"><i class="glyphicon glyphicon-pencil"> </i>تحقیقات</a> </li> <li> <a href="#item1"><i class="glyphicon glyphicon-user"> </i>پروفایل کاربر</a> </li> <li> <a href="#item1"><i class="glyphicon glyphicon-log-out"> </i>خروج </a> </li> </ul> </div> </div> </nav> </headerr> </body> </html>
و کدهای جاوا اسکریپت که زمانی اجرا میشوند که مرورگر به سایز کوچکی درآید(برای مثال در موبایل اجرا شود) و دکمه menu-toggle# ظاهر شود سپس براساس دستور جاوا اسکریپت نوشته شده میتوان با کلیک کردن برروی این دکمه ساید بار مخفی یا ظاهر کرد
<script>
$(window).resize(function () {
var path = $(this);
var contW = path.width();
if (contW >= 751) {
document.getElementsByClassName("sidebar-toggle")[0].style.right = "200px";
} else {
document.getElementsByClassName("sidebar-toggle")[0].style.right = "-200px";
}
});
$(document).ready(functionn () {
$("#menu-toggle").click(function (e) {
e.preventDefault();
var elem = document.getElementById("sidebar-wrapper");
right = window.getComputedStyle(elem, null).getPropertyValue("right");
if (right >= "200px") {
document.getElementsByClassName("sidebar-toggle")[0].style.right = "-200px";
}
else if (right == "-200px") {
document.getElementsByClassName("sidebar-toggle")[0].style.right = "200px";
}
});
});
</scriptt>
و در انتها نیز کد های شخصی سازی Css
#sidebar-wrapper {
top: 52px;
right: -200px;
width: 200px;
position: fixed;
height: 100%;
z-index: 1;
background-color:#cdf3f6
}
.sidebar-nav {
position: absolute;
top: 0;
margin: 0;
padding: 0;
width: 200px;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 50px;
}
.sidebar-nav li a {
color: white;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
background: rgba(255,255,255,0.25);
color: white;
text-decoration: none;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
background-color:#824009;
color:#d4c1a6;
border-radius:10px 0 10px 0;
}
.sidebar-nav li a{
color:black;
}
#sidebar-wrapper.sidebar-toggle {
transition: all 0.3s ease-out;
margin-right: -200px;
}
@media (min-width: 1008px) {
#sidebar-wrapper.sidebar-toggle {
transition: 0s;
right: 200px;
}
}
در نهایت یک ساید بار زیبا به طرح زیر خواهیم داشت
