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

طراحی نوار کناری متحرک با Bootstrap

طراحی نوار کناری متحرک با Bootstrap

 

امروز می خواهم به شما نشان دهم که چگونه می توانید با استفاده از Bootstrap 4 و کمی CSS و jQuery ، یک نوار ناوبری کناری جمع شونده ایجاد کنید.

از آنجا که Bootstrap 4 و Bootstrap 3 هیچ منوی نوار کناری را ارائه نمی دهند ، ما 5 راه حل جداگانه ایجاد خواهیم کرد. هر یک از آنها دارای طراحی و ویژگی های کمی متفاوت خواهند بود ، بنابراین شما می توانید طراحی مورد نیاز خود را از بین این ۵ طرح انتخاب کنید.

در هر قسمت از آموزش ، من تمام مراحل لازم در HTML ، CSS و JavaScript را به صورت گام به گام توضیح می دهم.

 

پنج حالت مختلف نواری که می سازیم به صورت زیر است:

 

  1. نوار کناری اولیه:  نوار کناری پیمایشی و جمع شونده
  2. نوار کناری اولیه:  نوار کناری ایستا و جمع شونده
  3. نوار کناری پیشرفته: نوار کناری پوششی و جمع شونده
  4. نوار کناری پیشرفته: نوار کناری ایستا و نیمه جمع شونده (نوار کناری کاملاً جمع نمی شود ، بلکه به حالت فشرده می رود)
  5. بهینه سازی طراحی:  دکمه متحرک فانتزی و نوار کناری متحرک سه بعدی

 

 

 

فایل های ابتدایی

 

قبل از اینکه کد نویسی را شروع کنیم ، ابتدا باید الگوی ابتدایی خود را با تمام فایل های لازم ایجاد کنیم. در هر چهار الگوی نوار کناری که امروز مرور خواهیم کرد ، به فایلهای CSS و JS ، بوت استرپ 4 ، کتابخانه jQuery و استایل های سفارشی خود نیاز خواهیم داشت.

همچنین ، Font Awesome 5 را برای استفاده در دکمه ها و آیتم های منو (بجای آیکون) در یکی از مثال های این مقاله استفاده می شود.

 

بنابراین ، نشانه گذاری های اولیه ما باید به شرح زیر باشد:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <title>Collapsible sidebar using Bootstrap 4</title>

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>

<body>


    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

</body>

</html>

 

 

نوار کناری پیمایشی و جمع شونده

در این قسمت ، ما می خواهیم یک نوار کناری واکنش گرا با Bootstrap 4 بسازیم که به طور عمودی همراه صفحه پیمایش (scroll) می شود.

 

 

 

ساختار فایل اصلی در کد html

همه چیز را در یک div با کلاس wrapper  قرار خواهیم داد که از ویژگی CSS flex بهره خواهد برد. در این حالت به کلاس wrapper ویژگی align-items: stretch را خواهیم داد. با توجه به flex بودن wrapper  و ویژگی stretch برای align-items ، نوار کناری (با تگ nav) ارتفاع محتوای صفحه را می گیرد و با افزایش محتوا ، ارتفاع نوار کناری نیز به صورت پویا افزایش می یابد.  

<div class="wrapper">

    <!--نوار کناری  -->
    <nav id="sidebar">
        ...
    </nav>

    <!--محتوای صفحه  -->
    <div id="content">
        <!--این قسمت را با یک محتوای نمایشی پر خواهیم کرد  -->
    </div>

</div>

 

 

منوی نوار کناری و محتوایش

ابتدا به نوار کناری خود مقداری محتوا اضافه می کنیم تا طراح اولیه کاربردی تر شود. من در آن یک منوی پیمایش عمودی قرار می دهم که حاوی برخی از پیوندهای نمایشی ناوبری و همچنین منوهای کشویی Bootstrap 4 باشد.

توجه داشته باشید که ما همچنین یک کلاس  active به اولین مورد اضافه کردیم تا مشخص شود این مورد در حال حاضر در منو فعال است ، یعنی این منو لینکی به همین صفحه است.

<div class="wrapper">
    <!-- Sidebar -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <h3>Bootstrap Sidebar</h3>
        </div>

        <ul class="list-unstyled components">
            <p>Dummy Heading</p>
            <li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#">Home 1</a>
                    </li>
                    <li>
                        <a href="#">Home 2</a>
                    </li>
                    <li>
                        <a href="#">Home 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
                <ul class="collapse list-unstyled" id="pageSubmenu">
                    <li>
                        <a href="#">Page 1</a>
                    </li>
                    <li>
                        <a href="#">Page 2</a>
                    </li>
                    <li>
                        <a href="#">Page 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>

</div>

 

 

راه اندازی منوی کشویی

  1. برای دادن قابلیت جمع شدن به منوی کشویی ، "data-toggle="collapse باید به پیوند کشویی که منو را باز و بسته می کند ، اضافه شود.
  2. توجه داشته باشید که من همچنین "class = "dropdown-toggle را اضافه کردم - این کلاس یک مثلث کوچک درگوشه منو اضافه می کند و به کاربر کمک می کند عملکرد منو را سریعتر درک کند.
  3. ویژگی href پیوند باید حاوی شناسه منوی کشویی پس از علامت # باشد. در کد زیر ، من از homeSubmenu# استفاده کرده ام.
  4. منوی کشویی نیز باید کلاس collapse داشته باشد.
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
    <li>
        <a href="#">Page 1</a>
    </li>
    <li>
        <a href="#">Page 2</a>
    </li>
    <li>
        <a href="#">Page 3</a>
    </li>
</ul>

مطمئن شوید که aria-expanded را به عنصر کنترل کشویی <a> اضافه کنید. این ویژگی به وضوح وضعیت فعلی عنصر جمع شونده را برای صفحه خوان ها و فناوری های کمکی مشابه (مثلاً برای کم بینایان) تعریف می کند. اگر عنصر جمع شونده به طور پیش فرض بسته است، باید مقدار "aria-expanded = "false داشته باشد. اگر از طریق کلاس in  تنظیم کرده اید که عنصر جمع شونده به صورت پیش فرض باز باشد ،  در عوض "aria-expanded = "true را روی کنترل تنظیم کنید.

با کلیک بر روی پیوند کنترلی ، کشویی با توجه به مقدار aria-expanded به بالا یا پایین کشیده می شود.

 

 

دکمه تغییر حالت نوار کناری

اکنون وقت آن است که دکمه تغییر حالت نوار کناری را اضافه کنید. این دکمه باز و بسته شدن نوار کناری را کنترل می کند.

آن را خارج از نوار کناری قرار خواهیم داد. مکان آن خیلی مهم نیست ، به شرطی که خارج از نوار کناری و همیشه قابل مشاهده باشد. ما آن را در نوار ناوبری بوت استرپ و در بخش محتوا (div با آیدی content) قرار می دهیم.

<div id="content">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">

            <button type="button" id="sidebarCollapse" class="btn btn-info">
                <i class="fas fa-align-left"></i>
                <span>Toggle Sidebar</span>
            </button>

        </div>
    </nav>
</div>

 

 

استایل

سرانجام زمان آن فرا رسیده است که  نوار کناری خود را کمی استایل بدهیم.

مهمترین نکته در این طرح استفاده از ویژگی flex برای div با کلاس wrapper است. همانطور که در بالا ذکر کردم ، مقدار ویژگی stretch ، ارتفاع محتوای صفحه و نوار کناری را برابر می کند.

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

پس از آن ، ما به نوار کناری عرض ثابت 250px می دهیم.

در نتیجه استفاده از خصوصیات flexbox ، محتوای صفحه با آیدی content# عرض باقیمانده از تگ دارای کلاس wrapper را می گیرد. (به شرطی که از ویژگی flex-wrap: wrap استفاده نکنیم)

سپس ، از عرض نوار کناری برای بیرون راندن آن از صفحه وقتی که به آن نیاز نداریم استفاده خواهیم کرد. این رفتار هنگامی اعمال می شود که نوار کناری دارای کلاس active باشد.

در اندازه های بزرگ (مثلاً وقتی صفحه در نمایشگر رایانه دیده می شود) اگر sidebar# کلاس active داشته باشد مخفی است و بر عکس اگر این کلاس را نداشته باشد ، قابل دیدن است. در اندازه های کوچک (مثلاً در موبایل) برعکس می شود یعنی اگر کلاس active نداشته باشد مخفی است و اگر کلاس active داشته باشد ، قابل دیدن است.

 

کلاس active دارای margin-left منفی و مقدار آن برابر با عرض نوار کناری است. به همین دلیل اعمال آن روی نوار کناری باعث می شود نوار کناری خارج از صفحه قرار گیرد و مخفی شود.

بعداً در بخش JavaScript نیز از این کلاس استفاده خواهیم کرد.

.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
}

#sidebar.active {
    margin-left: -250px;
}

 

از آنجا که نمی دانیم محتوا کل ارتفاع صفحه را پر می کند ، حداقل ارتفاع نوار کناری را 100vh تنظیم خواهیم کرد. vh یک واحد CSS است که به ارتفاع دید (viewport) اشاره دارد.

این بدان معنی است که ارتفاع اولیه نوار کناری حداقل برابر با ارتفاع صفحه خواهد بود. همچنین ، با افزایش محتوای صفحه ، ارتفاع آن افزایش می یابد چون حداقل ارتفاع را برابر 100vh تنظیم کردیم ، حداکثر ارتفاع می تواند بیشتر باشد.

#sidebar {
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;
}

 

 

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

استایل منوی کشویی Bootstrap 4 را کمی تغییر می دهیم.

ما از کلاس استاندارد dropdown-toggle در بوت استرپ 4 استفاده می کنیم. این کلاس یک مثلث کوچک در کنار پیوندهای کشویی اضافه می کند.

برای یکسان سازی شکل ظاهری پیوندها ، مثلثی که معمولاً در کنار متن قرار دارد را با کد CSS زیر به سمت راست نوار کناری منتقل می کنیم.

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

 

 

Media Query

برای نوار کناری در صفحه های کوچکتر ، به رفتار کمی متفاوت نیاز خواهیم داشت. به جای اینکه نوار کناری به صورت پیش فرض نمایان باشد ، در ابتدا پنهان است و فقط پس از کلیک روی دکمه تغییر حالت نمایان می شود. به این ترتیب ، ما فضای ارزشمندی را برای محتوای اصلی صفحه ذخیره می کنیم و نوار کناری را فقط در صورت نیاز به کاربر نشان خواهیم داد.

اساساً آنچه در اینجا باید انجام دهیم این است که استایل کلاس active را برعکس کنیم:

@media (max-width: 768px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
}

 

 

استایل دهی اضافی

این موارد فراتر از استایل های لازم برای عملکرد اصلی نوار کناری است. برای اینکه جلوه فانتزی تری به آن بدهم ، کمی بیشتر آن را استایل دهی کرده ام.

در ادامه این استایل ها را می بینید:

/*
    ADDITIONAL DEMO STYLE, NOT IMPORTANT TO MAKE THINGS WORK BUT TO MAKE IT A BIT NICER :)
*/
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";


body {
    font-family: 'Poppins', sans-serif;
    background: #fafafa;
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

#sidebar {
    /* don't forget to add all the previously mentioned styles here too */
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}
#sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
}

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}
ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

 

 

جاوا اسکریپت

 

ایده این است که با کلیک روی دکمه تغییر وضعیت ، کلاس active را به نوار کناری اضافه کنیم یا از آن برداریم.

به طور پیش فرض ، نوار کناری ظاهر می شود ، یعنی هنوز کلاس active را ندارد.

پس از کلیک روی دکمه تغییر حالت ، به نوار کناری کلاس active داده می شود و از صفحه خارج می شود. محتوای صفحه نیز از عرض تمام صفحه برخوردار می شود.

با کلیک مجدد روی دکمه تغییر حالت ، کلاس active از نوار کناری برداشته می شود و نوار کناری دوباره ظاهر می شود. و به همین شکل کلیک های مجدد روی دکمه تغییر حالت ، وضعیت وجود یا عدم وجود کلاس active در نوار کناری را تغییر می دهد. هر بار کلاس active اعمال شود استایل های آن هم به نوار کناری اعمال می شود و با حذف کلاس active استایل های آن هم از نوار کناری حذف می شود.

 

بیایید نگاهی به کد بیندازیم:

$(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

});

این کد جاوا اسکریپت اولین مثال را کامل می کند. نتیجه را می توانید در اینجا ببینید.

 

 

نوار کناری ایستا و جمع شونده

 

در این قسمت ، یک نوار کناری مشابه مثال قبل ایجاد خواهیم کرد ، اما این نوار ایستا هست. این به این معنی است که نوار همراه صفحه پیمایش نمی کند در عوض در همان مکان ابتدایی ثابت می ماند. این فقط برای دستگاه های بزرگتر با عرض دید 768px+ اعمال خواهد شد. کل صفحه نیز واکنش گرا (responsive) خواهد بود.

 

 

 

HTML

رویکرد در این مثال مشابه نوار کناری قبلی است ، بنابراین می توانیم از کد قبلی استفاده مجدد کنیم.

نشانه گذاری ما باید به شرح زیر باشد:

<div class="wrapper">
    <!-- Sidebar -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <h3>Bootstrap Sidebar</h3>
        </div>

        <ul class="list-unstyled components">
            <p>Dummy Heading</p>
            <li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#">Home 1</a>
                    </li>
                    <li>
                        <a href="#">Home 2</a>
                    </li>
                    <li>
                        <a href="#">Home 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">About</a>
            </li>
            <li>
                <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
                <ul class="collapse list-unstyled" id="pageSubmenu">
                    <li>
                        <a href="#">Page 1</a>
                    </li>
                    <li>
                        <a href="#">Page 2</a>
                    </li>
                    <li>
                        <a href="#">Page 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>

    </nav>
    <!-- Page Content -->
    <div id="content">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">

                <button type="button" id="sidebarCollapse" class="btn btn-info">
                    <i class="fas fa-align-left"></i>
                    <span>Toggle Sidebar</span>
                </button>
            </div>
        </nav>
    </div>
</div>

 

 

CSS

 

از آنجا که به یک نوار کناری با ارتفاع ثابت نیاز داریم ، در این نمونه نیازی به استفاده از ویژگی align-items که به صورت عمودی ستون های کوچکتر را می کشید تا همه ستون ها هم ارتفاع شوند ، نداریم. با این وجود باید نوار کناری کل ارتفاع دید (viewport) را بگیرد. برای این هدف  ، min-height: 100vh را با height: 100vh جایگزین خواهیم کرد.

.wrapper {
    display: flex;
    width: 100%;
}

#sidebar {
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 999;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

در این مرحله ، ما تمام تغییرات CSS را اضافه کرده ایم. اما دو ترفند اضافی در JavaScript اضافه خواهیم کرد ، حال بیایید نگاهی به آنها بیندازیم.

 

 

JavaScript

اولین ترفند این است که من نوار پیمایشی پیش فرض مرورگر (scrollbar) را در منوی کناری با یک مورد سفارشی جایگزین می کنم. فقط در مواردی که ارتفاع منو به اندازه ای باشد که در میدان دید (viewport) جا نشود به نوار پیمایشی نیاز داریم. برای این منظور ، من از یک پیمایشگر محتوای سفارشی jQuery استفاده می کنم.

ابتدا باید فایل JS آن را به فایل HTML خود اضافه کنیم.

<!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <!-- jQuery Custom Scroller CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>

</body>
</html>

 

و اضافه کردن فایل شیوه نامه آن در عنصر <head>:

<!-- Our Custom CSS -->
<link rel="stylesheet" href="style2.css">
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">

 

حال ، بیایید پلاگین را مقداردهی اولیه کنیم و از برخی گزینه های آن استفاده کنیم:

$(document).ready(function () {

    $("#sidebar").mCustomScrollbar({
         theme: "minimal"
    });

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

});

 

دومین ترفندی که استفاده خواهیم کرد این است که هنگام بستن نوار کناری ، منوهای کشویی باز را نیز می بندیم.

دلیل این امر این است که وضعیت اولیه منو ها را ثابت نگه دارید و هر بار که نوار کناری  باز می شود منو های کشویی بسته باشد.

$(document).ready(function () {

    $("#sidebar").mCustomScrollbar({
         theme: "minimal"
    });

    $('#sidebarCollapse').on('click', function () {
        // باز کردن و بستن نوار کناری
        $('#sidebar').toggleClass('active');
        // بستن منوی کشویی
        $('.collapse.in').toggleClass('in');
        // اصلاح جهت فلش ها در منوهای کشویی
        $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });

});

توضیحاتی برای روشن کردن آنچه ما در اینجا انجام داده ایم:

کلاس in وظیفه باز کردن منوی کشویی را دارد. اگر کشویی کلاس in را داشته باشد ، باز است ، اگر نه ، بسته است.

اگر این کلاس وجود داشته باشد از طریق کد جاوا اسکریپت بالا  آن را حذف می کنیم. همچنین ، مقدار aria-expanded را از true به false تغییر می دهیم تا فلش به جهت صحیح خود برگردد.

 

در اینجا نوار کناری ایستای جمع شونده کامل شد. نتیجه را می توانید در اینجا ببینید.

 

 

نوار کناری پوششی و جمع شونده

 

در این نمونه ، نواری مشابه نواری که گوگل برای منوی کشویی (Navigation Drawer) خود در تبلت ها و تلفن های همراه در طراحی Material استفاده می کند ، خواهیم ساخت.

 

وقتی نوار کناری باز باشد قسمت سمت چپ محتوای صفحه را می پوشاند و بقیه مطالب را نیز با یک لایه کدر می پوشاند.

 

 

 

HTML

ما از همان علامت گذاری در بالا استفاده خواهیم کرد بعلاوه یک دکمه dismiss# که به نوار کناری اضافه می کنیم. این دکمه هنگام باز بودن نوار کناری مسئول بسته شدن آن خواهد بود و از آنجا که ما یک پوشش کدر نیز استفاده خواهیم کرد ، یک div  با کلاس overlay را نیز در پایین صفحه خود برای این منظور اضافه می کنیم.

<div class="wrapper">
    <!--نوار کناری  -->
    <nav id="sidebar">

        <div id="dismiss">
            <i class="fas fa-arrow-left"></i>
        </div>

        <div class="sidebar-header">
            <h3>Bootstrap Sidebar</h3>
        </div>

        <ul class="list-unstyled components">
            <p>Dummy Heading</p>
            <li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Home</a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#">Home 1</a>
                    </li>
                    <li>
                        <a href="#">Home 2</a>
                    </li>
                    <li>
                        <a href="#">Home 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">About</a>
                <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
                <ul class="collapse list-unstyled" id="pageSubmenu">
                    <li>
                        <a href="#">Page 1</a>
                    </li>
                    <li>
                        <a href="#">Page 2</a>
                    </li>
                    <li>
                        <a href="#">Page 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Portfolio</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
        </ul>
    </nav>

    <!--محتوای صفحه -->
    <div id=”content”>

        <nav class=”navbar navbar-expand-lg navbar-light bg-light”>
            <div class=”container-fluid”>

                <button type=”button” id=”sidebarCollapse” class=”btn btn-info”>
                    <I class=”fas fa-align-left”></i>
                    <span>Toggle Sidebar</span>
                </button>
            </div>
        </nav>
    </div>
    <!--آیتم مربوط به پوشش تیره  -->
    <div class=”overlay”></div>
</div>

 

 

CSS

نوار کناری در قسمت سمت چپ صفحه ثابت (fixed) خواهد بود و محتوای آن تمام ارتفاع صفحه را اشغال می کند.

به طور پیش فرض ، نوار کناری مخفی می باشد.

با کلیک بر روی دکمه تغییر حالت ، هم پوشش overlay  و هم نوار کناری در بالای محتوای صفحه ظاهر می شوند.

 

برای درک بهتر آن را به صورت لایه ای تصور می کنیم:

  • محتوای صفحه لایه پشتی خواهد بود.
  • پوشش کدر لایه میانی با رنگ مشکی شفاف خواهد بود. این پوشش محتوای صفحه را پوشش می دهد تا به چشم کاربر اجازه دهد به راحتی روی نوار کناری متمرکز شود.
  • در آخر ، نوار کناری لایه جلویی خواهد بود.

برای دستیابی به این رفتار لایه بندی ، ما به سادگی از ویژگی z-index استفاده خواهیم کرد.

همانطور که قبلا ذکر شد ، ما همچنین یک دکمه dismiss# هم به نوار کناری اضافه خواهیم کرد. این دکمه به صورت absolute در قسمت بالا و سمت راست نوار قرار می گیرد.

.wrapper {
    display: block;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    /* top layer */
    z-index: 9999;
}

.overlay {
    display: none;
    position: fixed;
    /* full screen */
    width: 100vw;
    height: 100vh;
    /* transparent black */
    background: rgba(0, 0, 0, 0.7);
    /* middle layer, i.e. appears below the sidebar */
    z-index: 998;
    opacity: 0;
    /* animate the transition */
    transition: all 0.5s ease-in-out;
}
/* display .overlay when it has the .active class */
.overlay.active {
    display: block;
    opacity: 1;
}

#dismiss {
    width: 35px;
    height: 35px;
    position: absolute;
    /* top right corner of the sidebar */
    top: 10px;
    right: 10px;
}

 

 

جاوا اسکریپت

در دو نوار کناری قبلی ، عملکرد دکمه تغییر حالت ، باز یا بستن نوار کناری بود. در اینجا ، ما یک دکمه بستن را در نوار کناری خود قرار داده ایم ، بنابراین عملکرد دکمه تغییر حالت ، فقط باز کردن نوار کناری است. با کلیک روی دکمه تغییر حالت ، هم پوشش و هم نوار کناری ظاهر می شود و با کلیک کردن دکمه بستن نوار کناری ، هم پوشش و هم نوار کناری مخفی می شوند.

<script type="text/javascript">
    $(document).ready(function () {
        $("#sidebar").mCustomScrollbar({
            theme: "minimal"
        });

        $('#dismiss, .overlay').on('click', function () {
            // hide sidebar
            $('#sidebar').removeClass('active');
            // hide overlay
            $('.overlay').removeClass('active');
        });

        $('#sidebarCollapse').on('click', function () {
            // open sidebar
            $('#sidebar').addClass('active');
            // fade in the overlay
            $('.overlay').addClass('active');
            $('.collapse.in').toggleClass('in');
            $('a[aria-expanded=true]').attr('aria-expanded', 'false');
        });
    });
</script>

با کد جاوا اسکریپت این نمونه نیز کامل شد. نتیجه را می توانید در اینجا ببینید.

 

 

نوار کناری ایستا و نیمه جمع شونده

 

در این مثال ، ما به جای ساختن یک نوار کناری که کاملاً بسته شود ، یک نوار کناری کوچک شونده ایجاد خواهیم کرد. منوی کناری پس از کلیک دکمه تغییر حالت، به نسخه فشرده تبدیل می شود.

 

 

از نشانه گذاری مثالهای اول به عنوان نقطه شروع استفاده می کنیم.

 

 

HTML

برای ارتقای بیشتر آن ، در هر پیوند ناوبری از یک نماد نیز استفاده می کنیم. ما از Font Awesome برای نمادهای موجود در منوی کناری استفاده خواهیم کرد.

<div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <h3>Bootstrap Sidebar</h3>
            <strong>BS</strong>
        </div>

        <ul class="list-unstyled components">
            <li class="active">
                <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                    <i class="fas fa-home"></i>
                    Home
                </a>
                <ul class="collapse list-unstyled" id="homeSubmenu">
                    <li>
                        <a href="#">Home 1</a>
                    </li>
                    <li>
                        <a href="#">Home 2</a>
                    </li>
                    <li>
                        <a href="#">Home 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">
                    <i class="fas fa-briefcase"></i>
                    About
                </a>
                <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                    <i class="fas fa-copy"></i>
                    Pages
                </a>
                <ul class="collapse list-unstyled" id="pageSubmenu">
                    <li>
                        <a href="#">Page 1</a>
                    </li>
                    <li>
                        <a href="#">Page 2</a>
                    </li>
                    <li>
                        <a href="#">Page 3</a>
                    </li>
                </ul>
            </li>
        </ul>

    </nav>

    <!-- Page Content  -->
    <div id="content">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">

                <button type="button" id="sidebarCollapse" class="btn btn-info">
                    <i class="fas fa-align-left"></i>
                    <span>Toggle Sidebar</span>
                </button>
            </div>
        </nav>
    </div>
</div>

 

 

CSS

به جای اینکه نوار کناری را به طور کامل از صفحه خارج کنیم ، فقط عرض آن را کاهش می دهیم و محتوای آن را متناسب با این عرض جدید تغییر شکل می دهیم.

استایل های نسخه فشرده شده به کلاس active اضافه می شوند. به عنوان مثال ، اندازه فونت پیوند ها را كوچكتر كرده ، متن ها را در مركز نوار تراز كرده و در زیر نماد ها قرار می دهیم. همچنین ، ما پیکان را به پایین هر پیوند منتقل می کنیم ، یا padding را در اطراف پیوندهای کشویی تنظیم می کنیم.

 

استایل های css به شرح زیر است:

/* Shrinking the sidebar from 250px to 80px and center aligining its content*/
#sidebar.active {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}

/* Toggling the sidebar header content, hide the big heading [h3] and showing the small heading [strong] and vice versa*/
#sidebar .sidebar-header strong {
    display: none;
}
#sidebar.active .sidebar-header h3 {
    display: none;
}
#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
}

#sidebar.active ul li a i {
    margin-right:  0;
    display: block;
    font-size: 1.8em;
    margin-bottom: 5px;
}

/* Same dropdown links padding*/
#sidebar.active ul ul a {
    padding: 10px !important;
}

/* Changing the arrow position to bottom center position, 
   translateX(50%) works with right: 50% 
   to accurately  center the arrow */
#sidebar.active .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

 

 

Media Query ها

در صفحه های کوچکتر ، ما نسخه فشرده شده را به عنوان حالت فعال پیش فرض نوار کناری حفظ خواهیم کرد. یعنی نسخه غیر فشرده به هیچ وجه در موبایل ها استفاده نمی شود و پس از کلیک روی دکمه تغییر حالت، فقط نسخه فشرده شده قابل مشاهده خواهد بود.

برای دستیابی به این هدف ، باید استایل ها را از کلاس active به استایل های موبایل در media (max-width: 768px)@  کپی کرده و ویژگی margin-left را نیز به آن اضافه کنیم. برای موبایل ها ، نوار کناری با کلاس active یعنی sidebar.active# حاشیه سمت چپ (margin-left) منفی خواهد داشت (از دید خارج خواهد شد) و نوار کناری بدون کلاس active حاشیه چپ (margin-left) را روی 0 تنظیم می کند.

@media (max-width: 768px) {
    /* 80px and its content aligned to centre. Pushing it off the screen with the
       negative left margin
    */
    #sidebar.active {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important;
    }


    /* Reappearing the sidebar on toggle button click */
    #sidebar {
        margin-left: 0; 
    }


    /* Toggling the sidebar header content, 
       hide the big heading [h3] and showing the small heading [strong] and vice versa
    */
    #sidebar .sidebar-header strong {
        display: none;
    }
    #sidebar.active .sidebar-header h3 {
        display: none;
    }
    #sidebar.active .sidebar-header strong {
        display: block;
    }

    /* Downsize the navigation links font size */
    #sidebar.active ul li a {
        padding: 20px 10px;
        font-size: 0.85em;
    }

    #sidebar.active ul li a i {
        margin-right:  0;
        display: block;
        font-size: 1.8em;
        margin-bottom: 5px;
    }

    /* Adjust the dropdown links padding*/
    #sidebar.active ul ul a {
        padding: 10px !important;
    }

    /* Changing the arrow position to bottom center position, 
      translateX(50%) works with right: 50% 
      to accurately  center the arrow */
    .dropdown-toggle::after {
        top: auto;
        bottom: 10px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }
}

 

 

جاوا اسکریپت

ما هیچ کدی به کدهای جاوا اسکریپت مثال اول اضافه نمی کنیم و فقط از همان عملکردی که در نوار کناری اول استفاده کردیم استفاده خواهیم کرد.

$(document).ready(function () {

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });

});

فعلاً همین کافی خواهد بود. ما باید یک نوار کناری با قابلیت فشرده شدن داشته باشیم که به خوبی کار می کند. نتیجه را می توانید در اینجا ببینید.

 

 

بهینه سازی طراحی

همیشه جای پیشرفت و اصلاحات بیشتر وجود دارد. به عنوان یک مرحله اضافی، می خواهم نحوه ایجاد نماد متحرک منوی همبرگری برای دکمه تغییر حالت منو و همچنین نحوه افزودن انیمیشنی چشم نواز برای باز و بسته شدن نوار کناری را به شما نشان دهم.

 

 

 

HTML

باز هم ، من از نوار کناری ساده ی مثال اول به عنوان پایه استفاده می کنم. اما به جای استفاده از Glyphicon برای دکمه تغییر حالت، از سه تگ span استفاده می کنم. هر یک نواری از منوی همبرگر را نشان می دهد و بعداً آنها را با CSS استایل می دهیم.

<div class="wrapper">

        <nav id="sidebar">
            <!-- Sidebar Header -->
            <div class="sidebar-header">
                <h3>Collapsible Sidebar</div>
            </div>

            <!-- Sidebar Links -->
            <ul class="list-unstyled components">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><!-- Link with dropdown items -->
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li><a href="#">Page</a></li>
                        <li><a href="#">Page</a></li>
                        <li><a href="#">Page</a></li>
                    </ul>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <div id="content">
            <button type="button" id="sidebarCollapse" class="navbar-btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
        <div>

</div>

 

 

انیمیشنی کردن دکمه تغییر حالت

ابتدا چند استایل به دکمه و میله های همبرگری آن اضافه می کنیم. این دکمه همبرگری دارای سه خط افقی است که زیر هم قرار دارند (مثل نان های همبرگر) و ما به آنها یک انتقال فانتزی با cubic-bezier خواهیم داد. من اغلب از این ابزار انیمیشن CSS برای تولید انتقال های جالب استفاده می کنم ، شما می توانید از بین برخی انتقال های پیش ساخته انتخاب کنید یا انتقال سفارشی خود را به راحتی بسازید.

#sidebarCollapse {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
}

#sidebarCollapse span {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    display: block;
    background: #555;
    transition: all 0.8s cubic-bezier(0.810, -0.330, 0.345, 1.375);
}

وقتی نوار کناری باز است ، میله ها در دکمه تغییر حالت به صورت متقاطع (X) هستند. وقتی نوار کناری بسته است ، میله ها موازی یکدیگر خواهند بود.

به طور پیش فرض ، نوار کناری باز خواهد بود، بنابراین باید وضعیت اولیه میله ها متقاطع باشد. برای دستیابی به آن از ویژگی transform در css استفاده خواهیم کرد.

میله اول با زاویه 45 درجه چرخانده می شود ، آخرین میله به اندازه زاویه 45 درجه در جهت مخالف چرخانده می شود و نوار دوم در این لحظه پنهان می شود.

#sidebarCollapse span:first-of-type {
    /* چرخش اولین میله دکمه همبرگری */
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    /* مخفی کردن دومین میله دکمه همبرگری */
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    /* چرخش سومین میله دکمه همبرگری */
    transform: rotate(-45deg) translate(1px, -1px);
}

 

با کلیک روی دکمه ، میله ها باید به حالت موازی تبدیل شوند. برای دستیابی به آن ، از jQuery برای فعال کردن کلاس active روی دکمه استفاده خواهیم کرد. این کلاس چرخش میله ها را بازنشانی کرده و همه آنها را قابل مشاهده می کند.

#sidebarCollapse.active span {
    /* رفع چرخش همه میله ها در دکمه همبرگری بدون توجه به اینکه میله دوم چرخشی نداشت */
    transform: none;
    /* تمام میله ها را از حالت مخفی خارج کردن بدون توجه به اینکه فقط میله دوم مخفی بود */
    opacity: 1;
    margin: 5px auto;
}

 

 

انیمیشنی کردن نوار کناری

حال ، یک انیمیشن 3D در CSS به نوار کناری اضافه می کنیم. می خواهیم انیمیشنی شبیه باز و بسته شدن درها ، به نوار کناری اضافه کنیم.

اول از همه ، ما باید ویژگی پرسپکتیو را به تگ container اضافه کنیم.

container ما ، در این مورد ، تگی با کلاس wrapper است. ویژگی perspective  فاصله از منظره را بر اساس تعداد پیکسل ها مشخص می کند و به ما این امکان را می دهد که زاویه دید سه بعدی را تغییر دهیم.

سپس ، در حین جمع شدن نوار، با استفاده از خاصیت transform ، نوار کناری را به صورت عمودی 100 درجه می چرخانیم.

ویژگی transform-origin مرکز چرخش را مشخص می کند و امکان تغییر موقعیت عناصر تبدیل شده را می دهد. در اینجا ، نوار کناری را از سمت چپ مرکز (center-left) می چرخانیم.

.wrapper {
    display: flex;
    align-items: stretch;
    perspective: 1500px; 
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.6s cubic-bezier(0.945, 0.020, 0.270, 0.665);
    transform-origin: center left; /* مرکز ترنسفورم میله را سمت چپ میانه ارتفاع قرار دادن */
}

#sidebar.active {
    margin-left: -250px;
    transform: rotateY(100deg); /* چرخش عمودی نوار به اندازه ۱۰۰ درجه */
}

 

 

Media Query ها

در صفحه های کوچکتر ، نوار کناری به طور پیش فرض جمع می شود. در صفحه های کوچک حالت پیش فرض منوی همبرگر باید به حالت موازی برگردانده شود. برای دستیابی به این هدف ، باید قوانین CSS را از نمای استاندارد تغییر دهیم.

@media (max-width: 768px) {
    /* 
      معکوس کردن رفتار نوار کناری:       
       در ابتدا به صورت عمودی چرخانده و مخفی شده 
       با کلیک دکمه تغییر حالت نوار کناری از حالت چرخشی خارج می شود
    و نمایان می شود      
    */
    #sidebar {
        margin-left: -250px;
        transform: rotateY(100deg);
    }
    #sidebar.active {
        margin-left: 0;
        transform: none;
    }

    /* 
برعکس کردن ظاهر میله های دکمه همبرگری:       
       حذف چرخش از اولین میله 
       و آخرین میله و نمایان کردن میله دوم 
       و اضافه کردن حاشیه عمودی به آنها 
    */
    #sidebarCollapse span:first-of-type,
    #sidebarCollapse span:nth-of-type(2),
    #sidebarCollapse span:last-of-type {
        transform: none;
        opacity: 1;
        margin: 5px auto;
    }

    /*
      با باز شدن نوار ، حاشیه عمودی را اضافه می کنیم
میله اول و سوم را می چرخانیم تا حالت ضربدری پیدا کنند    
میله دوم را مخفی می کنیم     
    */
    #sidebarCollapse.active span {
        margin: 0 auto;
    }
    #sidebarCollapse.active span:first-of-type {
        transform: rotate(45deg) translate(2px, 2px);
    }
    #sidebarCollapse.active span:nth-of-type(2) {
        opacity: 0;
    }
    #sidebarCollapse.active span:last-of-type {
        transform: rotate(-45deg) translate(1px, -1px);
    }
}

 

 

