Partial Side Nav Bootstrap 3 part 1

Bootstrap 3 adalah salah satu contoh sukses pengembangan framework untuk membuat website responsive. Banyak sekali tips dan trik yang bisa kalian gunakan ketika menggunakan bootstrap. Pada artikel kali ini kita akan menambahkan satu lagi trik yang bisa kita gunakan untuk menambah wawasan kalian tentang bagaimana cara melakukan kustomisasi bootstrap dengan benar.
Pada artikel sebelumnya kita sudah mencoba membuat sebuah template side nav statis dengan memanfaatkan bootstrap 3. Saat ini kita akan membuat template sejenis side nav namun kali ini adalah partial sidenav, dimana pengaruh collapsible akan membuat sidenav mengecil dan mengubah setiap menu menjadi icon. Sekarang kita buat struktur html seperti berikut sebagai basic template bootstrap.

<!DOCTYPE html>
<head>
    <title>Bootstrap 3 Collapsible Sidebar</title>
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <!-- Bootstrap Js CDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>


Sekarang kita akan membuat struktur utama yang akan menjadi sidebar dan konten nya seperti berikut

<div class="wrapper">
    <!-- Sidebar -->
    <nav id="sidebar">
        ...
    </nav>
    <!-- Page Content -->
    <div id="content">
        <!—Di isi dengan konten dummy -->
    </div>
</div>  


Selanjutnya kita akan menyusun sidebar dengan beberapa konten seperti beberapa navigasi dan juga dropdown, di sebelahnya juga kita isi konten dengan tombol toggle sebagai triggernya


<div class="wrapper">

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

            <!-- Sidebar Links -->
            <ul class="list-unstyled components">
                <li>
                    <a href="#homeSubmenu" data-toggle="collapse">
                        <i class="glyphicon glyphicon-home"></i>
                        Home
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-briefcase"></i>
                        About
                    </a>
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false">
                        <i class="glyphicon glyphicon-duplicate"></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>
                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-link"></i>
                        Portfolio
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="glyphicon glyphicon-send"></i>
                        Contact
                    </a>
                </li>
            </ul>
        </nav>

    <div id="content">
        <button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
            <i class="glyphicon glyphicon-align-left"></i>
            Toggle Sidebar
        </button>
    </div>
</div>


Selanjutnya kita akan mengisi konten utama pada template ini. Disini kita hanya membuat sebuah tombol toggle yang akan menjadi trigger untuk memunculkan dan menyembunyikan sidebar yang telah kita buat.

<script type="text/javascript">
        $(document).ready(function () {

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

        });
    </script>

Baiklah teman-temandiatas tadi adalah layout  dan struktur html yang akan klita gunakan. Pada artikel selanjutnya akan ada penambahan css yang diperlukan dan juga demo untuk kalian lihat secara langsung hasilnya. Semoga bermanfaat

 

29 November 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat