tejariapp-new-logotejariapp-new-logotejariapp-new-logotejariapp-new-logo
  • صفحه اصلی
  • پروژه ها
    • پروژه طراحی سایت
    • پروژه های اندروید
    • پروژه های تحت ویندوز
    • UI & UX
    • ربات تلگرام
  • سفارش پروژه
    • انجام پروژه اندروید (Android)
    • طراحی و ساخت اپلیکیشن موبایل
    • انجام پروژه طراحی سایت با php
    • انجام پروژه طراحی سایت با Asp.net
    • انجام پروژه سی شارپ
    • فرم سفارش پروژه
  • مدرسه ی تجاری اپ
    • طراحی سایت
    • اندروید
    • سی شارپ
    • آموزش پایگاه داده
    • برنامه های کاربردی
  • لینک های مفید
    • پرداخت آنلاین
    • درباره تجاری اپ
    • تماس با ما
استخدام برنامه نویس متلب
سفارش پروژه
✕
            هیچ نتیجه ای یافت نشدمشاهده همه نتایج

            سورس کد سایدبار سایت با بوت استرپ

            • صفحه نخست
            • مدرسه ی تجاری اپ آموزش طراحی سایت
            • سورس کد سایدبار سایت با بوت استرپ
            پروژه مدیریت سیستم مدرسه با سی شارپ و 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">&nbsp</i>خانه</a>
            </li>
            <li>
            <a href="#item1"><i class="glyphicon glyphicon-euro">&nbsp</i>حسابداری</a>
            </li>
            <li>
            <a href="#item1"><i class="glyphicon glyphicon-pencil">&nbsp</i>تحقیقات</a>
            </li>
            <li>
            <a href="#item1"><i class="glyphicon glyphicon-user">&nbsp</i>پروفایل کاربر</a>
            </li>
            <li>
            <a href="#item1"><i class="glyphicon glyphicon-log-out">&nbsp</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;
            }
             }
            

            در نهایت یک ساید بار زیبا به طرح زیر خواهیم داشت

            sidebar

             

            اشتراک گذاری

            پست های مرتبط

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            30 بهمن 1400

            دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            30 بهمن 1400

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            توابع در زبان برنامه نویسی دارت (Dart)

            توابع در زبان برنامه نویسی دارت (Dart)

            27 بهمن 1400

            توابع در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب

            دیدگاهتان را بنویسید لغو پاسخ

            نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

            ساخت اپلیکیشن های موبایل

            • ساخت اپلیکیشن فروشگاهی
            • ساخت اپلیکشن ابزاری و خدماتی
            • ساخت اپلیکیشن آموزشی
            • و هزاران موضوع دیگر

             
            کلیک کنید

            آخرین دیدگاه ها

            • 7 خرداد 1401

              داودی نظر در آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6

            • 6 فروردین 1401

              yasaman نظر در راست چین کردن متن در فیگما Figma

            • 3 فروردین 1401

              رضا نظر در مفاهیم Observable و Observer در RxJava

            تجاری اپ در شبکه های اجتماعی

            لوگوی تایید پرداخت آنلاین

            2015-2022 © تمامي حقوق مادي و معنوي اين وب سايت نزد تجاری اپ محفوظ بوده و هر گونه کپي برداري از مطالب پيگرد قانوني به همراه دارد! | طراح سایت : ProgRun
            سفارش پروژه
                      هیچ نتیجه ای یافت نشدمشاهده همه نتایج