جاوا اسکریپت

 

برای تغییر وضعیت بین حالتهای متقاطع و موازی ، با استفاده از jQuery کلاس active را اضافه و حذف می کنیم.

$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
        $(this).toggleClass('active');
    });
});

نتیجه این طراحی را می توانید در اینجا ببینید.

 

آموزش طراحی وب با ASP.NET Core MVC (تحت پروژه سایت اشتراک فیلم)

فصلِ: 5 , تعداد قسمت ها: 176 , سطح: صفر تا صد
موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش Bootstrap آموزش Ajax آموزش JQUERY

این فصل در یک نگاه:

در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…

توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد.   آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از  ASP.NET CORE  MVC 3.0 و V…
دانلود و ادامه توضیحات

ساخت پروژه دیوار بصورت دو سکویی با ASP.NET Core و Xamarin

فصلِ: 5 , تعداد قسمت ها: 135 , سطح: صفر تا صد
موضوعات: آموزش ASP.NET آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET MVC آموزش Bootstrap

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…
دانلود و ادامه توضیحات

آموزش صفر تا صد بوت استرپ

فصلِ: 2 , تعداد قسمت ها: 13 , سطح: صفر تا صد
موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …

توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…
دانلود و ادامه توضیحات

دوره اموزش فریم ورک بوت استرپ

فصلِ: 6 , تعداد قسمت ها: 23 , سطح: صفر تا صد
موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…

سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …
دانلود و ادامه توضیحات

آموزش طراحی وبسایت و اپلیکیشن اندروید ورزش3 (Varzesh3)

فصلِ: 4 , تعداد قسمت ها: 78 , سطح: متوسط
موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش JQUERY آموزش HTML5 آموزش Ajax آموزش Bootstrap آموزش JAVASCRIPT

این فصل در یک نگاه:

…

در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …
دانلود و ادامه توضیحات

پکیج آموزش پروژه محور PHP ساخت سایت نیازمندی ها مشابه شیپور

فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد
موضوعات: آموزش PHP آموزش Bootstrap آموزش CSS آموزش JQUERY آموزش HTML آموزش PHP MVC آموزش Ajax آموزش HTML5

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
دانلود و ادامه توضیحات

آموزش api نویسی

فصلِ: 5 , تعداد قسمت ها: 201 , سطح: صفر تا صد
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش Bootstrap آموزش برنامه نویسی آندروید

این فصل در یک نگاه:

ایجاد پروژه آژانس مسافرتی.....…

فصل اول: آشنایی با مبانی برنامه نویسی اندروید   آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…
دانلود و ادامه توضیحات

وبینار آموزش تکنیکهای ایمیل مارکتینگ | روشهای تبدیل بازدیدکننده به مشتری

فصلِ: 1 , تعداد قسمت ها: 2 , سطح: متوسط
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش Ajax آموزش Bootstrap آموزش Laravel آموزش PHP MVC آموزش ایمیل مارکتینگ آموزش وردپرس

این فصل در یک نگاه:

بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…

  وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ   اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…
دانلود و ادامه توضیحات

آموزش تصویری لاراول - پروژه محور و کاربردی

فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش ساخت فروشگاه اینترنتی آموزش Bootstrap آموزش Laravel

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
دانلود و ادامه توضیحات

پکیج پروژه محور ساخت سایت مشابه آپارات با فریم ورک های react.js و laravel

فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد
موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش NodeJs آموزش Bootstrap آموزش Laravel آموزش Symphony

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
دانلود و ادامه توضیحات
به راهنمایی نیاز دارید؟و یا سردرگم هستید؟
021-4762 3380 901-000-5000 تماس از ساعت 8 الی 16:30 آدرس های ایمیل سایت: clicksite.ir@gmail.com
کسب درآمد کنید
اگر در هر زمینه ای مربوط به رشته های مهندسی و یا برنامه نویسی به تخصص خودایمان دارید،پس زمان را تلف نکنید و هم اکنون دست به کار شوید.به جمع متخصصی بپیوندید،گامی در راستای ارتقا سطح آموزش های تصویری فارسی بردارید. کلیک سایت از طرف همه مهندسین ،شما را دعوت به همکاری می نماید.وجود شما افتخاری برای همه ماست.
نماد اعتماد الکترونیک
لوگو ساماندهی
logo-samandehi

مقالات

آموزش PHP

آموزش HTML

آموزش CSS

آموزش برنامه نویسی آندروید

مقالات آموزش CSS

مدیریت و پشتیبانی سرور

مشاهده سبد این پنجره را مجددا نمایش نده!

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
انتخاب فایل
ارسال فایل
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید